Bootstrap class style summary _javascript tips

Base class

. code to display single-line inline code
. Pre to display multi-line block code
. kbd to display user input code
. pre-scrollable height exceeds 340px, scroll bar appears on Y axis

Form class

. table base table margin-bottom:20px, light gray solid line at thead bottom 2px, light gray solid line at the top of each cell
. table-striped: Zebra table, interlaced with a light gray background color
. table-bordered: A table with borders, all cells have a 1px border
. Table-hover: Hover over the rows of the table with a highlighted background color
. table-condensed: Transfer cell spacing from 8px to 5px
. Table-responsive: Sets the container for the class name. table-responsive, placing <table class= "table" > in this container

Class for Table rows

. Active represents the current activity information
. Success successful or correct behavior
. info indicates neutral information or behavior
. Warning warns that
. Danger says danger alive wrong behavior

In addition to. Active, the other four class names should be matched with. Table-hover

Form

Form-horizontal horizontal form effect, with bootstrap frame grid system; Set form control padding and margin values; change the expression of "Form-group", similar to "row" in grid system
Type types must also be added when using input in bootstrap
In order for the control to have style errors in various form styles, you need to add. Form-control
Multiple-line selection setting the Multiple property has a value of multiple
Rows define height, cols set width ... form-control, you do not need to cols
CheckBox or radio use a label package
If the checkbox needs to be arranged horizontally, simply add the class name "Checkbox-inline" to the label label

Fixed navigation bar

The top and bottom of the main content of the page are obscured by the fixed navigation bar. To avoid fixing the navigation bar to cover the content, we need to do some processing on the body:

Body {
padding-top:70px;/* has the top fixed navigation bar when set/
padding-bottom:70px;/* have the bottom fixed navigation bar when SET * * * *
<div class= " NavBar navbar-default navbar-fixed-top "role=" navigation "> ...
</div>

In addition to this solution, we have other solutions, the fixed navigation bar is placed in front of the page content:

<div class= "NavBar navbar-default navbar-fixed-bottom" role= "navigation" > ...
</div>
<div class= "Content" > I am Contents </div>

Add the following style code to the file:

. navbar-fixed-top ~. Content {
padding-top:70px
}
. Navbar-fixed-bottom ~. Content {
padding-bottom:70px
}

The above is a small set to introduce the Bootstrap class style summary, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!