1. 程式人生 > >bootstrap 學習筆記(2)---- 排版

bootstrap 學習筆記(2)---- 排版

-i 排列 分段函數 class 總結 capital src 設置 per

安裝和柵格系統學完,這篇寫的是排版
手冊中排版的目錄如下圖

技術分享

《標題,頁面主題,內聯文本元素,對齊,改變大小寫,縮略語,地址,引用,列表》
手冊中介紹那麽多,其實並不是所有的都要去看看。很多都是沒有必要的。
總結了幾個要看的地方:

  《標題,段落,mark標記,del刪除線,small小號字體,文字文本對齊,文本大小寫,無樣式列表,內聯列表,自定義列表(描述),水平排列列表》
現在對其做如下說明:
1、標題:
<h1 class="page-header">bootstrap前端框架</h1>
2、段落<p class="lead">fdsjfksdhfkfjfjsdkjfds;<del>agfdkjgh</del>dfjghfdghfdgds撒分<small>段函數返回的</small>是反攻倒算復合弓法的很多方v的v更改fdsjfksdhfkfjdsjksfjdkfjsdkjfds;agfdkjghdfjghfdghfdgds撒分段函數返回的是反攻倒算復合弓法的很多方v的v更改<p>
3、mark標記 :<mark>dsjksfjdk</mark>

技術分享
4、del 刪除線 <del>agfdkjgh</del>
技術分享

5、小號字體<small>段函數返回的</small>

6、文字對齊方式: 講了五種,3種有用 分別是左中右
<p class="text-left">dfsdhfdsjhfd</p>
<p class="text-center">dfsdhfdsjhfd</p>
<p class="text-right ">dfsdhfdsjhfd</p>

7、文本大小寫:
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

結果:

技術分享

8、無樣式列表:移除了默認的 list-style 樣式和左側外邊距的一組元素(只針對直接子元素)。這是針對直接子元素的,也就是說,你需要對所有嵌套的列表都添加這個類才能具有同樣的樣式。

<ul class="list-unstyled">
<li>sfsdgfd</li>
<li>fgf</li>
</ul>

9、內聯列表: 通過設置 display: inline-block; 並添加少量的內補(padding),將所有元素放置於同一行。
<ul class="list-inline">
<li>sfsdgfd</li>
<li>fgf</li>
<li>fgdfg</li>
<li>fghfdgdfhgt</li>
<li>skajdasjkhd</li>
</ul>
10、自定義列表,帶有描述的短語列表:
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>
11、水平排列列表:

<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>

內容原文內容挺多的,常用的這11項,記住就好了。

bootstrap 學習筆記(2)---- 排版