01 排版
//標題
h1~h6? class屬性對應h1~h6
?
//副標題? <small>標簽
<h1>Bootstrap標題一<small>我是副標題</small></h1>
?
//強調內容 class屬性對應lead
<p class="lead">這部分內容需要特別的強調，我和別人長得不一樣</p>
?
//粗體 <strong>標簽
<p>我在學習<strong>Bootstrap</strong>，我要掌握<strong>Bootstrap</strong>的所有知識。</p>
?
//斜體 <em> <i>
<p>我在慕課網上跟<em>大漠</em>一起學習<i>Bootstrap</i>的使用。我一定要學會<i>Bootstrap</i>。</p>
?
//加顏色強調內容? calss對應下面的值對應不同的顏色
.text-muted：提示，使用淺灰色（#999）
.text-primary：主要，使用藍色（#428bca）
.text-success：成功，使用淺綠色(#3c763d)
.text-info：通知信息，使用淺藍色（#31708f）
.text-warning：警告，使用黃色（#8a6d3b）
.text-danger：危險，使用褐色（#a94442）
?
//文本對齊方式?? class對應下面的值
.text-left? 左對齊
.text-center 居中對齊
.text-right? 右對齊
.text-justify 兩端對齊
?
//普通列表
有序列表:
<ol>
???? ?<li></li>
<li></li>
<li></li>
</ol>
無序列表：
<ul>
<li></li>
????? <li></li>
???? <li></li>
</ul>
?
//不帶符號的無序列表? 添加類名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>
??? <li>jQuery</li>
??? <li>PHP</li>
</ul>
?
//定義列表? <dl> 是一個容器? <dt>是標題? <dd> 是內容
<dl>
??? <dt>W3cplus</dt>
??? <dd>一個致力于推廣國內前端行業的技術博客</dd>
??? <dt>慕課網</dt>
??? <dd>一個真心在做教育的網站</dd>
</dl>
顯示效果如下：
W3cplus
一個致力于推廣國內前端行業的技術博客
慕課網
一個真心在做教育的網站
?
//水平定義列表 添加類名dl-horizontal 可以是列表水平顯示
<dl class="dl-horizontal">
??? <dt>W3cplus</dt>
??? <dd>一個致力于推廣國內前端行業的技術博客。它以探索為己任，不斷活躍在行業技術最前沿，努力提供高質量前端技術博文</dd>
??? <dt>慕課網</dt>
??? <dd>一個專業的，真心實意在做培訓的網站</dd>
</dl>
顯示結果如下：
W3cplus ?一個致力于推廣國內前端行業的技術博客。它以探索為己任，不斷活躍在行業技術最前沿，努力提供高質量前端技術博文
慕課網? 一個專業的，真心實意在做培訓的網站
?
//代碼顯示
<code> </code> 一般是針對于單個單詞或單個句子的代碼
<pre> </pre> 一般是針對于多行代碼(也就是成塊的代碼)
<kbd> </kbd> 一般是表示用戶要通過鍵盤輸入的內容
?
//如果代碼高度超出340px，就會在Y軸出現滾動條? 添加類名pre-scrollable
<pre class="pre-scrollable">
<ol>
??? <li>....</li>
??? <li>....</li>
??? <li>....</li>
??? <li>....</li>
??? <li>....</li>
??? <li>....</li>
??? <li>....</li>
??? <li>....</li>
??? <li>....</li>
??? <li>....</li>
??? <li>....</li>
??? <li>....</li>
??? <li>....</li>
??? <li>....</li>
</ol>
</pre>
?
//表格
.table 基礎表格
.table-striped 斑馬線表格
.table-bordered 帶邊框的表格
.table-hover 鼠標懸停高亮的表格
.table-condensed 緊湊型表格
.table-responsive 響應式表格
?
//tr顏色? 對應的類名 取不同的顏色
?
//基礎表格 table
作用如下：
給表格設置了margin-bottom:20px以及設置單元內距
在thead底部設置了一個2px的淺灰實線
每個單元格頂部設置了一個1px的淺灰實線
?
//斑馬線表格 table table-striped
?
//帶邊框的表格? table table-bordered
//鼠標懸浮高亮 table table-striped table-bordered table-hover
?
//緊湊型表格 table table-condensed
?
//響應式表格 table-responsive
要為table加一個容器
效果：當你的瀏覽器可視區域小于768px時,表格底部會出現水平滾動條。當你的瀏覽器可視區域大于768px時，表格底部水平滾動條就會消失。
?<div class="table-responsive">
?? <table class="table table-bordered">
?? <thead>
???? <tr>
?????? <th>表格標題</th>
?????? <th>表格標題</th>
?????? <th>表格標題</th>
???? </tr>
?? </thead>
?? <tbody>
???? <tr>
?????? <td>表格單元格</td>
?????? <td>表格單元格</td>
?????? <td>表格單元格</td>
???? </tr>
???? <tr>
?????? <td>表格單元格</td>
?????? <td>表格單元格</td>
?????? <td>表格單元格</td>
???? </tr>
???? <tr>
?????? <td>表格單元格</td>
?????? <td>表格單元格</td>
?????? <td>表格單元格</td>
???? </tr>
???? <tr>
?????? <td>表格單元格</td>
?????? <td>表格單元格</td>
?????? <td>表格單元格</td>
???? </tr>
?? </tbody>
?</table>
</div>
?
轉載于:https://www.cnblogs.com/YyuTtian/p/4532401.html
與50位技術專家面對面20年技術見證，附贈技術全景圖總結
- 上一篇： Spring MVC之Dispatche
- 下一篇： CUDA ---- device管理