Beauty of Bootstrap 3 06-Page Header, Breadcrumbs, Dropdowns, Button Dropdowns, use Button and Dropdowns to simulate Select, Input Groups, Thumbnails, Panels, Wells, vbadropdowns

Beauty of Bootstrap 3 06-Page Header, Breadcrumbs, Dropdowns, Button Dropdowns, use Button and Dropdowns to simulate Select, Input Groups, Thumbnails, Panels, Wells, vbadropdowns

This article mainly includes:

■ Page Header
■ Breadcrumbs
■ Button Groups
■ Dropdowns
■ Button Dropdowns
■ Simulate Select with Button and Dropdowns
■ Input Groups
■ Thumbnails
■ Panels
■ Wells

□Page Header

Page Header refers to the top of the Page.

            <div class="page-header">
<H1> super fans 
<P class = "text-warning"> about us </p>
            </div>

The above div will go to the top of the page.
 
□Breadcrumbs
Bread.

            <div class="page-header">
                <ol class="breadcrumb">
<Li> <a href = "/"> homepage </a> </li>
<Li class = "active"> <a href = "/"> about us </a> </li>
                </ol>
<P class = "text-warning"> about us </p>
            </div>
In the preceding example, the ol part is breadcrumb.
 
□Button Groups
It consists of several buttons, but looks like a button.

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

 
Btn-group-vertical: vertical arrangement of Button groups
Btn-group-sm: Button groups are arranged horizontally by small buttons
 
A group of radio, plus the data-toggle = "buttons" attribute, click a radio and the button is 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 display the drop-down list.
            <div class="row">
                <div class="dropdown">
<Button class = "btn-sm btn-success" data-toggle = "dropdown"> click me </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 the Button Group and Dropdowns, and click a Button in the Button Group to display the 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 buttons and arrow buttons into two 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 Select
Html section.
            <div class="row">
                <div class="dropdown">
<Button class = "btn-success" id = "pickButton"> Select... </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>
Click the down arrow and select the Dropdowns option. You need to display the option to the pickButton id.
 
Create a 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);
    });
})();

Place site. js at the bottom of the page.

 
□Input Groups
Input Groups refers to the combination of Input and other elements to present an integrated effect.
            <div class="row">
                <div class="input-group">
                    <span class="input-group-addon">Name</span>
<Input type = "text" class = "form-control" name = "userName" placeholder = "enter user name"/>
                </div>              
            </div>

 
□Pagination

            <div class="row">
                <ul class="pager">
<Li class = "previous"> <a href = "#"> & larr; previous page </a> </li>
<Li class = "next"> <a href = "#"> next page & rarr; </a> </li>
                </ul>             
            </div>

 
It can also contain Digital paging.
            <div class="row">
                <ul class="pagination pagination-lg">
<Li class = "previous"> <a href = "#"> & larr; previous page </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 = "#"> next page & rarr; </a> </li>
                </ul>             
            </div>

 
□Thumbnails
When a div is added with the class = "thumbnail" attribute, the layout of images and text is convenient.
            <div class="row">
                <div class="col-md-4 col-sm-6">
                    <div class="thumbnail">
                        <a href="#"></a>
                        <div class="caption">
<H3> event message 
                            <p>
When the competition lasted for 6th minutes, Kobayashi closed the door at close distance and was blocked by tolec. When Kobayashi indicated that tolec had a ball in hand, he was blocked by the opponent when he shot another side of the ball. The referee Hassan ignored Lin's complaint. The slow camera showed that Tric had a ball.
                            </p>
                        </div>
                    </div>
                </div>          
            </div>

 
□Panels
In the div set as panel, you can have the title part and the body part of the panel.
            <div class="row">
                <div class="panel panel-default">
                    <div class="panel-heading">
<H2> title 
                    </div>
                    <div class="panel-body">
                        <p>
The most controversial penalty has emerged in the makeup phase of the entire game. In a fight, Liu Jian left a foul on Saba. Saba fell to the ground randomly, and Zhang linyan raised his leg and tried to avoid stepping on Saba, but Saba turned his face on the ground.
                        </p>
                        
                    </div>
                </div>      
            </div>

 
□Wells
In the div set to well, this div is highlighted during display and has a strong background effect.
            <div class="row">
                <div class="well well-lg">
                    <p>
In the first round of the 2014 semi-finals in the 1/4 Champions League, Guangzhou Evergrande suffered 0-1 away from the Western Sydney wanderer. During the competition, Zhang linmin and Lin received the red card and received multiple disputes. In an interview with Tianjin Sports Channel, the referee Zhang said laroka had a serious foul on Zhang Linke and should receive a yellow card, while Zhang Linke's face was a serious foul, the primary referee Hassan showed him the red card. John Zhang and Li Dai, Liu Jian, who fouled Saba, showed Lin a red card. In addition, Zhang believes that Hasan missed a penalty kick from Evergrande in the first half.
                    </p>
                </div>
            </div>



Reference: WilderMinds
 
The "Beauty of Bootstrap 3" series of classes include:
Beauty of Bootstrap 3 01-download and introduce the beauty of Bootstrap 3 on the page 02-Grid introduction and beauty of APP Bootstrap 3 03-independent lines, text wrapping, image adaptive, hide element Bootstrap 3 beautiful 04-custom CSS, Theme, PackageBootstrap 3 beautiful 05-typographical, Button, Icon, Nav and NavBar, List, Table, FormBootstrap 3 beautiful 06- page Header, Breadcrumbs, Dropdowns, Button Dropdowns, use Button and Dropdowns to simulate Select, Input Groups, Thumbnails, Panels, and Wells