This article introduces the Bootstrap layout component application and is shared with you for your reference. The specific content is as follows
Example of application of font icons
<button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-sort-by-attributes"></span> </button>
Drop-down menu example
<div class="dropdown"> <button type="button" class="btn dropdown-toggle" data-toggle="dropdown"> theme <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation" class="dropdown-header">Pull-down menu title</li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">Option 1</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">Option 2</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">Option 3</a> </li> <li role="presentation" class="divider"></li><!--Dividing line--> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">Disassociated Links</a> </li> </ul> </div>
Button toolbar and button group
<div class="btn-toolbar" role="toolbar"><!--Used for nestingbtn-group--> <div class="btn-group btn-group-lg"> <!--btn-group-lgUsed to control the size of the button group,bt-group-verticalIs a vertical button group,bt-groupCan also be nestedbt-group--> <button type="button" class="btn btn-default">Button 1</button> <button type="button" class="btn btn-default">Button 2</button> <button type="button" class="btn btn-default">Button 3</button> </div> <div class="btn-group btn-group-sm"> <button type="button" class="btn btn-default">Button 4</button> <button type="button" class="btn btn-default">Button 5</button> <button type="button" class="btn btn-default">Button 6</button> </div> <div class="btn-group btn-group-xs"> <button type="button" class="btn btn-default">Button 7</button> <button type="button" class="btn btn-default">Button 8</button> <button type="button" class="btn btn-default">Button 9</button> </div> </div>
Button drop-down menu
<div class="btn-group"><!--Add category.dropupCan be turned into a button pull-up menu--> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <!-- Add category.btn-xsSomething like that changes the button size--> default <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Function</a></li> <li><a href="#">Another function</a></li> <li><a href="#">Other</a></li> <li class="divider"></li><!--Dividing line--> <li><a href="#">Separated Links</a></li> </ul> </div>
Input box group in form
<form class="bs-example bs-example-form" role="form">
<div class="input-group input-group-lg"><!--input-group-lgResize input box group-->
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>
<br>
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox"><!--Both check boxes and radio boxes can be applied to input box groups-->
</span>
<input type="text" class="form-control">
</div>
<br>
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn"><!--Buttons can also be applied to input box groups. Please note that the class here becomesinput-group-btn，You can even add the buttons in front to the drop-down menu-->
<button class="btn btn-default" type="button">
Go!
</button>
</span>
</div>
</form>
Navigation (tab tab page)
<p>Label-style navigation menu</p> <ul class="nav nav-tabs"><!--Add classnav-justifiedCan align the navigation ends--> <li class="active"><a href="#">Home</a></li> <li><a href="#">SVN</a></li> <li><a href="#">iOS</a></li> </ul> <p>Basic capsule navigation menu</p> <ul class="nav nav-pills"> <li class="active"><a href="#">Home</a></li> <li><a href="#">SVN</a></li> </ul> <p>Vertical capsule navigation menu</p> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#">Home</a></li> <li><a href="#">SVN</a></li> </ul>
Navigation bar
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">W3Cschool</a>
</div>
<div>
<ul class="nav navbar-nav"><!--.navbar-fixed-topand.navbar-fixed-bottom可以使导航栏固定在顶部and底部， .navbar-static-topWill the navigation bar scroll with the page?， .navbar-inverse实现背景颜色and文字颜色互换-->
<li class="active"><a href="#">iOS</a></li>
<li><a href="#">SVN</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Java
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">jmeter</a></li>
<li><a href="#">EJB</a></li>
<li><a href="#">Jasper Report</a></li>
<li class="divider"></li>
<li><a href="#">Separated Links</a></li> </ul>
</li>
</ul>
<!--Forms in the navigation bar-->
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">submit</button>
</form>
<!--Navigation Bar Button-->
<button type="button" class="btn btn-default navbar-btn">
Navigation Bar Button
</button>
<!--Navigation bar text-->
<div class="navbar-text navbar-right">
<p >Navigation bar text <a href="#" class="navbar-link">I am the link</a></p> </div>
<!--navbar-leftandnavbar-right可以实现向左and向右对齐-->
</div>
</nav>
Responsive navigation bar
The following golden part is the difference between the general navigation bar
<nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span><!--Here are a few optionsiconbar--> </button> <a class="navbar-brand" href="#">W3Cschool</a> </div> <div class="collapse navbar-collapse" > <ul class="nav navbar-nav"> <li class="active"><a href="#">iOS</a></li> <li><a href="#">SVN</a></li> <li><a href="#">Troy</a></li> </ul> </div> </nav>
Breadcrumb navigation
<ol class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">2013</a></li> <li class="active">November</li> </ol>
Pagination and page turn
<!--All the following examples are availabledisabledandactive类来控制激活and禁用--> <!--Pagination--> <ul class="pagination"><!--pagination-smandpagination-lg来控制Pagination的大小--> <li><a href="#">&laquo;</a></li> <li class="active"><a href="#">1</a></li> <li class="disabled"><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">&raquo;</a></li> </ul> <!--Turn the page--> <ul class="pager"> <li><a href="#">Previous</a></li> <li><a href="#">Next</a></li> </ul> <!--Turn the page--> <ul class="pager"> <li class="previous"><a href="#">&larr; Older</a></li> <li class="next"><a href="#">Newer &rarr;</a></li> </ul>
Label
<span class="label label-default">Default tags</span> <span class="label label-primary">Main tags</span> <span class="label label-success">Success tag</span> <span class="label label-info">Information tags</span> <span class="label label-warning">Warning tags</span> <span class="label label-danger">Danger label</span>
badge
Badges are smoother than labels and are mainly used to highlight new or unread items
<ul class="nav nav-pills nav-stacked" style="max-width: 260px;"> <li class="active"> <a href="#"> <span class="badge pull-right">42</span> front page </a> </li> <li><a href="#">Introduction</a></li> <li> <a href="#"> <span class="badge pull-right">3</span> information </a> </li> </ul>
Extra large screen
<div class="jumbotron"> <div class="jumbotron"> <h1>Welcome to login page！</h1> <p>This is a super large screen（Jumbotron）Examples。</p> <p><a class="btn btn-primary btn-lg" role="button"> Learn more</a> </p> </div> </div> <!--Turn overjumbotronWrappedjumbotronYou will get a super large screen without rounded corners and taking up more widths-->
Page title example
<div class="page-header"> <h1>Page title example <small>Subtitle</small> </h1> </div>
Thumbnail
<div href="#" class="thumbnail">
<img src="/wp-content/uploads/2014/06/"
alt="Universal placeholder thumbnail">
</div>
<div class="caption">
<h3>Thumbnail Tags</h3>
<p>Some sample text。Some sample text。</p>
<p>
<a href="#" class="btn btn-primary" role="button">
Button
</a>
<a href="#" class="btn btn-default" role="button">
Button
</a>
</p>
</div>
warn
<div class="alert alert-success alert-dismissable"><!--alert-dismissableTo delete warnings--> <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> &times; </button> success！Completed the submission very well。 </div> <div class="alert alert-info alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> &times; </button> <a href="#" class="alert-link">Success! Submission was completed well.</a><!--Tags in Warning--></div> <div class="alert alert-warning alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> &times; </button> warn！Please do not submit。 </div> <div class="alert alert-danger alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> &times; </button> mistake！Please make some changes。 </div>
Progress bar
<!--General progress bar--> <div class="progress progress-striped active"><!--progress-stripedTo add stripes,addactiveStripes will produce animation effects--> <!--progress-bar-info progress-bar-warning progress-bar-danger progress-bar-success Different colors will be given to the progress bar，不add就是最基本的--> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 90%;"> <span class="sr-only">90% Finish（success）</span> </div> </div> <!---Stacked progress bars--> <div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"> <span class="sr-only">40% Finish</span> </div> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 30%;"> <span class="sr-only">30% Finish（information）</span> </div> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 20%;"> <span class="sr-only">20% Finish（warn）</span> </div> </div>
Media Tags
.media: This class allows multimedia (image, video, audio) in media objects to the left or right of the content block.
.media-list: If you need a list, each item is part of an unordered list, you can use this class. Can be used for comment lists and article lists.
<ul class="media-list">
<li class="media">
<a class="pull-left" href="#">
<img class="media-object" src="/wp-content/uploads/2014/06/"
alt="Universal placeholder image">
</a>
<div class="media-body">
<h4 class="media-heading">Media Title</h4>
<p>Here are some sample text。Here are some sample text。
Here are some sample text。Here are some sample text。
Here are some sample text。Here are some sample text。
Here are some sample text。Here are some sample text。
Here are some sample text。Here are some sample text。</p>
<!-- Nested media objects -->
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="/wp-content/uploads/2014/06/"
alt="Universal placeholder image">
</a>
<div class="media-body">
<h4 class="media-heading">嵌套的Media Title</h4>
Here are some sample text。Here are some sample text。
Here are some sample text。Here are some sample text。
Here are some sample text。Here are some sample text。
Here are some sample text。Here are some sample text。
Here are some sample text。Here are some sample text。
<!-- Nested media objects -->
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="/wp-content/uploads/2014/06/"
alt="Universal placeholder image">
</a>
<div class="media-body">
<h4 class="media-heading">嵌套的Media Title</h4>
Here are some sample text。Here are some sample text。
Here are some sample text。Here are some sample text。
Here are some sample text。Here are some sample text。
Here are some sample text。Here are some sample text。
Here are some sample text。Here are some sample text。
</div>
</div>
</div>
</div>
<!-- Nested media objects -->
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="/wp-content/uploads/2014/06/"
alt="Universal placeholder image">
</a>
<div class="media-body">
<h4 class="media-heading">嵌套的Media Title</h4>
Here are some sample text。Here are some sample text。
Here are some sample text。Here are some sample text。
Here are some sample text。Here are some sample text。
Here are some sample text。Here are some sample text。
Here are some sample text。Here are some sample text。
</div>
</div>
</div>
</li>
<li class="media">
<a class="pull-right" href="#">
<img class="media-object" src="/wp-content/uploads/2014/06/"
alt="Universal placeholder image">
</a>
<div class="media-body">
<h4 class="media-heading">Media Title</h4>
Here are some sample text。Here are some sample text。
Here are some sample text。Here are some sample text。
Here are some sample text。Here are some sample text。
Here are some sample text。Here are some sample text。
Here are some sample text。Here are some sample text。
</div>
</li>
</ul>
List Group
<!--General list group--> <ul class="list-group"> <li class="list-group-item">Free domain name registration</li> <li class="list-group-item"> <span class="badge">new</span> 24*7 support </li> <li class="list-group-item">每年更new成本</li> <li class="list-group-item"> <span class="badge">new</span> Discounts </li> </ul> <!--Custom list group--> <div class="list-group"> <a href="#" class="list-group-item active"> <h4 class="list-group-item-heading"> Getting started website package </h4> </a> <a href="#" class="list-group-item"> <h4 class="list-group-item-heading"> Free domain name registration </h4> <p class="list-group-item-text"> 您将通过网页进行Free domain name registration。 </p> </a> <a href="#" class="list-group-item"> <h4 class="list-group-item-heading"> 24*7 support </h4> <p class="list-group-item-text"> We provide 24*7 support。 </p> </a> </div>
panel
<div class="panel panel-default"><!--Can be substitutedpanel-defaultClass of：panel-primary，panel-success，panel-info，panel-warning，panel-danger--> <div class="panel-heading"> <h3 class="panel-title"> With title Panel title </h3> </div> <div class="panel-body"> Panel content </div> <!---With table--> <table class="table"> <th>product</th><th>price </th> <tr><td>product A</td><td>200</td></tr> <tr><td>product B</td><td>400</td></tr> </table> <!---With list group--> <ul class="list-group"> <li class="list-group-item">Free domain name registration</li> <li class="list-group-item">free Window Space Hosting</li> <li class="list-group-item">Number of images</li> <li class="list-group-item">24*7 support</li> <li class="list-group-item">Annual update cost</li> </ul> <div class="panel-footer">Panel footnotes</div> </div>
Well effect
Well is a container that causes dents or illustration effects to the content <div>
<div class="well well-lg">Hello，I'm in the big one Well middle！</div> <div class="well well-sm">Hello，I'm in the small Well middle！</div>
If you want to learn more, you can clickhereLet’s study and attach two exciting topics to you:Bootstrap learning tutorial Bootstrap practical tutorial
The above is all about this article, I hope it will be helpful to everyone's learning.