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!