Bootstrap學習筆記(一) 排版

時間 2019-11-14

原文原文鏈接

Bootsrap是一款優秀的前端開發框架，我從慕課網上開始學習Bootstrap，如下我學習過程當中的一些筆記及代碼。css

首先學習排版:html

從Bootstrap網站下載Bootstrap3中文文檔（V3.3.5），解壓到本地。因爲幕課上排版系列課程主要用的是Bootstrap的Css，因此下載解壓，將其中的bootstrap.min.css複製粘貼到我保存html文件裏的一個styles文件夾中，此文件夾專用來保存css文件。前端

編輯器使用 sublime text3。bootstrap

而後再html文件的head裏插入以下代碼便可使用了:瀏覽器

<link rel="stylesheet" href="styles/bootstrap.min.css">

2-1標題 框架

　　和html同樣，bootstrap使用標籤<h1>到<h6>,在bootstrap中非標題元素也可使用:編輯器

<h1>Bootstrap標題一</h1>
<h2>Bootstrap標題二</h2>
<h3>Bootstrap標題三</h3>
<h4>Bootstrap標題四</h4>
<h5>Bootstrap標題五</h5>
<h6>Bootstrap標題六</h6>

<!--Bootstrap中讓非標題元素和標題使用相同的樣式-->
<div class="h1">Bootstrap標題一</div>
<div class="h2">Bootstrap標題二</div>
<div class="h3">Bootstrap標題三</div>
<div class="h4">Bootstrap標題四</div>
<div class="h5">Bootstrap標題五</div>
<div class="h6">Bootstrap標題六</div>

2-2標題（2）學習

　　bootstrap中使用<small>標籤製做副標題。網站

2-3段落spa

　　使用標籤<p>

2-4強調內容

　　可添加類名".lead"實現：

 <p class="lead">我是特地要突出的文本。</p>

2-5粗體

<p>我在學習<strong>Bootstrap</strong></p>

2-6斜體

<i> 標籤顯示斜體文本效果

<em> 標籤告訴瀏覽器把其中的文本表示爲強調的內容。對於全部瀏覽器來講，這意味着要把這段文字用斜體來顯示。

<p>我在慕課網上跟<em>大漠</em>一塊兒學習<i>Bootstrap</i>的使用。我必定要學會<i>Bootstrap</i>。</p>

2-7強調相關的類

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

<div class="text-muted">.text-muted 效果</div>
<div class="text-primary">.text-primary效果</div>
<div class="text-success">.text-success效果</div>
<div class="text-info">.text-info效果</div>
<div class="text-warning">.text-warning效果</div>
<div class="text-danger">.text-danger效果</div>

　　顯示效果以下:

2-8文本對齊

　　bootstrap中text-left：左對齊，text-center：居中對齊，text-right：右對齊,text-justify：兩端對齊。

<p class="text-left">我居左</p>
<p class="text-center">我居中</p>
<p class="text-right">我居右</p>
<p class="text-justify"></p>

2-9列表

　　<ul>無序

　　<ol>有序

　　定義列表:

<dl>
    <dt>定義列表標題</dt>
    <dd>定義列表信息1</dd>
    <dd>定義列表信息2</dd>
</dl>

2-10列表--無序列表、有序列表

　　<ul>無序

　　<ol>有序

<h5>普通列表</h5>
<ul>
    <li>列表項目</li>
    <li>列表項目</li>
    <li>列表項目</li>
    <li>列表項目</li>
    <li>列表項目</li>
</ul>
<h5>有序列表</h5>
<ol>
      <li>項目列表一</li>
      <li>項目列表二</li>
      <li>項目列表三</li>
</ol>

2-11去點列表

　　給列表添加.list-unstyled，能夠去除默認列表樣式風格。

        <ol>
            <li>有序項目列表一</li>
            <li>有序項目列表二</li>
                <ol class="list-unstyled">
                    <li>有序二級列表項目列表一</li>
                    <li>有序二級列表項目列表二</li>
                    <ul>
                        <li>無序三級項目列表一</li>
                        <li>無序三級列表項目二</li>
                        <ul class="list-unstyled">
                            <li>無序四級項目列表一</li>
                            <li>無序四級列表項目二</li>
                        </ul>
                        <li>無序三級項目列表三</li>
                    </ul>
                    <li>有序二級項目列表三</li>
                </ol>
            <li>有序項目列表三</li>
        </ol>

2-12列表--內聯列表

　　經過添加類名「.list-inline」來實現內聯列表

<ul class="list-inline">
    <li>W3cplus</li>
    <li>Blog</li>
    <li>CSS3</li>
    <li>jQuery</li>
    <li>PHP</li>
</ul>

2-13定義列表

　　2-9已寫

2-14列表--水平定義列表

　　Bootstrap能夠給<dl>添加類名「.dl-horizontal」給定義列表實現水平顯示效果。

<dl class="dl-horizontal">
    <dt>W3cplus</dt>
    <dd>一個致力於推廣國內前端行業的技術博客。它以探索爲己任，不斷活躍在行業技術最前沿，努力提供高質量前端技術博文
　　</dd>
</dl>

2-15代碼（一）

　　在Bootstrap主要提供了三種代碼風格:
　　一、使用<code></code>來顯示單行內聯代碼
　　二、使用<pre></pre>來顯示多行塊代碼
　　三、使用<kbd></kbd>來顯示用戶輸入代碼

　　在使用代碼時，用戶能夠根據具體的需求來使用不一樣的類型：
　　一、<code>：通常是針對於單個單詞或單個句子的代碼
　　二、<pre>：通常是針對於多行代碼（也就是成塊的代碼）
　　三、<kbd>:通常是表示用戶要經過鍵盤輸入的內容

<div>
    <code>&lt;code&gt;</code>
</div>
<div>
    <pre>
          &lt;ul&gt;
          &lt;li&gt;...&lt;/li&gt;
          &lt;li&gt;...&lt;/li&gt;
          &lt;li&gt;...&lt;/li&gt;
          &lt;/ul&gt;
    </pre>
</div>
<div>
       請輸入<kbd>ctrl+c</kbd>來複制代碼，而後使用<kbd>ctrl+v</kbd>來粘貼代碼
</div>

2-16代碼（二）

　　bootstrap中在pre標籤上添加類名「.pre-scrollable」，就能夠控制代碼塊區域最大高度爲340px，一旦超出這個高度，就會在Y軸出現滾動條。

2-17表格

　　Bootstrap爲表格不一樣的樣式風格提供了不一樣的類名，主要包括：

　　.table：基礎表格

　　.table-striped：斑馬線表格

　　.table-bordered：帶邊框的表格

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

　　 .table-condensed：緊湊型表格

　　 .table-responsive：響應式表格

2-18表格--表格行的類

　　Bootstrap還爲表格的行元素<tr>提供了五種不一樣的類名，每種類名控制了行的不一樣背景顏色

<table class="table table-bordered">
  <thead>
    <tr>
      <th>類名</th>
      <th>描述</th>
    </tr>
  </thead>
  <tbody>
    <tr class="active">
      <td>.active</td>
      <td>表示當前活動的信息</td>
    </tr>
    <tr class="success">
      <td>.success</td>
      <td>表示成功或者正確的行爲</td>
    </tr>
    <tr class="info">
      <td>.info</td>
      <td>表示中立的信息或行爲</td>
    </tr>
    <tr class="warning">
      <td>.warning</td>
      <td>表示警告，須要特別注意</td>
    </tr>
    <tr class="danger">
      <td>.danger</td>
      <td>表示危險或者多是錯誤的行爲</td>
    </tr>
  </tbody>
</table>

　　顯示效果以下:

2-19表格--基礎表格

　　在Bootstrap中，對於基礎表格是經過類名「.table」來控制

<table class="table">
   <thead>
     <tr>
       <th>表格標題</th>
       <th>表格標題</th>
       <th>表格標題</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>表格單元格</td>
       <td>表格單元格</td>
       <td>表格單元格</td>
     </tr>
   </tbody>
 </table>

2-20表格--斑馬線表格

　　讓表格帶有背景條紋效果，在Bootstrap中，只須要在<table class="table">的基礎上增長類名「.table-striped」

<table class="table table-striped">
   <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>
   </tbody>
 </table>

2-21表格--帶邊框的表格

　　Bootstrap中帶邊框的表格使用方法和斑馬線表格的使用方法相似，只須要在基礎表格<table class="table">基礎上添加一個「.table-bordered」類名便可：

<table class="table">
   <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>
   </tbody>
 </table>

2-22表格--鼠標懸浮高亮的表格

　　當鼠標懸停在表格的行上面有一個高亮的背景色，這樣的表格讓人看起來就是舒服，時刻告訴用戶正在閱讀表格哪一行的數據。Bootstrap提供了一個「.table-hover」類名來實實現這種表格效果。僅須要<table class="table">元素上添加類名「table-hover」便可：　　

<table class="table table-striped table-bordered table-hover">
   <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>
   </tbody>

2-23表格--緊湊型表格

　　緊湊型:單元格沒內距或者內距較其餘表格的內距更小,在Bootstrap中，經過類名「table-condensed」重置了單元格內距值。

<table class="table">
   <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>
   </tbody>
 </table>

2-24表格--響應式表格

　　Bootstrap提供了一個容器，而且此容器設置類名「.table-responsive」,此容器就具備響應式效果，而後將<table class="table">置於這個容器當中，這樣表格也就具備響應式效果。

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>
   </tbody>
 </table>
</div>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。