Bootstrap

Bootstrap教程

響應式的列重置

偏移列

嵌套列

列排序

col-md-4 col-md-push-8

內聯子標題

<h1>我是標題1 h1. <small>我是副標題1 h1</small></h1>

引導主體副本

<p class="lead">這是一個演示引導主體副本用法的實例。</p>

強調  對齊 small strong

縮寫

<abbr title="World Wide Web">WWW</abbr><br>

地址

引用

<blockquote>

</blockquote>

列表

定義列表：在這種類型的列表中，每一個列表項能夠包含 <dt> 和 <dd> 元素。<dt> 表明 定義術語，就像字典。接着，<dd> 是 <dt> 的描述。.dl-horizontal 能夠讓 <dl> 內的短語及其描述排在一行。開始是像 <dl> 的默認樣式堆疊在一塊兒，隨着導航條逐漸展開而排列在一行。

表格

<div class="table-responsive">(響應式表格)

表單

• 垂直表單（默認）
• 內聯表單
• 水平表單

按鈕

顏色、大小、激活狀態、禁用狀態、class="btn btn-default"（按鈕標籤）

圖片

• .img-rounded：添加 border-radius:6px 來得到圖片圓角。
• .img-circle：添加 border-radius:50% 來讓整個圖片變成圓形。
• .img-thumbnail：添加一些內邊距（padding）和一個灰色的邊框。

class="img-responsive"（響應式圖片）

Bootstrap 輔助類

文本（顏色）、背景（顏色）、其餘（居中、浮動、清除浮動、顯示隱藏、強制顯示、關閉按鈕、下拉按鈕）

 響應式

class=""

 

字體

字體圖標  

<span class="glyphicon glyphicon-search"></span> 

大小   

 style="font-size: 60px"

顏色   

style="color: rgb(212, 106, 64);"

文本陰影  

style="text-shadow: black 5px 3px 3px;"

字形圖標

下拉菜單

對齊、標題

按鈕組

<div class="btn-group">  按鈕組裏加下拉

按鈕下拉菜單

  （也能夠加上拉菜單 <div class="btn-group dropup">）

輸入框組

 <div class="input-group">

 導航元素

 水平（默認）、垂直、兩端對齊、下拉菜單

導航欄

響應式、表單、按鈕、文本、鏈接 

麪包屑導航

 分頁

標籤

徽章

超大屏幕

頁面標題

縮略圖

警告

<div class="alert alert-success">成功！很好地完成了提交。</div>

<div class="alert alert-info">信息！請注意這個信息。</div>

<div class="alert alert-warning">警告！請不要提交。</div>

<div class="alert alert-danger">錯誤！請進行一些更改。</div>

進度條

<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">

交替

<div> class .progress-bar 和 class progress-bar-* ，* 能夠是 success、info、warning、danger。

條紋

<div class="progress progress-striped">
    <div class="progress-bar progress-bar-success" role="progressbar"
         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
         style="width: 90%;">
        <span class="sr-only">90% 完成（成功）</span>
    </div>
</div>

動畫

<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-success" role="progressbar"
         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
         style="width: 40%;">
        <span class="sr-only">40% 完成</span>
    </div>
</div>

 多媒體對象

<div class="media">

列表組

<ul class="list-group">

<li class="list-group-item">

面板

標題、腳註

 Well

Well 是一種會引發內容凹陷顯示或插圖效果的容器 <div>。

Bootstrap 過渡效果（Transition）插件

 　　Bootstrap 模態框（Modal）插件   

　　　　經過 data 屬性：data-toggle="modal" data-target="#identifier" 或 href="#identifier"    identifier 爲模態框id

　　　　經過 JavaScript：$('#identifier').modal(options)

 　　Bootstrap 標籤頁（Tab）插件

　　　　經過 data 屬性：data-toggle="tab"或 data-toggle="pill" 

　　　　經過 JavaScript：

　　Bootstrap 警告框（Alert）插件

　　　　經過 data 屬性： data-dismiss="alert"

　　　　經過 JavaScript：$(".alert").alert()

　　Bootstrap 輪播（Carousel）插件

　　　　class="carousel slide"

　　Bootstrap 提示工具（Tooltip）插件

　　　　經過 data 屬性：data-toggle="tooltip"

　　　　經過 JavaScript：$('#identifier').tooltip(options)

　　Bootstrap 彈出框（Popover）插件

　　　　經過 data 屬性：data-toggle="popover"

　　　　經過 JavaScript：$('#identifier').popover(options)

　　Bootstrap 按鈕（Button）插件

　　　　向 button 元素添加 data-loading-text="Loading..." 做爲其屬性便可

　　

　　Bootstrap 摺疊（Collapse）插件

　　   ------------>點開  

　　Bootstrap 附加導航（Affix）插件

 

 　　

可視化佈局工具