mentor2code

กลับหน้าแรกของคอร์ส

# พื้นฐาน HTML และ UI Design

ในส่วนนี้จะกล่าวถึงหน้าที่ของ HTML ซึ่งเป็นองค์ประกอบหลักในการควบคุมโครงสร้าง และเนื้อหาของ web application โดยมี CSS ทำหน้าที่ในการจัดและตกแต่งรูปแบบในการแสดงผล UI

# ขั้นตอนการติดตั้งเพิ่มเติม

# ติดตั้ง boostrap ลงใน vue project

  • ติดตั้ง bootstrap ผ่าน yarn
yarn add vue bootstrap-vue bootstrap
1

  • สร้าง folder ชื่อ plugins อยู่ level เดียวกับไฟล์ App.vue

  • สร้างไฟล์ bootstrap-vue.js ใน plugins folder และโดยมี code ด้านล่าง

import Vue from 'vue';

import BootstrapVue from 'bootstrap-vue';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';

Vue.use(BootstrapVue);
1
2
3
4
5
6
7
  • แก้ไขไฟล์ main.js โดยเพิ่มบรรทัดที่ 3 และเติม ; ท้ายบรรทัดให้ครบ ดังภาพ


 







import Vue from 'vue';
import App from './App.vue';
import './plugins/bootstrap-vue';

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
}).$mount('#app');
1
2
3
4
5
6
7
8
9
  • ทดสอบว่า boostrap ใช้งานได้ โดยการใส่โค้ดด้านล่างใน ไฟล์ HelloWorld.vue โดยแทรกระหว่าง tag template
<template>
  <div class="container">
    <div class="row">
      <div class="col">
        <h3>Column 1</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
      </div>
      <div class="col">
        <h3>Column 2</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
      </div>
      <div class="col">
        <h3>Column 3</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
      </div>
    </div>
  </div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
  • ทดสอบโดยเปลี่ยน class จาก container เป็น container-fluid ดังภาพ
<template>
  <div class="container-fluid">
  ...
  </div>
</template>
1
2
3
4
5
  • สามารถอธิบายความแตกต่างได้หรือไม่?

# ทดลอง bootstrap แบบต่างๆ