,,

bootstrap布局基本標(biāo)簽總結(jié)

當(dāng)前位置：點(diǎn)晴教程→知識管理交流 →『技術(shù)文檔交流』

freeflydom

2024年7月19日 16:37 本文熱度 1492

文件頭：

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

bootstrap在reset.css文件中設(shè)置margin為0，因此其他的標(biāo)簽需要重新設(shè)計(jì)margin。

1.h

<h>標(biāo)簽和普通使用方法一樣。

定義了.h1~.h6六個類名，樣式和標(biāo)題樣式一樣。

副標(biāo)題用<small>標(biāo)簽指出，必須包含在h標(biāo)簽內(nèi)。

<h1>Bootstrap標(biāo)題一</h1>

<div class="h1">Bootstrap標(biāo)題一</div>

<h1>Bootstrap標(biāo)題一<small>我是副標(biāo)題</small></h1>

2.p

定義<body>的字體庫、字號、行高、顏色，<p>標(biāo)簽繼承這些設(shè)置，單獨(dú)設(shè)置margin-bottom為10px，使用方法同普通方法。

強(qiáng)調(diào)內(nèi)容

增大：.lead;

加粗：<strong>; <b>（設(shè)置font-weight: bold）

斜體：<em>;<i> （設(shè)置font-style: italic）

不變：<cite>

變小：<small>,.small

強(qiáng)調(diào)類（顏色）

.text-muted：提示，使用淺灰色（#999）

.text-primary：主要，使用藍(lán)色（#428bca）

.text-success：成功，使用淺綠色(#3c763d)

.text-info：通知信息，使用淺藍(lán)色（#31708f）

.text-warning：警告，使用黃色（#8a6d3b）

.text-danger：危險(xiǎn)，使用褐色（##a94442）

文本對齊

（設(shè)置text-align：center、left、right、justify）

.text-left：左對齊

.text-center：居中對齊

.text-right：右對齊

.text-justify：兩端對齊

3.列表（ul ol dl）

Bootstrap對于列表，只是在margin上做了一些調(diào)整

margin-top: 0;

margin-bottom: 10px;

去除項(xiàng)目符號

.list-unstyled

（padding-left: 0;

list-style: none;）

內(nèi)聯(lián)列表，制作水平導(dǎo)航

.list-inline

代碼

<pre class=“.pre-scrollable”> 設(shè)置最大代碼區(qū)域

4.表格

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

.table：基礎(chǔ)表格

.table-striped：斑馬線表格

.table-bordered：帶邊框的表格

.table-hover：鼠標(biāo)懸停高亮的表格

.table-condensed：緊湊型表格

.table-responsive：響應(yīng)式表格

<table class="table">
   <thead>
     <tr>
       <th>表格標(biāo)題</th>
       <th>表格標(biāo)題</th>
       <th>表格標(biāo)題</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>表示當(dāng)前活動的信息</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>表示危險(xiǎn)或者可能是錯誤的行為</td>
    </tr>
  </tbody>

5.表單

默認(rèn)垂直顯示

用<div class=“form-group”>包圍控件及其標(biāo)簽

對input select textarea設(shè)置.form-control

1、寬度變成了100%

2、設(shè)置了一個淺灰色（#ccc）的邊框

3、具有4px的圓角

4、設(shè)置陰影效果，并且元素得到焦點(diǎn)之時，陰影和邊框效果會有所變化

5、設(shè)置了placeholder的顏色為#999

水平風(fēng)格表單：標(biāo)簽在左，控件在右

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

2、配合Bootstrap框架的網(wǎng)格系統(tǒng)。（網(wǎng)格布局會在以后的章節(jié)中詳細(xì)講解）

內(nèi)聯(lián)表單：控件一行顯示

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

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

表單提示信息：在form-group容器后加一個span，添加類名.help-block

button：四種方式，bootstrap用button實(shí)現(xiàn)，建議用button和a標(biāo)簽來制作按鈕

button樣式

.btn

.btn-default

大?。?/p>

.btn-lg

.btn-sm

.btn-xs

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

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

網(wǎng)格系統(tǒng)

分為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">
      我的里面嵌套了一個網(wǎng)格
      <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>