Bootstrap, official bootstrap website
Fixed Grid SystemBy default, bootstrap does not enable the responsive layout feature. After raster, only the PX width is occupied. If you enable the responsive layout through bootstrap-responsive.css, the boot will dynamically adjust the width from 724px to 1170px Based on the width of the view.Stream raster SystemThe column width is set as a percentage. Therefore, the column width and column width must be 12 to cover the whole screen width.
SummaryThe two types of raster systems have width. Before adding a responsive layout: The first fixed raster system has a fixed width of 940px, so the width of each column is also fixed; the second streaming raster system calculates the percentage of width of each column based on the width of the entire screen. Therefore, the column and column must be 12 to fill the whole width. After a responsive layout is added, the first fixed grid system allocates the column width from Px to a specific width in the 1170px range based on the screen width. The second streaming raster system will change the width of each column due to the addition of the responsive layout, but the 12 columns are still full of the screen.
Bootstrap default StyleThe default font-size of boot is 14px, and the line height is 20px. This applies to the body and all P elements, in addition, the p element carries the bottom margin of half of the height of the row by default.
Text alignment Style
- Text-left: left alignment
- Text-center: center alignment
- Text-right: right alignment
Text emphasis Style
- Muted: Text weakening
- Text-warning: warning Style
- Text-error: Incorrect Style
- Text-info: Information text
- Text-success: Successful text
Abbreviations)
<Abbr title = 'attribute' class = 'initialism '> attr </abbr> initialism: the acronyms of the first letter of the word, which can slightly reduce the font size.
Address style addressDisplay the contact information in the form closest to the routine, and add <br> to wrap the line.
<Address> <strong> Full Name </strong> <br> <a href = "mailto: #"> first.last@example.com </a> </address>
Block reference blockquoteAll text is separated from regular text. It is often indented on both sides of the left and right (with an extra margin), and sometimes italic text is used. That is to say, block references have their own space. You can add <small> Someone famous <cite title = "Source Title"> Source Title </cite> </small> to indicate the reference Source, you can also add the css style pull-right to align the block reference right.
Ul li
Use unstyled to remove the default style, and use inline to inline the list.
1) Terms
Description
Style:
<Dl>
<Dt>... </dt>
<Dd>... </dd>
</Dl>
Code
- Inline code with <code> </code>
- Multiple lines of code constitute a code block <pre> </pre>. The style pre-scrollable is added to limit the code block to a height of PX.
- Var tag variables are mainly italic <var> y </var> = <var> m </var> <var> x </var> + <var> B </var>
- Samp tag console output <samp> This text is meant to be treated as sample output from a computer program. </samp>
Table
- Table is the default Style
- Table-striped adds a zebra line style to each line of the tbody. This style depends on the nth-child selector, which is not supported by ie8;
- Table-bordered indicates the table price border.
- Table-hover mouse hover Style
Button
- The create button can be implemented through <a> <button> <input>. Although the button can be implemented through <a>, the navigation bar and navigation bar components only support <button> labels, <a> when using as a button, if it is not used for linking but for triggering some events, you must add the role = 'button 'attribute. <A class = "btn-default" href = "#"> Link </a> Note: We recommend that you use a button to achieve browser compatibility, in addition, input over firefox 30 will block the set line-height attribute.
- Set the button size: You can use btn-lg, btn-sm, btn-xs <button class = "btn-primary btn-lg" type = "button"> (Large button) Large button </button>
- You can use the btn-block style to stretch the button to 100% of its parent element and convert the button into a block element.
- Button disabling: Generally, you can use the opacity attribute to change the background. You can add the disable attribute to disable it.
Image
- In Boot3, you can add. img-responsive to support responsive layout. The essence is to set the max-width: 100%, height: auto, display: block of the image. You can add. center-block to align the response layout.
- Set the image shape: img-rounded, img-circle, img-thumbnail
Auxiliary class
- Set the background color: bg-primary, bg-success, bg-info, bg-warning, bg-danger
- Close button: <button type = "button" class = "close" aria-label = "Close"> <span aria-hidden = "true"> × </span> </button>
- Triangle symbol: <span class = "caret"> </span>
- Fast floating: pull-left, pull-right
- Center content block: center-block
- Clear floating: Add clearfix to the parent Element
- Show hidden content:. show,. hidden. hide is still available, but it cannot be used for screen readers. It is not recommended to use. hidden,. sr-only at the beginning of 3.0.1 .. Invisible only affects the visibility of the element. The display attribute of the element is not changed, and the element can still affect the layout of the document.
// Classes. show {display: block! Important;}. hidden {display: none! Important;}. invisible {visibility: hidden;} // Usage as mixins. element {. show () ;}. another-element {. hidden ();}
- Screen Reader :. sr-only (screen reader-only) is used to hide this element on other devices except screen readers. This element is used for screen readers to help people with disabilities access websites better .. Sr-only and. sr-only-focusable can be displayed again when the element has focus.
- Text hiding: text-hide
