新建 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>
很多很多的現成的例子:
加上table基礎樣式之後才會附加**樣式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 超小尺寸
通過給按鈕新增 .btn-block 類可以將其拉伸至父元素100%的寬度,而且按鈕也變為了塊級(block)元素。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
>
為新增** .img-responsive **類可以讓支援響應式布局。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...