一:
代碼顯示方式:
第一種是“內(nèi)聯(lián)“標(biāo)簽 <code>。
第二種是 ”塊級“<pre> 標(biāo)簽。
【注意】當(dāng)您使用 <pre> 和 <code> 標(biāo)簽時,開始和結(jié)束標(biāo)簽使用了 unicode 變體: < 和 >。
1)<pre>標(biāo)簽:多行代碼
<pre>如果需要把代碼顯示為一個獨(dú)立的塊元素,請使用 <pre> 標(biāo)簽:</pre>
2)<code>標(biāo)簽:
<p><code><header></code> 作為內(nèi)聯(lián)元素被包圍。</p>
3)<var>標(biāo)簽:變量賦值
<p><var>x</var> = <var>a</var><var>b</var> + <var>y</var></p>
==> x = ab + y
4)<kbd>標(biāo)簽:
<p>使用 <kbd>ctrl + p</kbd> 來打開打印窗口。</p>
二:表格
<table><thead><tbody><tr><td><th><caption>
1)用于table上的相關(guān)樣式類:
<table class="table"> 任意表格添加基本樣式 (只有橫向分隔線);
<table class="table table-striped">在 tbody 內(nèi)添加斑馬線形式的條紋 ( IE8 不支持)
<table class="table table-bordered">為所有表格的單元格添加邊框;
<table class="table table-hover">啟用表格中 tbody 上的行的懸停效果;
<table class="table table-condensed">讓表格更加緊湊;
<table class="table table-striped table-bordered table-hover table-condensed">聯(lián)合使用所有表格類
2)可用于表格的行或者單元格
<tr class="active">類將懸停的顏色應(yīng)用在行或者單元格上
<tr class="success">類表示執(zhí)行成功的操作(綠色)
<tr class="info">表示信息變化的操作(藍(lán)色)
<tr class="warning">表示一個警告操作(黃色)
<tr class="danger">表示一個危險的操作(紅色)
3)響應(yīng)式表格:把任意的 .table 包在 .table-responsive class 內(nèi)
<div class="table-responsive"><table class="table"></table></div>
三:表單
1)布局:
1、基本布局:
創(chuàng)建基本表單的步驟:向父 <form> 元素添加 role="form" ==》把標(biāo)簽和控件放在一個帶有 class .form-group 的 <div> 中。這是獲取最佳間距所必需的==》向所有的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control"
<form role="form">
<div class="form-group">
<label for="name">名稱</label>
<input type="text" class="form-control" >
<p class="help-block">這是塊級幫助文本的實(shí)例--解釋的灰色文本。</p>
</div>
</form>
2、內(nèi)聯(lián)布局:文本標(biāo)簽按鈕都在一行內(nèi)顯示,向 <form> 標(biāo)簽添加 class .form-inline;
默認(rèn)情況下,Bootstrap 中的 input、select 和 textarea 有 100% 寬度。在使用內(nèi)聯(lián)表單時,您需要在表單控件上設(shè)置一個寬度。
使用 class .sr-only,您可以隱藏內(nèi)聯(lián)表單的標(biāo)簽。
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="inputfile">文件輸入</label>
<input type="file" id="inputfile">
</div>
</form>
3、水平表單:
創(chuàng)建步驟:向父 <form> 元素添加 class .form-horizontal ==》把標(biāo)簽和控件放在一個帶有 class .form-group 的 <div> 中 ==》向標(biāo)簽添加 class .control-label
例如:<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label">名字</label>
<div class="col-sm-10"><input type="text" class="form-control"></div>
</div>
</form>
Bootstrap 支持最常見的表單控件,主要是 input、textarea、checkbox、radio 和 select。
- 輸入框(Input)適當(dāng)?shù)?type 聲明是必需的,這樣才能讓 input 獲得完整的樣式。
文本框(Textarea)進(jìn)行多行輸入的時候,必要時可以改變 rows 屬性行<textarea class="form-control" rows="3"></textarea> - 復(fù)選框(Checkbox)和單選框(Radio)對一系列復(fù)選框和單選框使用 .checkbox-inline 或 .radio-inline,控制它們顯示在同一行上。<label class="checkbox-inline"><input type="checkbox" id="inlineCheckbox1" value="option1"> 選項(xiàng) 1</label>
- 選擇框(Select):使用 multiple="multiple" 允許用戶選擇多個選項(xiàng)。<select multiple class="form-control"></select>
- 靜態(tài)控件:當(dāng)您需要在一個水平表單內(nèi)的表單標(biāo)簽后放置純文本時使用form-control-static;<p class="form-control-static">email@example.com</p>
image.png
表單控件狀態(tài):
- 輸入框焦點(diǎn)
- 禁用輸入框input:只需要簡單地添加 disabled 屬性<input disabled>
- 禁用fieldset:<fieldset disabled></fieldset>
- 驗(yàn)證狀態(tài):<div class="form-group has-success"></div> 成功綠色 / .has-warning警告黃 / .has-error錯誤紅
表單控件大小:可以分別使用 class .input-lg 和 .col-lg-* 來設(shè)置表單的高度和寬度
<input class="form-control input-lg" type="text" > / .input-sm input-lg
<select class="form-control input-lg"></select>