閱讀(15k) 書簽贊(0) 我要糾錯

Bootstrap的基礎(chǔ)標(biāo)簽

2019-08-14 17:48 更新

文件頭：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>基礎(chǔ)表格</title>
<link rel="stylesheet"  rel="external nofollow" target="_blank" >
</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>

變?。?lt;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

代碼

<code> <pre> <kbd>
<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屬性

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

bootsstrap標(biāo)簽

大小：

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

縮略圖

<div class="container">
    <div class="row">
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img src="http://img.mukewang.com/5434eba100014fe906000338.png" rel="external nofollow"  style="height: 180px; width: 100%; display: block;" alt="">
            </a>
        </div>
    …
    </div>
</div>

還可以添加標(biāo)題、說明、按鈕，添加caption容器。

<div class="container">
    <div class="row">
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img src="http://a.hiphotos.baidu.com/image/w%3D400/sign=c56d7638b0b7d0a27bc9059dfbee760d/3b292df5e0fe9925d46873da36a85edf8cb171d7.jpg" rel="external nofollow"  style="height: 180px; width: 100%; display: block;" alt="">
            </a>
            <div class="caption">
                <h3>Bootstrap框架系列教程</h3>
                <p>Bootstrap框架是一個優(yōu)秀的前端框，就算您是一位后端程序員或者你是一位不懂設(shè)計(jì)的前端人員，你也能依賴于Bootstrap制作做優(yōu)美的網(wǎng)站...</p>
                <p>
                    <a href="##" class="btn btn-primary">開始學(xué)習(xí)</a>
                    <a href="##" class="btn btn-info">正在學(xué)習(xí)</a>
                </p>
            </div>
        </div>
    …
    </div>
</div>

警示框

1、成功警示框：告訴用用戶操作成功，在“alert”樣式基礎(chǔ)上追加“alert-success”樣式，具體呈現(xiàn)的是背景、邊框和文本都是綠色；

2、信息警示框：給用戶提供提示信息，在“alert”樣式基礎(chǔ)上追加“alert-info”樣式，具體呈現(xiàn)的是背景、邊框和文本都是淺藍(lán)色；

3、警告警示框：提示用戶小心操作（提供警告信息），在“alert”樣式基礎(chǔ)上追加“alert-warning”樣式，具體呈現(xiàn)的是背景、邊框、文本都是淺黃色；

4、錯誤警示框：提示用戶操作錯誤，在“alert”樣式基礎(chǔ)上追加“alert-danger”樣式，具體呈現(xiàn)的是背景、邊框和文本都是淺紅色。

<div class="alert alert-success" role="alert">恭喜您操作成功！</div>

進(jìn)度條

提供了兩個容器，外容器使用“progress”樣式，子容器使用“progress-bar”樣式。其中progress用來設(shè)置進(jìn)度條的容器樣式，而progress-bar用于限制進(jìn)度條的進(jìn)度。

<div class="progress">
       <div class="progress-bar" style="width:40%"></div>
</div>

媒體對象

<div class="media">
    <a class="pull-left" href="#">
        <img class="media-object" src="http://img.mukewang.com/52e1d29d000161fe06000338-300-170.jpg" rel="external nofollow"  alt="...">
    </a>
    <div class="media-body">
        <h4 class="media-heading">系列：十天精通CSS3</h4>
        <div>全方位深刻詳解CSS3模塊知識，經(jīng)典案例分析，代碼同步調(diào)試，讓網(wǎng)頁穿上絢麗裝備！</div>
    </div>
</div>

列表組

<ul class="list-group">
    <li class="list-group-item">揭開CSS3的面紗</li>
    <li class="list-group-item">CSS3選擇器</li>
    <li class="list-group-item">CSS3邊框</li>
    <li class="list-group-item">CSS3背景</li>
    <li class="list-group-item">CSS3文本</li>
</ul>

在列表項(xiàng)的任何區(qū)域都可點(diǎn)擊

.list-group-item中可以包括：.list-group-text, .list-group-heading

.list-group-item可以設(shè)置：.active .disabled .list-group-item-success

<div class="list-group">
    <a href="##" class="list-group-item">圖解CSS3</a>
    <a href="##" class="list-group-item"><span class="badge">220</span>Sass教程</a>
    <a href="##" class="list-group-item">玩轉(zhuǎn)Bootstrap</a>
</div>

面板

<h3>面板中嵌套列表組（一）</h3>
<div class="panel panel-default">
    <div class="panel-heading">圖解CSS3</div>
    <div class="panel-body">
        <p>詳細(xì)講解了選擇器、邊框、背景、文本、顏色、盒模型、伸縮布局盒模型、多列布局、漸變、過渡、動畫、媒體、響應(yīng)Web設(shè)計(jì)、Web字體等主題下涵蓋的所有CSS3新特性
        </p>
        <ul class="list-group">
            <li class="list-group-item">我是列表項(xiàng)</li>
            <li class="list-group-item">我是列表項(xiàng)</li>
            <li class="list-group-item">我是列表項(xiàng)</li>
        </ul>
    </div>
    <div class="panel-footer">作者：大漠</div>
</div>

彈出框

modal

1.button觸發(fā)

<!-- 觸發(fā)模態(tài)彈出窗的元素 -->
<button type="button" data-toggle="modal" data-target="#mymodal" class="btn btn-primary">點(diǎn)擊我會彈出模態(tài)彈出窗</button>
<!-- 模態(tài)彈出窗 -->
<div class="modal fade" id="mymodal">
    <div class="modal-dialog">
        <div class="modal-content">
        <!-- 模態(tài)彈出窗內(nèi)容 -->
    <div class="modal-header">
    <h4>對話框</h4>
</div>
<div class="modal-body"><p>對話框內(nèi)容</p></div>
<div class="modal-footer">
    <button class="btn btn-default" data-dismiss="modal">關(guān)閉</button>
    <button class="btn btn-primary" data-dismiss="modal">完成</button>
</div>
        </div>
    </div>
</div>

2.綁定javascript事件

<!-- 觸發(fā)模態(tài)彈出窗元素 -->
<button class="btn btn-primary" type="button">點(diǎn)擊我</button>
<!-- 模態(tài)彈出窗內(nèi)容 -->
<div class="modal" id="mymodal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">模態(tài)彈出窗標(biāo)題</h4>
            </div>
            <div class="modal-body">
                <p>模態(tài)彈出窗主體內(nèi)容</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

$(function(){
  $(".btn").click(function(){
    $("#mymodal").modal();
  });
});

以上內(nèi)容是否對您有幫助：

← 常用的Bootstrap模板資源站

Bootstrap的基礎(chǔ)表格 →

寫筆記

我要補(bǔ)充