[UI] 05 - Bootstrap: built-in components

時間 2019-11-07

標籤 bootstrap built components 欄目 Bootstarp 简体版

原文原文鏈接

前言

1、資源

內置組件

1、縮略圖

<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 class="caption">
　　　　<h3>Bootstrap框架系列教程</h3>
　　　　<p>Bootstrap框架是一個優秀的前端框，就算您是一位後端程序員或者你是一位不懂設計的前端人員，你也能依賴於Bootstrap製做作優美的網站...</p>
　　　　<p>
　　　　　　<a href="##" class="btn btn-primary">開始學習</a>
　　　　　　<a href="##" class="btn btn-info">正在學習</a>
　　　　</p>
　　</div>  
</div>

效果圖：html

2、警示框

<h2>警示框的連接</h2>
<div class="alert alert-success" role="alert">
    <strong>Well done!</strong> 
    You successfully read 
    <a href="#" class="alert-link">this important alert message</a>
    .
</div>
<div class="alert alert-info" role="alert">
    <strong>Heads up!</strong>
     This 
     <a href="#" class="alert-link">alert needs your attention</a>
     , but it's not super important.
</div>
<div class="alert alert-warning" role="alert">
    <strong>Warning!</strong>
     Better check yourself, you're 
     <a href="#" class="alert-link">not looking too good</a>
     .
</div>
<div class="alert alert-danger" role="alert">
    <strong>Oh snap!</strong>
    <a href="#" class="alert-link">Change a few things up</a>
     and try submitting again.
</div>

3、進度條

<h2>帶Label的進度條</h2>
<h5>進度條1</h5>

<div class="progress">
    <div class="progress-bar progress-bar-success"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%">20%</div>  
</div>  

<div class="progress">
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"   style="width:70%">70%</div>
</div>

<div class="progress">
    <div class="progress-bar progress-bar-warning"  role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width:30%">30%</div>
</div>

<div class="progress">
    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="width:15%">15%</div>
</div>

4、媒體對象

左圖，右文字

<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模塊知識，經典案例分析，代碼同步調試，讓網頁穿上絢麗裝備！</div>
    </div>
</div>

嵌套佈局

<div class="media">
    <a class="pull-left" href="#">
        <img class="media-object" src="http://a.disquscdn.com/uploads/users/3740/2069/avatar92.jpg?1406972031" alt="...">
    </a>
    <div class="media-body">
        <h4 class="media-heading">我是大漠</h4>
        <div>我是W3cplus站長大漠，我在寫Bootstrap框中的媒體對象測試用例</div>
        <div class="media">
            <a class="pull-left" href="#">
                <img class="media-object" src="http://tp2.sinaimg.cn/3306361973/50/22875318196/0" alt="...">
            </a>
            <div class="media-body">
                <h4 class="media-heading">慕課網</h4>
                <div>大漠寫的《玩轉Bootstrap》系列教程即將會在慕課網上發佈</div>
                <div class="media">
                    <a class="pull-left" href="#">
                        <img class="media-object" src="http://tp4.sinaimg.cn/1167075935/50/22838101204/1" alt="...">
                    </a>
                    <div class="media-body">
                        <h4 class="media-heading">W3cplus</h4>
                        <div>W3cplus站上還有不少教程....</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

View Code

5、列表組

詳情：http://www.imooc.com/code/3819前端

<h3>多彩列表組</h3>
<div class="list-group">
    <a href="##" class="list-group-item active"><span class="badge">5902</span>圖解CSS3</a>
    <a href="##" class="list-group-item list-group-item-success"><span class="badge">15902</span>W3cplus</a>
    <a href="##" class="list-group-item list-group-item-info"><span class="badge">59020</span>慕課網</a>
    <a href="##" class="list-group-item list-group-item-warning"><span class="badge">0</span>Sass中國</a>
    <a href="##" class="list-group-item list-group-item-danger"><span class="badge">10</span>Mobile教程</a>
</div>

6、面板

簡單面板

<div class="panel panel-danger">
    <div class="panel-heading">圖解CSS3</div>
    <div class="panel-body">詳細講解了選擇器、邊框、背景、文本、顏色、盒模型、伸縮佈局盒模型、多列布局、漸變、過渡、動畫、媒體、響應Web設計、Web字體等主題下涵蓋的全部CSS3新特性</div>
    <div class="panel-footer">做者：大漠</div>
</div>

嵌套面板

<div class="panel panel-default">
    <div class="panel-heading">圖解CSS3</div>

    <div class="panel-body">
        <p>詳細講解了選擇器、邊框、背景、文本、顏色、盒模型、伸縮佈局盒模型、多列布局、漸變、過渡、動畫、媒體、響應Web設計、Web字體等主題下涵蓋的全部CSS3新特性
        </p>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>＃</th>
                    <th>個人書</th>
                    <th>發佈時間</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>《圖解CSS3》</td>
                    <td>2014-07-10</td>
                </tr>
            </tbody>
        </table>
    </div>　　　　# 抹掉下面內置table的padding的關鍵

    <div class="panel-footer">做者：大漠</div>
</div>

7、彈出窗口

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>導入JavaScript插件</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>

<body>
<button class="btn btn-primary" type="button">點擊我</button>
<div class="modal" id="mymodal">　　　　# class="modal fade"

    <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">模態彈出窗標題</h4>
            </div>
            -----------------------------------------------------------------------------------
            <div class="modal-body">
                <p>模態彈出窗主體內容</p>
            </div>
            -----------------------------------------------------------------------------------
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->

</div><!-- /.modal -->

<script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
<script>
  $(function(){
    $(".btn").click( function(){
      $("#mymodal").modal("toggle");
    });
  });
</script>
</body>

</html>

效果圖：jquery

其餘詳見參數設置：http://www.imooc.com/code/3868程序員

<body>

<!--data-target觸發模態彈出窗元素 -->
<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal-data" type="button">經過data-target觸發</button>

<!-- 模態彈出窗內容 -->
<div class="modal fade" id="mymodal-data" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <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">模態彈出窗標題</h4>
            </div>
            <div class="modal-body">
                <p>模態彈出窗主體內容</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 

</body>

相關標籤/搜索

bootstrap+bootstrap+scss

每日一句

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