当前位置： 云海天教程网 > 技术新闻 > 编程语言 > 正文

Bootstrap进阶

  • 作者： 佚名     来源： 网络转载
  • 时间：2019-12-06

一、组件

无数可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能

1.1 图片使用Glyphicons 字体图标

<span class="glyphicon glyphicon-save-file"></span>

1.2 下拉菜单

<div class="dropdown">
        <!-- 下拉框 触发按钮 -->
        <button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
            下拉框
            <!--下拉框图片-->
            <span class="glyphicon glyphicon-arrow-down"></span>
        </button>
        <!-- 下拉菜单-->
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
        </ul>
</div>

1.3 按钮组

// 把一系列的.btn按钮放入.btn-group。
// btn-group 内部嵌套 btn 
<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

1.4 toolbar 按钮工具栏

// 把一组 <div class="btn-group"> 组合进一个 <div class="btn-toolbar"> 中就可以做成更复杂的组件
<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
</div>

1.5 尺寸

// 只要给 .btn-group 加上 .btn-group-* 类，就省去为按钮组中的每个按钮都赋予尺寸类了，如果包含了多个按钮组时也适用。
<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

1.6 带分割线的下拉框

<div class="btn-group">
        <button id="show" type="button" class="btn btn-danger">Action</button>
        <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span class="caret"></span>
            <span class="sr-only">Toggle Dropdown</span>
        </button>
        <ul id="ul" class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
        </ul>
</div>

点击切换button显示内容

var $arr=$("#ul li");
        $.each($arr, function() {
            $(this).click(function(){
                var $t = $(this).text();
                ("#show").text(t);
            });
        });

1.7 标签式导航栏

<div class="tabbable tabs-below">
          <div class="tab-content">
            <div class="tab-pane active" id="A">
              <p>I"m in Section A.</p>
            </div>
            <div class="tab-pane" id="B">
              <p>Howdy, I"m in Section B.</p>
            </div>
            <div class="tab-pane" id="C">
              <p>What up girl, this is Section C.</p>
            </div>
          </div>
          <ul class="nav nav-tabs">
            <li class="active"><a href="#A" data-toggle="tab">Section 1</a></li>
            <li><a href="#B" data-toggle="tab">Section 2</a></li>
            <li><a href="#C" data-toggle="tab">Section 3</a></li>
          </ul>
</div>

1.8 胶囊导航

    <ul class="nav nav-pills ">
        <li class="active"><a href="#h5" data-toggle="tab">HTML5</a></li>
        <li><a href="#java" data-toggle="tab">JAVAEE</a></li>
        <li><a href="#android" data-toggle="tab">ANDROID</a></li>
    </ul>
    <div id="myTabContent" class="tab-content">
        <div class="tab-pane fade in active" id="h5">
            <p>Html5最近比较火</p>
        </div>
        <div class="tab-pane fade" id="java">
            <p>java是高级语言，是最好的语言</p>
        </div>
        <div class="tab-pane fade" id="android">
            <p>android是最受大众欢迎的智能机品牌</p>
        </div>
    </div>

1.9 导航条

// data-toggle="tab" 倒航条自带响应效果 缩小显示成手机效果
<li role="presentation" class="active"><a href="#" data-toggle="tab">Home</a></li>

1.10 路径导航 面包屑导航

    <ol class="breadcrumb">
        <li><a href="#">Home</a></li>
        <li><a href="#">2013</a></li>
        <li class="active">十一月</li>
    </ol>

1.11 标签

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

1.12 徽章 提示消息数

    <a href="#">Inbox <span class="badge">42</span></a>
    <button class="btn btn-primary" type="button">
        Messages <span class="badge">4</span>
    </button>

1.13 巨幕

   <div class="jumbotron">
        <h1>Hello, world!</h1>
        <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
    </div>

1.14 缩略图

<div class="container" style="margin-top: 30px;">
    <div class="row">
        <div class="col-md-4">
            <a href="#" class="thumbnail"> <img src="../img/005.jpg"></img></a>
            <div class="caption">
                <h4>HTML入门</h4>
                <h6>html是最好的静态网页语言</h6>
            </div>
        </div>
    </div>
</div>

1.15 进度条

<div class="progress">
    <div id="progressbar" class="progress-bar progress-bar-success"
         role="progressbar" aria-valuenow="60" aria-valuemin="0"
         aria-valuemax="100" style="width: 10%;">
        <span class="sr-only">90% 完成（成功）</span>
    </div>
</div>

1.16 well

<div class="well well-lg">您好，我在大的 Well 中！</div>
<div class="well well-sm">您好，我在小的 Well 中！</div>