bootstrap 快速入門
簡介
是一個的 HTML、CSS 和 JS 框架
配置頁面
遠程訪問
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- 可選的Bootstrap主題文件（一般不用引入） -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- jQuery文件。務必在bootstrap.min.js 之前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
本地訪問
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/bootstrap-theme.min.css">
<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
代碼容器
.container
.container-fluid
柵格系統
將一行分割成12列, 可以使用col-md-*的方式了來聲明需要佔用的寬度
根據屏幕的尺寸分成了四種情況 col-lg-* col-md-* col-sm-* col-xs-*
列的偏移
.col-md-offset-*
列的嵌套
段落
p標籤
顏色設置
背景色
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>
前景色
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>
內聯文本樣式
mark標籤------加亮文本
s標籤 ----- 刪除文本
u標籤 ----- 下劃線文本
b標籤 -----加重文本
i標籤 ----- 斜體文本
code標籤 ---- 代碼文本
kbd標籤 ---- 鍵盤按鍵標識
pre標籤 ---- 原樣輸出(輸出代碼事例)
對齊方式
text-left
text-center
text-right
字符串大小寫
text-lowercase
text-uppercase
text-capitalize
引用
blockquote & footer
blockquote-reverse & footer
列表
無序列表
ul li
有序列表
ol li
無樣式列表
list-unstyled
行內列表
list-inline
描述
dl dt dd
浮動
快速浮動
pull-left
pull-right
center-block
清除浮動
clearfix
快速顯示和隱藏
show
hide
表格
基本結構
<table class="table">
<thead>
<tr><td>#</td><td>number</td></tr>
</thead>
<tbody>
<tr><td>1111</td><td>2222</td></tr>
</tbody>
</table>
斑馬紋理
table-striped
邊框
table-bordered
懸浮變色
table-hover
情景顏色
active
success
info
warning
danger
表單
默認
行內
水平排版
校驗元素
has-warning
has-error
has-success
元素大小
高度
input-lg
input-sm
input-md
寬度
col-md-*
按鈕
類名
btn
樣式
btn-default
btn-primary
btn-success
btn-info
btn-warning
btn-danger
尺寸
btn-lg
btn-md
btn-sm
btn-xs
圖片
響應式
img-responsive
圖片形狀
img-rounded
img-circle
img-thumbnail
響應式類
visible-lg visible-md visible-sm visible-xs
hidden-lg hidden-md hidden-sm hidden-xs
組件
圖標
按鈕組
不帶下拉框
帶下拉框
尺寸
btn-lg
btn-md
btn-sm
btn-xs
導航
導航條
路徑導航
分頁
標籤
徽章
巨幕
警告框
進度條
媒體對象
列表組
面板