新建 html 頁面，複製下方**粘入
bootstrap4 基礎模版
<
!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1, shrink-to-fit=no"
>
"stylesheet" href=
"">
hello, world!
<
/title>
<
/head>
="container"
>
="row"
>
新增上你的**<
/h1>
<
/div>
<
/div>
<
/body>
"">
<
/script>
"">
<
/script>
"">
<
/script>
$(document)
.ready
(function
(e))
;<
/script>
<
/html>
很多很多的現成的例子：
class
="container"
>
class
="table table-striped"
>
>
>
序號th
>
>
姓名th
>
>
年齡th
>
tr>
>
>
888td
>
>
張三td
>
>
1000td
>
tr>
table
>
div>
**樣式
屬性作用
table
基礎樣式
table-striped
條紋狀 **
table-bordered
帶邊框的**
table-hover
滑鼠懸停
table-condensed
緊縮**
#####狀態類
屬性描述 作用
active
活動灰success
成功綠info
提示藍warning
警告黃danger
危險紅響應式**
將任何 .table 元素包裹在 .table-responsive 元素內，即可建立響應式**，其會在小螢幕裝置上（小於768px）水平滾動。當螢幕大於 768px 寬度時，水平滾動條消失。
按鈕樣式可以新增給a標籤，但是避免使用除botton之外的其他標籤，不同裝置相容性方面可能會出現問題
按鈕
btn-default 預設樣式 白
btn-primary 首選項 紫
btn-success 成功 綠
btn-info 一般資訊 藍
btn-warning 警告 橙
btn-danger 危險 紅
btn-link 鏈結 藍字下劃線
尺寸btn-lg 大按鈕
btn-default 預設尺寸
btn-sm 小按鈕
btn-xs 超小尺寸
href="
" class
="btn btn-default btn-lg"
role
="button"
>
defaulta
>
啟用狀態
type
="button"
class
="btn btn-primary btn-lg **active**"
>
primary buttonbutton
>
href
="#"
class
="btn btn-primary btn-lg **active**"
role
="button"
>
primary linka
>
type
="button"
class
="btn btn-lg btn-primary"
**disabled**
>
primary buttonbutton
>
如果需要讓使用了 .img-responsive 類的水平居中，請使用 .center-block 類，不要用 .text-center。
#####形狀
Bootstrap4教程導航
bootstrap4 教程 bootstrap4 安裝使用 bootstrap4 網格系統 bootstrap4 文字排版 bootstrap4 顏色 bootstrap4 bootstrap4 影象形狀 bootstrap4 jumbotron bootstrap4 資訊提示框 bootstrap...
使用SCSS擴充套件Bootstrap4
擴充套件參考 因為打算寫乙個小 而個人時間又不是那麼充裕，所以沒有選擇前後端分離的架構。對於非前後端分離應用來說，bootstrap應該是目前的最佳前端框架之一了。而bootstrap4，是bootstrap的最新版本，其更新內容中，有關自定義擴充套件的支援，相對來說要比以前方便很多。注 scss與...
Bootstrap4的網格系統
bootstrap4 網格系統 bootstrap 提供了一套響應式 移動裝置優先的流式網格系統，隨著螢幕或視口 viewport 尺寸的增加，系統會自動分為最多 12 列。bootstrap 4 的網格系統是響應式的，列會根據螢幕大小自動重新排列。網格類 bootstrap 4 網格系統有以下 5...