Examples of BootStrap image styles, helper styles, and CSS components are described in detail,

Examples of BootStrap image styles, helper styles, and CSS components are described in detail,

First, add the template code:

<! DOCTYPE html> 
Image Style
. Img-responsive: add this style directly to the image to implement a responsive image.
. Center-block: The image center style, but not the text-center style.
Image shape:. img-rounded (rounded image),. img-circle (circular image),. img-thumbnail (border rounded corner)
<H2 class = "page-header"> image style application 

Helper Style
Text color:. text-muted (soft),. text-primary,. text-success,. text-info,. text-warning,. text-danger
Background Color:. bg-primary,. bg-success,. bg-info,. bg-warning,. bg-danger
Triangle symbol:
Fast floating class:. pull-left (left floating),. pull-right (right floating)
Clear floating: Add. clearfix to the parent element to clear floating.
Center the content block webpage:
<H2 class = "page-header"> clear floating applications 

CSS Components
Drop-down menu
. Dropdown include the drop-down menu trigger and drop-down menu (parent element of the drop-down menu ).
Data-toggle property: drop-down menu trigger. The value is "dropdown ".
. Dropdown-menu: Specify the drop-down menu style for <ul>.
. Dropup: the drop-down menu (parent element of the drop-down menu) is displayed ).
Drop-down menu alignment:. Dropdown-menu-left and. dropdown-menu-right
. Divider: adds a separator to the drop-down menu to group multiple links.
. Disabled: disabled menu item.
<H2 class = "page-header"> application of the drop-down menu 

Button Group
. Btn-group: button group (A group of buttons can be placed in the same row ).
. Btn-toolbar: button group toolbar (put multiple button groups in it ).
Button group size:. btn-group-lg,. btn-group-sm,. btn-group-xs
. Btn-group-vertical: vertical button group.
<H2 class = "page-header"> button group application 

Shortcut menu
<H2 class = "page-header"> apps from the drop-down menu on a pay-as-you-go basis 

Here, if there are many drop-down menus, you can use the scroll bar to solve them!
Use overflow: auto; to define a height.
Input box Group
. Input-group: it can only be used in text boxes <input>, not <select> or <textarea>.
. Input-group-addon is used to add additional elements before and after <input> and assign them to a <span> element.
Note: Package the. input-group-addon and <input> elements in. input-group.
. Input-group-lg and. input-group-sm can change the size of the input box group.
. Input-group-btn can be used as a button for additional elements. It should be the parent element of <button>.
<H2 class = "page-header"> application of the input box group 

Tab (Tab)
. Nav is the base class of the tab
. Nav-tabs is a tab Style
. Active is the status class of the tab (current style)
. Nav-pills capsule Tab
. Nav-stacked capsule tab stacked (vertical)
<H2 class = "page-header"> tab effect 

Path navigation
. Breadcrumb: assigned
It can achieve the effect of breadcrumb.
. Active is assigned to the current topic. No link is added to the current topic.
<H2 class = "page-header"> path navigation effect 

Paging
. Pagination assigned
Elements can achieve paging Effect
«Previous Page
» Next page
. Disabled
. Active status
. Pagination-lg pagination Large Size
. Pagination-sm small paging size
. Pager can achieve page turning. Previous Page and next page.
<Div class = "text-center" style = "border: 1px solid red; "> <ul class =" pagination-lg pager "> <li class =" previous "> <a href =" # "> previous </a> </li> <li class = "disabled"> <a href = ""> «</a> </li> <li class = "active"> <a href = ""> 1 </a> </li> <a href = ""> 2 </a> </li> <a href = ""> 3 </ a> </li> <a href = ""> 4 </a> </li> <a href = ""> 5 </a> </li> <a href = ""> 6 </a> </li> <a href = ""> 7 </a> </ li> <a href = ""> 8 </a> </li> <a href = ""> 9 </a> </li> <li> <a href = ""> 10 </a> </li> <a href = "">» </a> </li> <li class = "next"> <a href = "#"> next page → </a> </li> </ul> </div> <div class = "text-center "style =" border: 1px solid red; "> <ul class =" pagination-lg "> <li> <a href =" "> «</a> </li> <li class =" active "> <a href = ""> 1 </a> </li> <a href = ""> 2 </a> </li> 

Thumbnail
. Thumbnail is assigned to the <a> element to implement the thumbnail style.
. Caption can implement thumbnail title and description
<H2 class = "page-header"> thumbnail effect 

Navigation Bar
The navigation bar is different. It is not written in the Container inclusion layer, but above the div!
. Navbar: The base class of the navigation bar for <nav> elements.
. Navbar-default: the default style of the navigation bar for <nav> elements.
. Container is a child element of <nav>. The content in the navigation bar is included.
. Navbar-header: navigation bar header style.
. Navbar-brand: Set the brand icon Style
. Collapse is the basic class that folds the style of the navigation bar.
. Navbar-collapse is the folding navigation bar style.
. Nav is the link base class of the navigation bar.
. Navbar-nav is the link style of the navigation bar.
. Navbar-from: navigation bar form, which can arrange form elements in the same row.
. Navbar-left or. navbar-right: component arrangement. Align navigation links, forms, buttons, or text.
. Navbar-btn: vertical alignment is implemented for <button> elements not in <form>.
. Navbar-text: the regular text in the navigation bar has line spacing and color, which is usually used for <p> elements.
. Navbar-fixed-top: the navigation bar is fixed on the top for <nav> elements. You need to set padding-top: 70px for <body>
. Navbar-fixed-bottom: the navigation bar is fixed at the bottom for <nav> elements. You need to set padding-bottom: 70px for <body>;
. Navbar-static-top: the navigation bar is still on the top for <nav> elements. Will disappear as the scroll bar moves.
. Navbar-inverse: You can implement the reversed navigation bar for <nav> elements.
<Nav class = "navbar-default navbar-static-top"> <! -- Navigation bar header information --> <div class = "container"> <! -- Brand information --> <div class = "navbar-header"> <a class = "navbar-Brand" href = ""> brand </a> <p class = "navbar "-text "> welcome </p> </div> <! -- Main link in the navigation bar --> <div class = "collapse navbar-collapse"> <ul class = "nav navbar-left"> <li class = "active"> <a href = ""> Start </a> </li> <a href = ""> CSS global style </a> </li> <a href = ""> component </a> </li> <a href = ""> plug-in </a> </li> <a href = ""> website case </a> </li> </ul> <! -- Form search box --> <form class = "navbar-form navbar-left"> <div class = "form-group"> <input type = "text" class = "form- control "placeholder =" Search "> </div> <button type =" submit "class =" btn-default "> Search </button> </form> <ul class = "nav navbar-right"> <li> <a href = ""> Link </a> </li> <li class = "dropdown"> 

Okay, then go directly to the complete source code:
Complete source code link:
Https://github.com/chenhaoxiang/BootStrap/tree/master/day3
Like the back-end student, I learned this BootStrap here, and then I can use it flexibly ~~~ If you have any questions, please leave a message and the editor will reply to you in time. Thank you very much for your support for the help House website!