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

導航

導航條

路徑導航

分頁

標簽

徽章

巨幕

警告框

進度條

媒體對象

列表組

面板

bootstrap 快速入門