繼續上篇的基礎部分延伸,主要說一下列表,表格,表單相關Bootstrap框架變化以及基礎知識.
1.列表篇
除了HTML提供的三種基本列表樣式:
div框架，無序列表
<ul><li>…</li> </ul>
有序列表
<ol><li>…</li> </ol>
定義列表
<dl><dt>…</dt><dd>…</dd> </dl>
Bootstrap根據平時的使用情形提供了六種形式的列表：
vue 表單驗證，? ?? ?普通列表
? ?? ?有序列表
? ?? ?去點列表
? ?? ?內聯列表
java框架，? ?? ?描述列表
? ?? ?水平描述列表
以有序列表為例 有時候我們不需要列表前面的數字 那么就需要用到框架中一個類名“.list-unstyled”,這樣就可以去除默認的列表樣式的風格。
說白了就是把以前自帶的樣式全都去掉了.
excel怎么做表格。說到這里簡單說一下很多框架都出了一些看似很雞肋的樣式,比如這個還有一些去除字體樣式巴拉巴拉的(說實話開始我也覺得就是多此一舉) 但是使用框架那么盡量不要手動去修改或者自己寫一些樣式去替代框架樣式,也許當時解決了你得一時之需以后代碼維護網站更新起來這些零零散散的修改會影響到整體網站布局,所以盡量能使用框架樣式就使用框架的且盡量不要修改.
.list-unstyled { padding-left: 0; list-style: none; }
Bootstrap像去點列表一樣，通過添加類名“.list-inline”來實現內聯列表，簡單點說就是把垂直列表換成水平列表，而且去掉項目符號（編號），保持水平顯示.
對于定義列表而言，Bootstrap并沒有做太多的調整，只是調整了行間距，外邊距和字體加粗效果。
/*源碼請查看bootstrap.css文件第594行~第607行*/
dl {
margin-top: 0;
margin-bottom: 20px;
}
dt,
dd {
line-height: 1.42857143;
}
dt {
font-weight: bold;
}
dd {
margin-left: 0;
}
這個列表也可以水平顯示, 水平定義列表就像內聯列表一樣，Bootstrap可以給<dl>添加類名“.dl-horizontal”給定義列表實現水平顯示效果。
/*源碼請查看bootstrap.css文件第608行~第621行*/
@media (min-width: 768px) {
.dl-horizontal dt {
float: left;
width: 160px;
overflow: hidden;
clear: left;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;}
.dl-horizontal dd {
margin-left: 180px;}
} 表格、
此處添加了一個媒體查詢。也就是說，只有屏幕大于768px的時候，添加類名“.dl-horizontal”才具有水平定義列表效果。其實現主要方式：
1、將dt設置了一個左浮動，并且設置了一個寬度為160px
2、將dd設置一個margin-left的值為180px，達到水平的效果
3、當標題寬度超過160px時，將會顯示三個省略號
代碼塊(平時用到時候比較少):
在使用代碼時，用戶可以根據具體的需求來使用不同的類型：
1、<code>：一般是針對于單個單詞或單個句子的代碼
2、<pre>：一般是針對于多行代碼（也就是成塊的代碼）
3、<kbd>:一般是表示用戶要通過鍵盤輸入的內容
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>代碼</title> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> </head><body> code風格： <div>Bootstrap的代碼風格有三種：<code><code></code>、<code><pre></code>和<code><kbd></code></div> pre風格： <div> <pre> <ul> <li>...</li> <li>...</li> <li>...</li> </ul> </pre> </div> kbd風格： <div>請輸入<kbd>ctrl+c</kbd>來復制代碼，然后使用<kbd>ctrl+v</kbd>來粘貼代碼</div><!--下面是代碼任務部分--><p>請使用ctrl+x復制代碼，然后使用ctrl+shift+v將復制的代碼粘貼到需要的地方。</p></body> </html>
二.表格
html5表格、Bootstrap為表格不同的樣式風格提供了不同的類名，主要包括：
? ? ?.table：基礎表格
? ? ?.table-striped：斑馬線表格
? ? ?.table-bordered：帶邊框的表格
html表格框架？? ? ?.table-hover：鼠標懸停高亮的表格
? ? ?.table-condensed：緊湊型表格
? ? ?.table-responsive：響應式表格
其中既有Less版本和Sass版本兩種,詳情請參閱Bootstrap源碼.
html框架？這里著重說一下響應式表格,下面是框架介紹:
隨著各種手持設備的出現，要想讓你的Web頁面適合千羅萬像的設備瀏覽，響應式設計的呼聲越來越高。在Bootstrap中也為表格提供了響應式的效果，將其稱為響應式表格。
Bootstrap提供了一個容器，并且此容器設置類名“.table-responsive”,此容器就具有響應式效果，然后將<table class="table">置于這個容器當中，這樣表格也就具有響應式效果。
Bootstrap中響應式表格效果表現為：當你的瀏覽器可視區域小于768px時，表格底部會出現水平滾動條。當你的瀏覽器可視區域大于768px時，表格底部水平滾動條就會消失。示例如下：
<div class="table-responsive"> <table class="table table-bordered">… </table> </div>
表格部分改變相對較少感覺與平時用的表格樣式形式差不多所以沒有過多去寫這方面的理解.
下面介紹一下表單部分:
Bootstrap并未對其做太多的定制性效果設計，僅僅對表單內的fieldset、legend、label標簽進行了定制。如：
/*源碼請查閱bootstrap.css文件第1631行~第1652行*/
fieldset {
min-width: 0;
padding: 0;
margin: 0;
border: 0;
}
legend {
display: block;
width: 100%;
padding: 0;
margin-bottom: 20px;
font-size: 21px;
line-height: inherit;
color: #333;
border: 0;
border-bottom: 1px solid #e5e5e5;
}label {
display: inline-block;
margin-bottom: 5px;
font-weight: bold;
} bootstraptable可編輯表格。主要將這些元素的margin、padding和border等進行了細化設置。
當然表單除了這幾個元素之外，還有input、select、textarea等元素，在Bootstrap框架中，通過定制了一個類名`form-control`，也就是說，如果這幾個元素使用了類名“form-control”，將會實現一些設計上的定制效果。
1、寬度變成了100%
2、設置了一個淺灰色（#ccc）的邊框
bootstrap表單驗證框架，3、具有4px的圓角
4、設置陰影效果，并且元素得到焦點之時，陰影和邊框效果會有所變化
5、設置了placeholder的顏色為#999
三.表單
bootstrap table中文文檔？狀態的作用：
每一種狀態都能給用戶傳遞不同的信息，比如表單有焦點的狀態可以告訴用戶可以輸入或選擇東西，禁用狀態可以告訴用戶不可以輸入或選擇東西，還有就是表單控件驗證狀態，可以告訴用戶的操作是否正確等。那么在Bootstrap框架中的表單控件也具備這些狀態。
焦點狀態是通過偽類“:focus”來實現。Bootstrap框架中表單控件的焦點狀態刪除了outline的默認樣式，重新添加陰影效果。
表單框架中特意修改了一下獲取焦點之后的狀態,通過偽類:focus來實現的,同時很多空間也使用可這個偽類來實現效果在Bootstrap框架中，file、radio和checkbox控件在焦點狀態下的效果也與普通的input控件不太一樣，主要是因為Bootstrap對他們做了一些特殊處理：
input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; }
表單禁用狀態框架中同樣做了一些簡單的處理:
Bootstrap框架的表單控件的禁用狀態和普通的表單禁用狀態實現方法是一樣的，在相應的表單控件上添加屬性“disabled”。和其他表單的禁用狀態不同的是，Bootstrap框架做了一些樣式風格的處理
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { cursor: not-allowed; background-color: #eee; opacity: 1; }
禁用屬性也有例外的時候下面這個例子就是在整個標簽中禁用之后 部分控件未被禁用的例子:
在Bootstrap框架中，如果fieldset設置了disabled屬性，整個域都將處于被禁用狀態。整個禁用的域中，如果legend中有輸入框的話，這個輸入框是無法被禁用的。我們一起來驗證一下：
<form role="form"> <fieldset disabled> <legend><input type="text" class="form-control" placeholder="顯然我顏色變灰了，但是我沒被禁用，不信？單擊試一下" /></legend>… </fieldset> </form>
表單驗證狀態的時候也會出現很多種狀態這里框架提供了三種樣式:
1、.has-warning:警告狀態（黃色）
2、.has-error：錯誤狀態（紅色）
3、.has-success：成功狀態（綠色）
從效果可以看出，三種狀態下效果都是一樣的，只是顏色不一樣而以。
其他兩種狀態省略源碼不在此展示。
很多時候，在表單驗證的時候，不同的狀態會提供不同的 icon，比如成功是一個對號（√），錯誤是一個叉號（×）等。在Bootstrap框中也提供了這樣的效果。如果你想讓表單在對應的狀態下顯示 icon 出來，只需要在對應的狀態下添加類名“has-feedback”。請注意，此類名要與“has-error”、“has-warning”和“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="glyphiconglyphicon-ok form-control-feedback"></span> </div> <div class="form-group has-warning has-feedback">...... </div> <div class="form-group has-error has-feedback">...... </div> </form>
既然有輸入錯誤 當然葉少不了錯誤信息的提示:
平常在制作表單驗證時，要提供不同的提示信息。在Bootstrap框架中也提供了這樣的效果。使用了一個"help-block"樣式，將提示信息以塊狀顯示，并且顯示在控件底部。
舉個例子:
<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="help-block">你輸入的信息是正確的</span><span class="glyphiconglyphicon-ok form-control-feedback"></span> </div>… </form>
還有一種是現在在控件后面的 平行顯示的,在Bootstrap V2.x版本中還提供了一個行內提示信息，其使用了類名“help-inline”。一般讓提示信息顯示在控件的后面，也就是同一水平顯示。如果你想在BootstrapV3.x版本也有這樣的效果，你可以添加這段代碼
.help-inline{display:inline-block;padding-left:5px;color: #737373; }
?
