Bootstrap 3之美06-Page Header、Breadcrumbs、Dropdowns、Button Dropdowns、用Button和Dropdowns模拟Select、Input Groups、Thumbnails、Panels、Wells_html/css_WEB-ITnose

This article mainly includes:

■ Page Header
■ Breadcrumbs
■ Button Groups
■ Dropdowns
■ Button Dropdowns
■ Use Button and Dropdowns simulate Select
■ Input Groups
■ Thumbnails
■ Panels
■ Wells

□ Page Header

Page Header is Refers to the top of the page.

            <div class="page-header">                <h1>超级球迷</h1>                <p class="text-warning">关于我们</p>            </div>

The above div will run to the top of the page.

□ Breadcrumbs

Breadcrumbs.

 <div class="page-header">  <ol class="breadcrumb">  <li><a href="/">主页</a></li>  <li class="active"><a href="/">关于我们</a></li>  </ol>  <p class="text-warning">关于我们</p>  </div> 

Above, the ol part is bread crumbs.

□ Button Groups

consists of several buttons, but looks like one button.

 <div class="row">  <div class="col-md-6 btn-group">  <button class="btn btn-success">按钮1</button>  <button class="btn btn-success active">按钮2</button>  <button class="btn btn-success">按钮3</button>  </div>  </div>

btn-group-vertical: Button Group arranged vertically
btn-group-sm: Button Group arranged horizontally by small buttons

A group of radios, plus the data-toggle="buttons" attribute, click on a radio, the button will appear pressed.

 <div class="row">  <div class="btn btn-group-sm" data-toggle="buttons">  <label class="btn btn-success"><input type="radio"/>The Dude</label>  <label class="btn btn-success"><input type="radio"/>Donny</label>  <label class="btn btn-success"><input type="radio"/>Maude</label>  </div>  </div>

  

□ Dropdowns

Click the button to present the drop-down options.

            <div class="row">                <div class="dropdown">                    <button class="btn btn-sm btn-success" data-toggle="dropdown">点我</button>                    <ul class="dropdown-menu">                        <li><a href="#" tabindex="-1">Walter</a></li>                        <li><a href="#" tabindex="-1">Bunny</a></li>                        <li class="divider"></li>                        <li class="disabled"><a href="#" tabindex="-1">The Big</a></li>                    </ul>                </div>            </div>

□ Button Dropdowns

Combine Button Group and Dropdowns, click a button in the Button Group to display Dropdowns.

            <div class="row">                <div class="btn-group btn-group-sm" data-toggle="buttons">                    <label class="btn btn-success"><input type="radio"/>The Dude</label>                    <label class="btn btn-success"><input type="radio"/>Donny</label>                    <label class="btn btn-success"><input type="radio"/>Maude</label>                    <div class="btn-group btn-group-sm">                        <button class="btn btn-success" data-toggle="dropdown">Other<span class="caret"></span></button>                        <ul class="dropdown-menu">                            <li><a href="#" tabindex="-1">Walter</a></li>                            <li><a href="#" tabindex="-1">Bunny</a></li>                            <li class="divider"></li>                            <li class="disabled"><a href="#" tabindex="-1">The Big</a></li>                        </ul>                    </div>                </div>            </div>

You can also separate the button and arrow button into 2 buttons.

<button class="btn btn-success">Other</button><button class="btn btn-success" data-toggle="dropdown"><span class="caret"></span></button>

□ Use Button and Dropdowns to simulate the Select

html part.

            <div class="row">                <div class="dropdown">                    <button class="btn btn-success" id="pickButton">请选择...</button>                    <button class="btn btn-success" data-toggle="dropdown"><span class="caret"></span></button>                    <ul class="dropdown-menu" id="reasonDropdown">                        <li><a href="#" tabindex="-1">Adoration</a></li>                        <li><a href="#" tabindex="-1">Ordering a White Flower</a></li>                        <li><a href="#" tabindex="-1">I am lost</a></li>                    </ul>                </div>            </div>

When you click the down arrow and select the Dropdowns option, you need to display the option on the button with the id of pickButton.

Create the site.js file in the js folder.

(function() {    "use strict";    var $pckButton = $("#pickButton");    $("#reasonDropdown li a").on("click", function() {        var reason = $(this).text();        $pckButton.text(reason);    });})();

Put site.js to the bottom of the page.​​​

□ Pagination

            <div class="row">                <div class="input-group">                    <span class="input-group-addon">Name</span>                    <input type="text" class="form-control" name="userName" placeholder="输入用户名"/>                </div>                          </div>

It can also have digital pagination.

 <div class="row">  <ul class="pager">  <li class="previous"><a href="#">&larr; 上一页</a></li>  <li class="next"><a href="#">下一页 &rarr;</a></li>  </ul>  </div>

□ Thumbnails

When a div is added with the class="thumbnail" attribute, it facilitates the layout of images and text.

            <div class="row">                <ul class="pagination pagination-lg">                    <li class="previous"><a href="#">&larr; 上一页</a></li>                    <li><a href="#">1</a></li>                    <li><a href="#">2</a></li>                    <li><a href="#">3</a></li>                    <li class="next"><a href="#">下一页 &rarr;</a></li>                </ul>                         </div>

□ Panels

In a div set as a panel, you can have the title part of the panel and the body part of the panel.

            <div class="row">                <div class="col-md-4 col-sm-6">                    <div class="thumbnail">                        <a href="#"><img src="images/18.jpg" class="img-responsive" alt="18"/></a>                        <div class="caption">                            <h3>赛事消息</h3>                            <p>                                当比赛进行到第6分钟时，郜林近距离攻门被托莱奇封堵，在郜林示意托莱奇有手球时，迪亚曼蒂在球门另一侧的抢射被对手封堵挡出。主裁判哈桑没有理会郜林的投诉，慢镜头显示托莱奇确实有手球。                            </p>                        </div>                    </div>                </div>                      </div>

□Wells

In the div set to well, this div is highlighted when displayed, which has a strong background effect.

            <div class="row">                <div class="panel panel-default">                    <div class="panel-heading">                        <h2>标题</h2>                    </div>                    <div class="panel-body">                        <p>                            全场比赛伤停补时阶段，最具争议性的判罚出现了。在一次拼抢中，刘健背后对萨巴犯规，萨巴随机倒地，张琳?有一个抬腿动作，试图避免踩到萨巴，萨巴却捂着脸在地上剧烈翻滚。                        </p>                        <img src="images/19.jpg" alt="19" class="img-thumbnail"/>                    </div>                </div>                  </div>

Reference: WilderMinds

            <div class="row">                <div class="well well-lg">                    <p>                        在2014赛季亚冠联赛的一场1/4决赛首回合比赛中，广州恒大客场0-1负于西悉尼流浪者。比赛中，出现了包括张琳?、郜林领到红牌在内的多次争议判罚。裁判专家张大樵在接受天津体育频道采访时表示拉罗卡对张琳?的犯规比较严重，应该领到一张黄牌，而张琳?打了拉罗卡的脸则属于严重犯规，主裁判哈桑向他出示红牌没有问题。哈桑张冠李戴，对萨巴犯规的是刘健，却向郜林出示了红牌。另外，张大樵认为哈桑在上半场漏判了恒大队的一个点球。                    </p>                </div>            </div>