黑皮考町

前言 基本上在開發前端網頁時, 若是要豐富網頁的內容, 一定少不了使用一些圖示來增添美感,  為了能夠自由放大縮小圖片且不失真, 通常我們會使用SVG格式的圖片來美化UI 。  這類的圖我們可以自己做或是從font awesome下載 。  以下是介紹如何在Vue.js 的框架裡套用 font awesome 透過npm下載 npm install vue-awesome npm install vue-awesome 註冊到 main.js import 'vue-awesome/icons' import Icon from 'vue-awesome/components/Icon' Vue.component('icon',Icon) 使用(以按鈕為例) <b-button> <icon name='save'></icon> Save </b-button>

前言: 一個網頁內容通常不會只有一個網頁元件, 所以如果我們希望呈現出來的結果符合預期, 那我們必須要學會如何排版, 有秩序地安置這些網頁元件, 這裡的教學會告訴大家如何使用Grid 來實現排版 首先, 我們來看一下範例 這個頁面可以分成三個部分, 如下圖所示 一. Welcome ,網頁的簡介 二. Game 1 的簡介與下載點 三. Game 2 的簡介與試玩按鈕 基本上如果要使用Grid , 首先, 我們需要一個 container 當作容器 <div class=" container "> ... </div> 接下來, 在container裡定義列與行 定義列的語法 :　 <div class="row"> 這裡我們先把兩列定義出來 <div class=" row "> </div> <div class=" row "> </div> 再來, 定義行 定義行的語法: 　 <div class="col-[支援的裝置]-[大小]"> 這裡跟列比較不一樣的是, 定義行的時候可以指定要支援的裝置, 以及大小,  目前可支援的裝置有四種 xs, sm, md, lg, 如果你的網頁是要呈現在手機上的話, 可能就需選擇xs  目前支援的大小有1~12, 1 表示呈現大小是一整列的1/12的意思, 所以依此類推 12 表示一整列裡佔12/12大的行 這邊, 我們替範例在第一列增加一個行, 還有在第二列裡增加兩個等大的行, 所以原始碼就會變成 <div class=" row ">      <div class=" col-md-12 ">      </div> </div> <div class=" row ">      <di...

無法查看此摘要。請 按這裡查看文章。