Bootstrap 使用

bootstrap模板爲使IE六、7、8版本（IE9如下版本）瀏覽器兼容html5新增的標籤，引入下面代碼文件便可。 <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
同理爲使IE六、7、8版本瀏覽器兼容css3樣式，引入下面代碼： <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>

【省略細節，糾結細節的話就學不了整個複雜系統，何況現代前端開發不是僅僅就一個Bootstrap】【不學js插件只學樣式】【關注使用有問題再深究】

 

Refs 

 

第一步 【全局樣式 normalize.css】抹除瀏覽器差別 

 

…………………………………………………………………………………………………………

【標題】.h1~.h6 類名 和 標籤 <h1> 相同效果。

【副標題】  <h1><small>

【強調】.lead 

【粗體】<b> | <strong>

【斜體】<i> | <em>

【有顏色的強調】

 

• .text-muted：提示，使用淺灰色（#999）
• .text-primary：主要，使用藍色（#428bca）
• .text-success：成功，使用淺綠色(#3c763d)
• .text-info：通知信息，使用淺藍色（#31708f）
• .text-warning：警告，使用黃色（#8a6d3b）
• .text-danger：危險，使用褐色（#a94442）

【文本對齊】

.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
.text-justify {//中文慎用 以及 瀏覽器解析不一致。
text-align: justify;
}

………………………………………………………………………………

【列表】

去編號 去點 列表

 

.list-unstyled {
padding-left: 0;
list-style: none;
}

 

去編號 改內聯塊級

 

.list-inline {
padding-left: 0;
margin-left: -5px;
list-style: none;
}
.list-inline > li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}

【水平 定義列表】

dl-horizontal 媒體查詢 寬度是768px以上奏效。

 

【代碼】

單行 <code>

多行 <pre>   +  滾動條 .pre-scrollable

用戶鍵盤輸入 <kbd>

 

【表格】

  ☑  .table：基礎表格

  ☑  .table-striped：斑馬線表格

  ☑  .table-bordered：帶邊框的表格

  ☑  .table-hover：鼠標懸停高亮的表格

  ☑  .table-condensed：緊湊型表格

  ☑  .table-responsive：響應式表格

 

修飾 行

active 

info

success

warning

danger

 

………………………………………………………………………………

【表單】Fucking importance

【經常使用樣式】.form-control

一、寬度變成了100%

二、設置了一個淺灰色（#ccc）的邊框

三、具備4px的圓角

四、設置陰影效果，而且【元素獲得焦點】之時，陰影和邊框效果會有所變化

五、設置了placeholder的顏色爲#999

 

【html 5 新增】role="form"  告訴設備這一塊扮演的是表單角色。

【對錶單 分組】<div class="form-group" 這是慣性作法，爲了咱們想要方便變換樣式，例如基本表單 => 內聯表單

 

【水平表單】form-horizontal 應用這個類會改變form-group樣式

【內聯表單】form-inline

內聯表單的 label 經常設置 sr-only 類名 ，sr 是 屏幕閱讀器的縮寫，意思是照顧不方便的人士。

 

【下拉框】<select><option>

　　【多行模式】<select multiple><option>

【文本區域】<textarea rows="3"> 若是應用.form-control就不用再設置cols屬性，由於已經100%顯示。

【單選框和複選框在Bootstrap要跟包餃子同樣使用】

<div class="checkbox">   <!-- 這裏無所謂 checkbox 也能夠是 form-group 只要包餃子。 -->

<label>

　　<input type="checkbox"> 記住密碼

</label>

</div>

【水平單選、複選框】label應用.radio-inline類名或者checkbox-inline便可。

 

【按鈕】btn

【有顏色的按鈕】btn-default btn-primary btn-success btn-info btn-warning btn-danger btn-link

【爲保證各大瀏覽器解析建議使用】<button>和 <a> 

【按鈕大小】btn-xs btn-sm btn-lg 

【塊級按鈕 佔滿容器】btn-block

【有狀態的按鈕】活動狀態有三種 :hover :active :focus ，另外就是禁用 添加disabled屬性便可。

………………………………………………………………………………………………………………

【表單控件大小控制】Bootstrap 提供了 .input-sm .input-sg 對控件高度進行控制。

要對高度進行控制，使用 網格系統 提供的 .col-xx-<number>。

【表單控件焦點狀態】.form-control

【表單控件禁用狀態】加屬性 disable

　　【禁用整個表單】<fieldset disable></fieldset> 

 　　　【特別的fieldset disable管不到灰暗帶】<legend><input>，不過把 submit 關掉也是白搭。

【表單控件驗證狀態】+【表單控件提示】

 <div class="form-group has-error has-feedback">
    
    <label class="control-label" for="email">email地址</label>
    
    <input type="text" class="form-control" id="email" placeholder="在這裏輸入你的email地址">
　　
　　<span class="helpblock">你輸入的信息是錯誤的</span>    

    <span class="glyphicon glyphicon-remove form-control-feedback"></span>  
</div>

 

 

……………………………………………………………………………………………………………………………………………………

【圖像】<img src="https://placehold.com/140x140" alt=...

一、img-responsive：響應式圖片，主要針對於響應式設計
二、img-rounded：圓角圖片
三、img-circle：圓形圖片
四、img-thumbnail：縮略圖片

 

【圖標】原理是經過@font-face加載字體

使用 http://glyphicons.com/ 搜索

經常使用 http://www.bootcss.com/p/font-awesome/

…………………………………………………………………………………………………………………………………………………………

【網格系統】 Fucking Importance

 

響應式的原理 【定義容器大小】+【事先平均分12份 / 24份 / 32份】+ 【調整下內外邊距配合媒體查詢】

 

boilerplate code

<div class="container">
<div class="row">
  <div class="col-md-4"></div>
  <div class="col-md-8"></div>

 

 

【列組合】調整 float 和 width 百分比能夠自由組合出效果。

【列偏移】col-md-offset-xx

 

<div class="row">
    <div class="col-md-2">.col-md-2</div>
    <div class="col-md-2 col-md-offset-1">.col-md-2列向右移動1列的間距</div>
    <div class="col-md-2 col-md-offset-1">.col-md-2列向右移動1列的間距</div>
    <div class="col-md-3 col-md-offset-1">.col-md-3列向右移動1列的間距</div>
</div>

 

【列排序】向右推 col-md-push-xx ，向左拉 col-md-pull-xx

………………………………………………………………………………………………………………………………………………………………