bootstrap初級

時間 2019-11-20

原文原文鏈接

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap的HTML標準模板</title>

<link href="css/bootstrap.min.css" rel="stylesheet">

<link href="css/your-style.css" rel="stylesheet">


<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>


<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>css

強調：.lead
斜體：<em>、<i>
強調類：
.text-muted：提示，使用淺灰色（#999）
.text-primary：主要，使用藍色（#428bca）
.text-success：成功，使用淺綠色(#3c763d)
.text-info：通知信息，使用淺藍色（#31708f）
.text-warning：警告，使用黃色（#8a6d3b）
.text-danger：危險，使用褐色（#a94442）
若是是hover的話，應該這樣用：a.text-primary:hover
文本對齊風格：
.text-left
.text-right
.text-center
.text-justify 兩端對齊
列表：
CSS自己：有序列表（ol、li）、無序列表(ul、li)、自定義列表（dl、dt（標題）、dd）
去點列表：.list-unstyled
內聯列表：經過添加類名.list-inline來實現內聯列表，簡單點兒說就是把垂直列表換成水平列表，並且
去掉項目符號（編號），保持水平顯示，也能夠說內斂列表就是爲製做水平導航而生。
定義列表：和CSS的差很少<dl><dt>標題</dt> <dd></dd></dl>
水平定義列表：就是<dt></dt>包含的內容和<dd></dd>在水平上，只有當屏幕大於768時纔有這個效果。
代碼：在bootstrap主要提供了三種代碼風格
使用<code></code>來顯示單行內聯代碼
使用<pre></pre>來顯示多行快代碼
使用<kbd></kbd>來顯示用戶輸入代碼
無論使用哪一種代碼風格，在代碼中碰到小於號(<)要使用硬編碼"<"來替代，大於號(>)要使用">"來替代。
並且對於<pre>代碼塊風格，標籤前面留多少空格，在顯示效果中就會留多少個空格。
當使用<pre>元素時，有時候代碼太多，不想讓其佔有太大的頁面篇幅，在pre標籤上，添加類名
.pre-scrollable，能夠控制代碼塊區域最大高度爲340px，一旦超出，Y軸上有滾動條
表格：<table>
<thead>表頭
<tr>
<th></th>
</tr>
</thead>
<tbody>表體
<tr>
</td></td
</tr>
</tbody>
</table>
爲不一樣的樣式風格提供了不一樣的類名：
.table:基礎表格
.table-striped:斑馬線表格
.table-bordered:帶邊框的表格
.table-hover:鼠標懸停高亮的表格
.table-condensed:緊湊型表格
.table-responsive:響應式表格
表格行的類：
.active:表示當前活動的信息
.success:表示成功或者正確的行爲
.info:表示中立的信息或行爲
.warning:表示警告，須要特別注意
.danger:表示危險或者多是錯誤的行爲html

表單：
水平表單：bootstrap框架默認的表單是垂直風格的，但不少時候咱們須要的水平表單
風格（標籤居左，表單控件居右）。
要實現水平表單效果，須要2個條件：1是在<form>元素使用類名"form-horizontal"
2是要配合bootstrap框架的網格系統。
內聯表單：有時候咱們須要把表單的控件都在一行內顯示，只須要在<form>元素中添加類
名"form-inline"便可。
表單控件：輸入框input
表單控件：下拉選擇框select
表單控件：文本域textarea
表單控件：複選框checkbox，須要添加類名.checkbox
表單控件：單選擇按鈕radio，須要添加類名.radio
表單控件：複選框和但選按鈕水平排列，須要添加在label上添加類名checkbox-inline或
radio-inline
表單控件：按鈕，一般使用<button>來設置
類有幾種類型btn、btn-primary、btn-info、btn-success、btn-warning、
btn-danger、btn-inverse、btn-default、btn-link
表單控件：設置控件的大小，類名：input-sm, input-lg,這個僅僅是對高度進行了處理，
若是要對寬度進行處理的話，那麼就要用到BootStrap框架裏的網格系統
表單控件：禁用狀態，bootstrap框架的表單的禁用狀態和普通的表單的表單禁用狀態
是同樣的，在相應的表單控件上添加屬性"disabled"
如：<input class="form-control" type="text" placeholder="表單已經
禁用不能輸入" disabled>
如：在bootstrap框架中，若是fieldset設置了disabled屬性，整個域都
處於被禁用狀態。
如：聽說對於整個禁用的域，若是legend中有輸入框的話，那麼這個框
是沒法被禁用的。<filedset disabled><legend><input type="text"
class="form-control" placeholder="啦啦啦" /></lengend></filedset>
表單控件：驗證狀態。成功狀態：.has-success，錯誤狀態：.has-error，警告狀態：.has-warning
，是和form-group放一塊兒的，若是要加圖標的話，須要加has-feedback,這個是放在
成功狀態類名的後面的。而後在後面加上span。如：
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
<span class="glyphicon glyphicon-remove form-control-feedback">
表單控件：表單提示信息。<span class="help-block"></span>
表單控件：多標籤支持按鈕
<button class="btn btn-default" type="button"></button>
<input type="submit" class="btn btn-default">
<span class="btn btn-default"></span>
<div class="btn btn-default"></div>
表單控件：按鈕大小，.btn-lg, .btn-sm
表單控件：塊狀按鈕，製做按鈕時，須要在製做按鈕的時候須要按鈕寬度充滿整個父容器。
可使用類：.btn-block。
表單控件：方法一：在標籤中添加disabled屬性。方法二：在元素標籤中添加類名"disabled"
圖像：
.img-responsive 響應式圖片，主要針對於響應式設計
.img-rounded 圓角圖片
.img-circle: 圓形圖片
.img-thumbnail 縮略圖片
圖標：
如：glyphicon glyphicon-search、 glyphicon glyphicon-asteriskhtml5

網格系統：網格系統的實現原理很是簡單，僅僅是經過定義容器大小，平分12份（也有24或32份，但12最
常見），再調整內外邊距，最後結合媒體查詢，就製做出了強大的響應式網格系統。bootstrap
框架中的網格系統就是將容器平分紅12份的。

頁偏移：有的時候咱們不但願相鄰的兩個列緊靠在一塊兒，但又不想使用margin或者其餘的技術手段
來。這個時候就可使用列偏移（offset）功能來實現。使用列偏移也很是簡單，只須要在列元素
上添加類名"col-md-offset-*"（其中星號表明要偏移的列組合數），那麼具備這個類名的列就會
向右偏移。例如,你在列元素上添加"col-md-offset-4"，表示該列向右移動4個列的寬度。jquery

列排序：其實就是改變列的方向。須要添加類名col-md-push-*和col-md-pull-*（*表明移動的列
組合數）css3

列的嵌套：在一個列裏，又能夠添加行，最多依然是能夠分紅12份，不過12份的最大寬度是父元素的寬度。bootstrap

下拉菜單：
基本用法：1.使用一個名爲"dropdown"的容器包裹了整個下拉菜單元素<div class="dropdown"></div>
2.使用了一個<button>按鈕做爲父菜單，而且定義類名爲"dropdown-toggle"和自定義"data-
toggle"屬性，且值必須和最外容器類名一致，此示例爲: data-toggle="dropdown"
3.下拉菜單項使用ul列表，而且定義一個類名爲"dropdown-menu"，此示例爲：
<ul class="dropdown-menu">
實現原理：經過js，給父容器"div.dropdown"添加或移除類名"open"來控制下拉菜單顯示或隱藏。
下拉分割線：<li role="presentation" class="divider"></li>
菜單標題：<li role="presentation" class="dropdown-header"></li>
對齊方式：bootstrap下拉菜單默認是左對齊，若是要讓下拉菜單相對於父容器右對齊時，能夠在"dropdown-
menu"上添加一個"pull-right"或者"dropdown-menu-right"類名
菜單項狀態：當前狀態(.active)和禁用狀態(.disabled)瀏覽器

按鈕：
按鈕組：使用一個名爲"btn-group"的容器，把多個按鈕放在這個容器中。
按鈕工具欄：將按鈕組"btn-group"放在一個大的容器"btn-toolbar"中。
按鈕組大小："btn-group-lg"、"btn-group-sm"、"btn-group-xs"
嵌套分組：不少時候，咱們常把下拉菜單和普通的按鈕排列在一塊兒，實現相似於導航菜單的效果
直接爲那個按鈕設置爲按鈕組，將<ul></ul>寫在裏面就能夠了。
垂直嵌套分組：須要將類名"btn-group"換成"btn-group-vertical"
等分按鈕：等分按鈕也常被稱爲是自適應分組按鈕，只要再按鈕組"btn-group"上追加一個
"btn-group-justified"。注意：在製做等分按鈕時，請儘可能使用<a>標籤元素來
製做按鈕，由於使用button標籤元素的話，使用display:table在部分瀏覽器下支持並很差
按鈕下拉菜單：從外觀上看和下拉菜單差很少，按鈕下拉菜單的原理是點擊一下菜單，會顯示隱藏的
下拉菜單。
按鈕的向下向上三角形：實現方法：須要在".btn-group"類上追加"dropup"類名（這也是
作向上談起下拉菜單要用的類名）。
向上彈起的下拉菜單：同上
導航：
基礎樣式：標籤形tab導航，也稱爲選項卡導航
<ul class="nav nav-tabs">
<li><a href="#">ha</a></li>
</ul>
選項卡活動狀態：<li class="active"><a href="#">ha</a><li>
選項卡禁用狀態：<li class="disabled"><a href="#">hh</a></li>
膠囊形(pills)導航：<ul class="nav nav-pills">
<li class="active"><a></a></li>
</ul>
垂直堆疊的導航：只須要在"nav-pills"的基礎上添加一個"nav-stacked"類名便可。
自適應導航：自適應導航指的是導航佔容器所有寬度，並且菜單項能夠像表格的單元格同樣
自適應寬度，須要加一個類名"nav-justified",固然也須要和"nav-tabs"或者
"nav-pills"配合使用。
導航加下拉菜單（二級導航）：將li標籤做爲父容器，使用類名"dropdown"，同時在li中嵌套
另外一個列表ul就能夠了。
如：
<ul class="nav nav-pills">
<li class="active"><a href="##">這是首頁</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">教程<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">haha</a></li>
</ul>
</li>
</ul>
麪包屑式菜單：爲ol加入breadcrumb類。框架

導航條（navbar）：
基礎導航條：在製做一個基礎導航條時，分如下幾步：1.首先在製做導航的列表(<ul class=
nav">)基礎上添加類名"navbar-nav"。2.在列表容器外部添加一個容器(div)，而且
使用類名"navbar"和"navbar-default"
爲基礎導航條添加標題，二級菜單及狀態：
添加標題：爲要添加的那個標題設置一個容器(div)，添加類名"navbar-header"，
在其下的<a>標籤添加類名"navbar-brand"。添加二級菜單，仍是以<li>標籤爲父
元素，設置其類名爲dropdown，其子容器爲<a>和<ul>，類名按照下拉菜單同樣實現。
帶表單的導航條：好比加搜索框和按鈕。在navbar容器裏放置一個帶有navbar-form類名的表單
如：
<form action="##" class="navbar-form navbar-left" rol="search">
<div class="form-group>
<input type="text" class="form-control" placeholder="請輸入
關鍵字" />
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
固定導航條：使用.navbar-fixed-top和.navbar-fixed-bottom
響應式導航條：此處看代碼最好。 http://www.imooc.com/code/3124
反色導航條：只是將navbar-deafult改爲了navbar-inverse。
帶頁碼的分頁導航：具體能看到多少頁，使用<ul>、<li>，在<ul>標籤上加入pagination方法，經過"pagination-lg"
讓分頁導航變大。經過"pagination-sm"讓分頁導航變小
翻頁分頁導航：這種分頁導航是看不到具體的頁碼，只會提供一個"上一頁"和"下一頁"的按鈕
爲ul添加.paper，爲li添加.previous使上一步居左，.next可使下一步居右。ide

標籤：
使用方法：<h3>Example heading <span class="label label-default">New</span></h3>
label、label-default、label-primary、label-success、label-info、lable-warning
label-danger工具

徽章：
使用類名badge，如<span class="badge pull-right">3</span>

縮略圖：
經過"thumbnail"樣式配合bootstrap的網格系統來實現，爲縮略圖添加描述使用樣式caption

警示框：
默認警示框：使用的是alert來實現警示框效果alert,alert-success、alert-info、alert-warning
以及alert-danger
可關閉的警示框：。。
警示框的連接：添加alert-link

進度條：
基本進度條：外容器使用progress，內容器使用progress-bar
彩色進度條：內容器：progress-bar-info以及其餘。。
條紋進度條：外容器：progress-striped，內容器:progress-bar-info及其餘。
動態條紋進度條：在progress和progress-striped的基礎上再加入active
層疊進度條：百分比，多個內容器
帶Label的進度條：直接在<div>標籤中添加入:10%

媒體對象：
媒體對象的容器：media
媒體對象的對象：media-object
媒體對象的主體：media-body
媒體對象的標題：media-heading
媒體對象能夠嵌套，在medio-body裏
媒體對象列表：<ul class="media-list"><li class="media"></li></ul>

列表組：
基本列表組：主要包括兩個部分，一個是list-group，列表組容器，經常使用的是ul元素
固然也能夠是ol或是div元素。第二個是list-group-item:列表項，經常使用
的是li元素，也能夠是div元素
帶徽章的列表組：只要子啊<li></li>中間添加<span class="badge">12</span>就能夠了
帶連接的列表組：加<a>標籤
自定義列表組：list-group-item-heading用來定義列表項頭部樣式
list-group-item-text用來定義列表項主要內容
列表項的狀態：active disabled
多彩列表項：list-group-item-success等等

面板：
基本面板：就是一個div容器運用了"panel"樣式，產生一個具備邊框的文本顯示塊。因爲
panel不控制顏色，因此在panel的基礎上添加一個控制顏色的主題panel-default
另外在裏面添加了一個div.penel-body來放面板主體的內容。
帶有頭和尾的面板：panel-heading,panel-footer
彩色面板：修改panel-default爲panel-danger等等
面板中能夠嵌套表格 panel-body裏嵌套
面板中能夠嵌套列表組 panel-body裏嵌套

Bootstrap支持的JavaScript插件動畫過渡(Transitions)等等

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。