1. 程式人生 > >Boostrap入門+樣式學習--貳--(慕課網大漠《玩轉bootstrap》[基礎])

Boostrap入門+樣式學習--貳--(慕課網大漠《玩轉bootstrap》[基礎])

1. 標題樣式
除了有標籤 h1~h6 之外,bootstrap還提供了對應的六個類名:.h1~.h6

  • 重新設定了margin-top和margin-bottom的值, h1~h3重置後的值都是20px;h4~h6重置後的值都是10px。
  • 所有標題的行高都是1.1(也就是font-size的1.1倍),而且文字顏色和字型都繼承父元素的顏色和字型。
  • 固定不同級別標題字型大小,h1=36px,h2=30px,h3=24px,h4=18px,h5=14px和h6=12px。

2.副標題 small標籤

  • 行高都是1,而且font-weight設定了normal變成了常規效果(不加粗),同時顏色被設定為灰色(#999)
  • 內的文字字型在h1~h3內,其大小都設定為當前字號的65%;而在h4~h6內的字號都設定為當前字號的75%

3.段落P強調內容 lead類樣式
如果想讓一個段落p突出顯示,可以通過新增類名“.lead”實現,其作用就是增大文字字號,加粗文字,而且對行高和margin也做相應的處理。
用法:

<p>我是普通文字,我的樣子長成這樣我是普通文字,我的樣子長成這樣我是普通文字,</p>
<p class="lead">我是特意要突出的文字,我的樣子成這樣。我是特意要突出的文字,我的樣子長成這樣。</p>

4.粗體
在Bootstrap中,可以使用<b>和<strong>

標籤讓文字直接加粗。

5. 斜體
斜體類似於加粗一樣,除了可以給元素設定樣式font-style值為italic實現之外,在Bootstrap中還可以通過使用標籤<em>或<i>來實現。

6.強調相關的類
在Bootstrap中除了使用標籤<strong>、<em>等說明正文某些字詞、句子的重要性,Bootstrap還定義了一套類名,這裡稱其為強調類名(類似前面說的“.lead”),這些強調類都是通過顏色來表示強調,具本說明如下:


    .text-muted:提示,使用淺灰色(#999)
    .text-primary:主要,使用藍色(#428bca)
.text-success:成功,使用淺綠色(#3c763d) .text-info:通知資訊,使用淺藍色(#31708f) .text-warning:警告,使用黃色(#8a6d3b) .text-danger:危險,使用褐色(#a94442)

7.文字對齊風格

 .text-left:左對齊
 .text-center:居中對齊
 .text-right:右對齊
 .text-justify:兩端對齊

8.列表

  • 去點列表:通過給無序列表新增一個類名“.list-unstyled”,這樣就可以去除預設的列表樣式的風格。
  • 內聯列表:通過新增類名“.list-inline”來實現內聯列表,簡單點說就是把垂直列表換成水平列表,而且去掉專案符號(編號),保持水平顯示。也可以說內聯列表就是為製作水平導航而生。
  • 水平定義列表:Bootstrap可以給
    新增類名“.dl-horizontal”給定義列表實現水平顯示效果。

9.程式碼相關

  • 使用<code></code>來顯示單行內聯程式碼
  • 使用<pre></pre>來顯示多行塊程式碼
  • 使用<kbd></kbd>來顯示使用者輸入程式碼
  • Y軸出現滾動條:在pre標籤上新增類名“.pre-scrollable”

10.表格

.table:基礎表格
.table-striped:斑馬線表格
.table-bordered:帶邊框的表格
.table-hover:滑鼠懸停高亮的表格
.table-condensed:緊湊型表格
.table-responsive:響應式表格

10-1.表格行的類

類名描述
.active 表示當前活動的資訊
.success 表示成功或者正確的行為
.info 表示中立的資訊或行為
.warning 表示警告,需要特別注意
.dangerer 表示危險或者可能是錯誤的行為

10-2.基礎表格 注意

  • 在Bootstrap中,對於基礎表格是通過類名“.table”來控制。如果在元素中不新增任何類名,表格是無任何樣式效果的。

10-3.響應式表格

  • 在Bootstrap中也為表格提供了響應式的效果,將其稱為響應式表格。
    Bootstrap提供了一個容器,並且此容器設定類名“.table-responsive”,此容器就具有響應式效果,然後將置於這個容器當中,這樣表格也就具有響應式效果。
    Bootstrap中響應式表格效果表現為:當你的瀏覽器可視區域小於768px時,表格底部會出現水平滾動條。當你的瀏覽器可視區域大於768px時,表格底部水平滾動條就會消失。