久久精品欧美日韩精品,国产精品乱码一区二区三区

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

2015.09.23

縮略圖

<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" style="height: 180px; width: 100%; display: block;" alt="">
            </a>
        </div>
    …
    </div>
</div>

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

按 Ctrl+C 復(fù)制代碼

警示框

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

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

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

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

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

進(jìn)度條

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

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

媒體對(duì)象

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

列表組

<ul class="list-group">
    <li class="list-group-item">揭開(kāi)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ì)講解了選擇器、邊框、背景、文本、顏色、盒模型、伸縮布局盒模型、多列布局、漸變、過(guò)渡、動(dòng)畫、媒體、響應(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ā)

<button type="button" data-toggle="modal" data-target="#mymodal" class="btn btn-primary">點(diǎn)擊我會(huì)彈出模態(tài)彈出窗</button>  <div class="modal fade" id="mymodal"> <div class="modal-dialog"> <div class="modal-content">  <div class="modal-header"> <h4>對(duì)話框</h4> </div> <div class="modal-body"><p>對(duì)話框內(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">×</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();
  });
});

本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊舉報(bào)。

打開(kāi)APP，閱讀全文并永久保存查看更多類似文章

bootstrap4 模態(tài)框

bootstrap中的模態(tài)框（modal，彈出層）

什么是 bootstrap ngb modal window？

bootstrap model彈出框的使用

模態(tài)框 modal.js

使用jQuery和Bootstrap實(shí)現(xiàn)多層、自適應(yīng)模態(tài)窗口

更多類似文章 >>

九色国产,午夜在线视频,新黄色网址,九九色综合,天天做夜夜做久久做狠狠,天天躁夜夜躁狠狠躁2021a,久久不卡一区二区三区