[布局] bootstrap基本標籤總結

標籤：style   blog   http   ar   io   color   使用   sp   for   

檔案頭：

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>基礎資料表格</title><link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"></head>

bootstrap在reset.css檔案中設定margin為0，因此其他的標籤需要重新設計margin。

1.h

<h>標籤和普通使用方法一樣。

定義了.h1~.h6六個類名，樣式和標題樣式一樣。

副標題用<small>標籤指出，必須包含在h標籤內。

<h1>Bootstrap標題一</h1><div class="h1">Bootstrap標題一</div>

<h1>Bootstrap標題一<small>我是副標題</small></h1>

 

2.p

定義<body>的字型庫、字型大小、行高、顏色，<p>標籤繼承這些設定，單獨設定margin-bottom為10px，使用方法同普通方法。

強調內容

增大：.lead;

加粗：<strong>; <b>（設定font-weight: bold）

斜體：<em>;<i> （設定font-style: italic）

不變：<cite>

變小：<small>,.small

 

強調類（顏色）

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

 

文本對齊

（設定text-align：center、left、right、justify）

  ?   .text-left：靠左對齊

  ?   .text-center：置中對齊

  ?   .text-right：靠右對齊

  ?   .text-justify：左右對齊

 

3.列表（ul ol dl）

Bootstrap對於列表，只是在margin上做了一些調整

  margin-top: 0;  margin-bottom: 10px;

去除項目符號

.list-unstyled

（padding-left: 0;list-style: none;）

內聯列表，製作水平導航

.list-inline

代碼

<code> <pre> <kbd>

<pre class=“.pre-scrollable”> 設定最大代碼地區

4.表格

千萬注意，你的<table>元素中一定不能缺少類名table

  ?  .table：基礎資料表格

  ?  .table-striped：斑馬線表格

  ?  .table-bordered：帶邊框的表格

  ?  .table-hover：滑鼠移至上方高亮的表格

  ?  .table-condensed：緊湊型表格

  ?  .table-responsive：響應式表格

<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>

<tr>的不同行顏色

<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>

5.表單

<form role=”form”>

預設垂直顯示

用<div class=“form-group”>包圍控制項及其標籤

對input select textarea設定.form-control

1、寬度變成了100%

2、設定了一個淺灰色（#ccc）的邊框

3、具有4px的圓角

4、設定陰影製作效果，並且元素得到焦點之時，陰影和邊框效果會有所變化

5、設定了placeholder的顏色為#999

 

水平風格表單：標籤在左，控制項在右

1、在<form>元素是使用類名“form-horizontal”。

2、配合Bootstrap架構的網格系統。（網格布局會在以後的章節中詳細講解）

 

內聯表單 ：控制項一行顯示

在<form>元素中添加類名“form-inline”

 

表單控制項

select：<select multiple class="form-control"> 選擇多個

textarea： <textarea class="form-control" rows="3"></textarea>

radio，checkbox：div包著label包著input

<div class="checkbox">    <label>      <input type="checkbox" value="">      記住密碼    </label>  </div>

radio，checkbox：水平排列

div（class=”form-group”）包著label（class=”checkbox-inline”or“radio-inline”）包著input

禁用控制項：在控制項上添加disabled屬性

      <input class="input-lg" id="disabledInput" type="text" placeholder="表單已被禁用，不可輸入" disabled>

驗證狀態：form-group容器添加has-success等類;若想label同步變色需要在label上加.control-label;顯示icon需要在form-group加.has-feedback，最後加一個span存放icon

表單提示資訊：

在form-group容器後加一個span，添加類名.help-block

button：四種方式，bootstrap用button實現，建議用button和a標籤來製作按鈕

<input type="button">

<input type="reset">

<input type="submit">

<button></button>

button樣式

.btn

.btn-default

大小：

.btn-lg

.btn-sm

.btn-xs

塊狀按鈕：按鈕充滿整個容器，沒有padding和margin .btn-block

禁用按鈕：添加類.disabled 或者添加屬性disabled=“disabled”

[布局] bootstrap基本標籤總結