bootstrap基礎介紹(一)
一、文字
標題:
<h1>~<h6>/*逐漸字型大小由36px 30px 24px 18px 14px 12px*/
<small></small>/*副標題*/
強調內容:(,.lead)
<p class="lead"></p>
粗體:
<strong></strong>
斜體:
<i></i>
<em></em>
強調類名: .text-muted:提示,淺灰色 .text-primary:主要,藍色 .text-success:成功,淺綠色 .text-info:通知資訊,淺藍色 .text-warning:警告,黃色 .text-danger:危險,褐色
文字對齊方式: .text-left、.text-center、.text-right、 .text-justify
影象的樣式風格
1、img-responsive
:響應式圖片,主要針對於響應式設計
2、img-rounded
:圓角圖片
3、img-circle
:圓形圖片
4、img-thumbnail
:縮圖片
Bootstrap有200個icon圖示
,通過加字首引入
<span class="glyphicon glyphicon-search"></span>
<span class="glyphicon glyphicon-asterisk" ></span>
<span class="glyphicon glyphicon-plus"></span>
<span class="glyphicon glyphicon-cloud"></span>
二、列表
ol、ul、dl(有序、無序、定義列表) 去點列表(.list-unstyled)
<ul class="list-unstyled">
<li>不帶專案符號</li>
<li>不帶專案符號</li>
</ul>
內聯列表:(.list-inline)
<ul class="list-inline">
<li>W3cplus</li>
<li>Blog</li>
<li>CSS3</li>
</ul>
定義列表:(dl)
<dl>
<dt>大標題</dt>
<dd>描述</dd>
<dt>大標題</dt>
<dd>描述</dd>
</dl>
水平定義列表:(.dl-horizontal)
<dl class="dl-horizontal">
<dt>標題一</dt>
<dd>描述內容</dd>
<dt>標題二</dt>
<dd>描述內容</dd>
</dl>
程式碼:
1、使用<code></code>
來顯示單行內聯程式碼
2、使用<pre></pre>
來顯示多行塊程式碼
3、使用<kbd></kbd>
來顯示使用者輸入程式碼
注意:
元素一般用於顯示大塊的程式碼,並保證原有格式不變。但有時候程式碼太多,而且不想讓其佔有太大的頁面篇幅,就想控制程式碼塊的大小。你只需要在pre標籤上新增類名“.pre-scrollable”,就可以控制程式碼塊區域最大高度為340px,一旦超出這個高度,就會在Y軸出現滾動條。
表格
.table
:基礎表格
.table-striped
:斑馬線表格
.table-bordered
:帶邊框的表格
.table-hover
:滑鼠懸停高亮的表格
.table-condensed
:緊湊型表格
.table-responsive
:響應式表格
表格類名:
.active
、.success
、.info
、.warning
、.danger
可以配合表格屬性使用
三、表單
表單水平效果:
在<form>
元素使用類名“.form-horizontal”
;配合Bootstrap框架的網格系統使用
內聯表單效果:
在<form>
元素使用類名“.form-inline”
注意:無論是哪種表單風格,請在表單控制元件的<div>
中加屬性.form-control
,也是為了樣式不出錯,也是為了讓表單控制元件呈現焦點狀態
下拉選擇框select Bootstrap框架中的下拉選擇框使用和原始的一致,多行選擇設定multiple屬性的值為multiple
<form role="form">
<div class="form-group">
<select multiple class="form-control">
<option>踢足球</option>
<option>游泳</option>
<option>慢跑</option>
<option>跳舞</option>
</select>
</div>
</form>
文字域textarea 注意:對於文字域,一般設定rows可定義其高度,設定cols可以設定其寬度,但在bootstrap中無需設定cols屬性
<form role="form">
<div class="form-group">
<textarea class="form-control" rows="3"></textarea>
</div>
</form>
表單控制元件(複選框checkbox和單選擇按鈕radio) 在bootstrap中關於單選複選框按照下面格式書寫
<form role="form">
<div class="checkbox">
<label>
<input type="checkbox" value="">
記住密碼
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>
喜歡
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">
不喜歡
</label>
</div>
</form>
複選框和單選按鈕水平排列 注意:如果checkbox和radio需要水平排列,在label標籤上新增類名“checkbox-inline”即可
<form role="form">
<div class="form-group">
<lable class="radio-inline">
<input type="radio" value="option1" name="sex">男性
</lable>
<lable class="radio-inline">
<input type="radio" value="option2" name="sex">女性
</lable>
<lable class="radio-inline">
<input type="radio" value="option3" name="sex">保密
</lable>
</div>
</form>
表單控制元件禁用:disabled
直接載入控制元件裡即可
<input class="form-control" type="text" placeholder="表單已禁用,不能輸入" disabled>
表單控制元件大小.input-lg
<input class="form-control input-lg" type="text" placeholder="新增.input-lg,控制元件變大">
表單顏色狀態
注意:若是想同時顯示小icon,則新增類名“has-feedback”,而且必須同時和以下類名配合使用
1、.has-warning
:警告狀態(黃色)
2、.has-error
:錯誤狀態(紅色)
3、.has-success
:成功狀態(綠色)
<form role="form">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess1">成功狀態</label>
<input type="text" class="form-control" id="inputSuccess1" placeholder="成功狀態" >
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning1">警告狀態</label>
<input type="text" class="form-control" id="inputWarning1" placeholder="警告狀態">
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError1">錯誤狀態</label>
<input type="text" class="form-control" id="inputError1" placeholder="錯誤狀態">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
</form>
表單提示資訊.help-block
<span class="col-xs-6 help-block">你輸入的資訊是正確的</span>
表單按鈕
注意:一般製作按鈕除了使用<button>
標籤元素之外,還可以使用<input type="submit">
、<a class="btn btn-default">a標籤按鈕</a>、<span class="btn btn-default">span標籤按鈕</span>
、<div class="btn btn-default">div標籤按鈕</div>
以下是定製按鈕的集中型別:
<button class="btn" type="button">基礎按鈕.btn</button>
<button class="btn btn-default" type="button">預設按鈕.btn-default</button>
<button class="btn btn-primary" type="button">主要按鈕.btn-primary</button>
<button class="btn btn-success" type="button">成功按鈕.btn-success</button>
<button class="btn btn-info" type="button">資訊按鈕.btn-info</button>
<button class="btn btn-warning" type="button">警告按鈕.btn-warning</button>
<button class="btn btn-danger" type="button">危險按鈕.btn-danger</button>
<button class="btn btn-link" type="button">連結按鈕.btn-link</button>
按鈕的大小:我們可以用.btn-lg
(大型按鈕)、.btn-sm
(小型按鈕)、.btn-xs
(超小型按鈕)來控制,不加表示正常按鈕,其中需要按鈕寬度充滿整個父容器(width:100%),可以加屬性類名“btn-block”
即塊狀按鈕。
按鈕的狀態:按鈕的活動狀態主要包括按鈕的懸浮狀態(:hover)
,點選狀態(:active)
和焦點狀態(:focus)
幾種。按鈕還有禁用狀態 : 方法1:在標籤中新增disabled屬性
方法2:在元素標籤中新增類名“disabled”
<button class="btn:hover" type="button">基礎按鈕.btn</button>
<button class="btn:active btn-default" type="button">預設按鈕.btn-default</button>
<button class="btn:focus btn-primary" type="button">主要按鈕.btn-primary</button>
四、網格系統
1、工作原理:
資料行(.row)
必須包含在容器(.container)
中。
在行(.row)
中可以新增列(.column)
,但列數之和不能超過平分的總列數,比如12。
具體內容應當放置在列容器(column)之內,而且只有列(column)才可以作為行容器(.row)的直接子元素。
當然,在一個列中新增一個或者多個行(row)容器,然後在這個行容器中插入列(像前面介紹的一樣使用列)。但在列容器中的行容器(row),寬度為100%時,就是當前外部列的寬度。這就是列的巢狀
<div class="container">
<div class="row">
<div class="col-md-8">
我的裡面嵌套了一個網格
<div class="row">
<div class="col-md-6">col-md-6</div>
<div class="col-md-6">col-md-6</div>
</div>
</div>
<div class="col-md-4">col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-8">
我的裡面嵌套了一個網格
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
</div>
</div>
</div>
</div>
2、列偏移 只需要在列元素上新增類名“col-md-offset-*”(其中星號代表要偏移的列組合數),那麼具有這個類名的列就會向右偏移。 使用”col-md-offset-*”對列進行向右偏移時,要保證列與偏移列的總數不超過12。
<div class="container">
<div class="row">
<div class="col-md-8">
我的裡面嵌套了一個網格
<div class="row">
<div class="col-md-6">col-md-6</div>
<div class="col-md-6">col-md-6</div>
</div>
</div>
<div class="col-md-4">col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-8">
我的裡面嵌套了一個網格
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
</div>
</div>
</div>
</div>
2、列排序 看程式碼即可理解
<div class="container">
<div class="row">
<div class="col-md-1 col-md-push-11">.col-md-1</div>
<div class="col-md-11 col-md-pull-1">.col-md-2</div>
</div>
</div>