初學 Bootstrap 排版

ㅤㅤ發表於2018-10-22
boot

h1-h6標題

Bootstrap 預設了很多元素的樣式,我先研究一些常用的,順便把幾個常用屬性也一併用文字寫出來.

<h1>h1標題 font-size:36px margin-top:20px margin-bottom:10px</h1>
<h2>h2標題 font-size:30px margin-top:20px margin-bottom:10px</h2>
<h3>h3標題 font-size:24px margin-top:20px margin-bottom:10px</h3>
<h4>h4標題 font-size:18px margin-top:10px margin-bottom:10px</h4>
<h5>h5標題 font-size:14px margin-top:10px margin-bottom:10px</h5>
<h6>h6標題 font-size:12px margin-top:10px margin-bottom:10px</h6>

file

.h1-.h6類

Bootstrap還提供了 .h1 .h2 .h3 .h4 .h5 .h6 這幾個類,可以給內聯文字( <span> 標籤 <p> 標籤等等)賦予標題的樣式,感覺和上面是一樣的.

<p class="h1">擁有h1樣式的p標籤 font-size:36px margin-top:20px margin-bottom:10px</p>
<p class="h2">擁有h2樣式的p標籤 font-size:30px margin-top:20px margin-bottom:10px</p>
<p class="h3">擁有h3樣式的p標籤 font-size:24px margin-top:20px margin-bottom:10px</p>
<p class="h4">擁有h4樣式的p標籤 font-size:18px margin-top:10px margin-bottom:10px</p>
<p class="h5">擁有h5樣式的p標籤 font-size:14px margin-top:10px margin-bottom:10px</p>
<p class="h6">擁有h6樣式的p標籤 font-size:12px margin-top:10px margin-bottom:10px</p>

file

<small> 標籤和 .small 類

<small> 標籤和 .small 類可以用來標記副標題,結合上面的知識點,有四種組合方式.

<h3>組合1 h3標題<small>small標籤</small></h3>
<h3>組合2 h3標題<span class="small">.small類</span></h3>
<p class="h3">組合3 .h3類<small>small標籤</small></p>
<p class="h3">組合4 .h3類<span class="small">.small類</span></p>

file

<body> 標籤

Bootstrap對 <body> 做了樣式設定.

body {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
    background-color: #fff;
}

<p> 標籤

Bootstrap對 <p> 標籤做了樣式設定,注意 <p> 標籤是一個塊級標籤.

p {
    margin: 0 0 10px;
}

<p> 標籤與 .lead 類

在 <p> 標籤中,新增 .lead 類可以使文字突出顯示.

<p>普通的文字</p>
<p class="lead">加了lead類的文字</p>

file

<p> 標籤與對齊方式

在<p> 標籤中,使用 text-left text-center text-rigth text-justify 這些類實現文字的左對齊,居中對齊,右對齊,兩端對齊.

<p class="text-left">左對齊左對齊左對齊左對齊左對齊左對齊左對齊左對齊,瀏覽器不會調整字與字之間的間距</p>
            <p class="text-center">居中對齊</p>
            <p class="text-right">右對齊</p>
            <p class="text-justify">兩端對齊兩端對齊兩端對齊兩端對齊兩端對齊兩端對齊,瀏覽器會調整字與字之間的間距,使其平均分佈在一行中</p>

file
在上圖中,為了看到效果,把瀏覽器寬度縮到了404 px,注意看第一行最後一個字和倒數第二行最後一個字與網頁邊框的距離是不一樣的.

  • <mark> 標籤,用於使文字高亮顯示.
  • <del> 標籤,用於標記被刪除的文字.
  • <s> 標籤,用於標記無用的文字.
  • <ins> 標籤,用於標記額外插入的文字.
  • <u> 標籤,用於給文字新增下劃線.
  • <small> 標籤,上文提到過 <small> 或者 .small 類可以與 h* 或者 .h* 類的組合使用,可以用來標記副標題; <small> 標籤還可以用於內聯文字或者塊級文字,用來標記不需要強調的文字, <small> 標籤內的文字的字型大小為父容器的85%.
  • <strong> 標籤,透過加粗字型的方式標記需要強調的文字.
  • <em> 標籤,用斜體的方式標記需要強調的文字. 
    <p>普通文字,<mark> mark標籤 高亮文字</mark></p>
<p>普通文字,<del>del標籤 被刪除的文字</del></p>
<p>普通文字,<s>s標籤 無用的文字</s></p>
<p>普通文字,<ins>ins標籤 額外插入的文字</ins></p>
<p>普通文字,<u>u標籤 加了下劃線的文字</u></p>
<p>普通文字,<small>small標籤 不需要強調的文字</small></p>
<p>普通文字,<strong>strong標籤 加粗以強調文字</strong></p>
<p>普通文字,<em>em標籤 使斜體以強調文字</em></p>

    file

<abbr> 標籤用於標記縮略詞(PHP HTML等等),當滑鼠懸停在上面的時候,會顯示出完整的內容,完整的內容由title屬性指定.
如果為<abbr> 標籤新增.initialism 類,可以使字型變小一些,initialism翻譯為"詞首字母縮略詞".

<p>喜歡健身,喜歡彈吉他,更喜歡<abbr title="Hypertext Preprocessor">PHP</abbr></p>
<p>喜歡健身,喜歡彈吉他,更喜歡<abbr title="Hypertext Preprocessor" class="initialism">PHP</abbr></p>

file
上面這個圖是我用手機拍的,截圖截不下來,要注意第二行的PHP比第一行的字型要小一些

基本列表

有序列表

<ol>
  <li>...</li>
</ol>

無序列表

<ul>
  <li>...</li>
</ul>

無序列表和有序列表就不多說了.

無樣式列表

透過新增 .list-unstyled 類,可以移除列表的樣式.

<ul>
    <li>無序列表</li>
    <li>無序列表</li>
    <li>無序列表</li>
</ul>
<hr>
<ul class="list-unstyled">
    <li>無序列表</li>
    <li>無序列表</li>
    <li>無序列表</li>
</ul>

file

內聯列表

.list-inline 將列表的樣式設定成了內聯塊,並給 <li> 的左右內邊距各加了5 px.

<ul class="list-inline">
    <li>社群</li>
    <li>分類</li>
    <li>教程</li>
    <li>文件</li>
    <li>開源</li>
</ul>

file

帶有描述的列表

<dl>
    <dt>首頁</dt>
    <dd>公司首頁</dd>
    <dt>關於</dt>
    <dd>公司介紹</dd>
    <dt>幫助</dt>
    <dd>有問題請聯絡我們</dd>
</dl>

可以新增 .dl-horizontal 類使 <dl> 標籤內的短語和描述水平排列,值得注意當螢幕寬度為超小螢幕(0-767 px),依然是堆疊在一起,當螢幕寬度在為小螢幕及以上(大於等於768 px),才會變成水平排列.

<dl class="dl-horizontal">
    <dt>首頁</dt>
    <dd>公司首頁</dd>
    <dt>關於</dt>
    <dd>公司介紹</dd>
    <dt>幫助</dt>
    <dd>有問題請聯絡我們</dd>
</dl>

file
file

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章