[佈局] bootstrap基本標籤總結

時間 2019-11-11

原文原文鏈接

文件頭：css

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

1.hbootstrap

<h>標籤和普通使用方法同樣。框架

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

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

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

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

2.p字體

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

強調內容設計

增大：.lead;3d

加粗：<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

一、寬度變成了100%

二、設置了一個淺灰色（#ccc）的邊框

三、具備4px的圓角

四、設置陰影效果，而且元素獲得焦點之時，陰影和邊框效果會有所變化

五、設置了placeholder的顏色爲#999

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

一、在<form>元素是使用類名「form-horizontal」。

二、配合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屬性

驗證狀態：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標籤來製做按鈕

button樣式

.btn

.btn-default

大小：

.btn-lg

.btn-sm

.btn-xs

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

禁用按鈕：添加類.disabled 或者添加屬性disabled=「disabled」

網格系統

分爲12列，能夠嵌套

 .col-md-offset-4 .col-md-4 .col-md-push-*  .col-md-pull-*

div class="container"> <div class="row"> <div class="col-md-8"> 個人裏面嵌套了一個網格 <div class="row"> <div class="col-md-6">col-md-6</div> <div class="col-md-6">col-md-6</div> </div> </div> <div class="col-md-4">col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-8"> <div class="row"> <div class="col-md-4">col-md-4</div> <div class="col-md-4">col-md-4</div> <div class="col-md-4">col-md-4</div> </div> </div> </div> </div>

1. [佈局] bootstrap基本標籤總結
2. bootstrap基本佈局
3. 實現 Bootstrap 基本佈局
4. {...formItemLayout} 標籤佈局
5. bootstrap基礎佈局
6. HTML基礎標籤總結
7. Bootstrap基本佈局（container, row, col-xs-4）
8. css佈局基礎總結
9. 標籤總結
10. html5標籤總結
更多相關文章...
• Git 標籤 - Git 教程
• SVN 標籤（tag） - SVN 教程
• Kotlin學習（一）基本語法
• Kotlin學習（二）基本類型

相關標籤/搜索

每日一句

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