Bootstrap front-end framework usage Summary

Bootstrap front-end framework usage Summary
1. bootstrap Layout

Style style.css:

1. Remove the body's margin statement

2. Set the background color of the body to white.

3. Set the basic font, font size, and line height for the layout.

4. Set the global link color. The underline style is displayed only when the link is in the ": hover" status.

Title h1-h6

All title tags in HTML,

Can be used. In addition, the. h1 to. h6 class selector is provided to give the title style to the text of the inline (inline) attribute.

1. Reset the values of margin-top and margin-bottom.

2. h1 ~ After h3 is reset, all values are 20px; h4 ~ After h6 is reset, all values are 10px.

3. The Row Height of all titles is 1.1 (that is, 1.1 times the font-size), and both the text color and font inherit the color and font of the parent element.

4. Fixed the font size of titles of different levels, h1 = 36px, h2 = 30px, h3 = 24px, h4 = 18px, h5 = 14px and h6 = 12px

You can also includeLabel or an element assigned to the. small Class, which can be used to mark the subtitle.

Bootstrap heading <small> Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, too large mus. Nullam id dolor id nibh ultricies limit.

You can add a. lead class to highlight a paragraph.
<Pre>Text-muted: prompt, use light gray (#999) text-primary: primary, use blue (# 428bca) text-success: success, use light green (# 3c763d) text-info: notification Information, with light blue (# 31708f) text-warning: warning, with yellow (# 8a6d3b) text-danger: dangerous, with brown (# a94442)Text alignment Style

Text-left: left alignment text-center: center alignment text-right: right alignment text-justify: Both ENDS alignment

List

1. ul and ol <span>class=“list-unstyled“

2. ul and ol <span>class=“list-inline”

3. dl horizontal list (when the screen is greater than 768px, add the Class Name ". dl-horizontal" to have the horizontal definition list effect)

class=“dl-horizontal”

Image

The usage is very simple, you only need

 

Add the corresponding class name to the tag
Img-responsive: responsive image, mainly for responsive design

Img-rounded: rounded image img-circle: circular image img-thumbnail: thumbnail

Add and view the results by yourself ~ ~ ~

Bootstrap icon

The Bootstrap framework also provides nearly 200 different icon images, which are achieved by using the @ font-face attribute of CSS3 in combination with the font.

Any row-level element is acceptable. Generally, the span label is used as an icon container.

<Span><span class="glyphicon glyphicon-ok"></span>2. bootstrap-basic table instance

<table class="table"></table>

Striped table

The. table-striped class can be used to add a zebra stripe pattern to each row in <tbody>.

The striped table depends on the nth-child CSS selector, which is not supported by Internet Explorer 8.

Table with border

Add the. table-bordered class to add a border for the table and each cell in it.

Hover

By adding the. table-hover class, you can make each row in <tbody> respond to the mouse hover status.

Compress table

By adding the. table-condensed class, you can make the table more compact, and the padding in the cell will be halved.

Status

You can use these status classes to set colors for rows or cells.

Class description

. The color that is set when the active mouse is hovering over a row or cell. success identifies successful or positive actions. info identifies common prompts or actions. warning of the warning identifier or user attention is required. danger identifies dangerous or potentially negative actions

Response Table

Wrap any. table element in the. table-responsive element to create a responsive table that will scroll horizontally on a small screen device (less than 768px. When the screen width is greater than 768px, the horizontal scroll bar disappears.

<div class="table-responsive">      <table class="table">     ...      </table></div>

3. Basic bootstrap form instance

A separate form control is automatically assigned some global styles. All.form-controlClass<input>,<textarea>And<select>All elements are set to width: 100% by default ;. SetlabelThe elements and the previously mentioned controls are wrapped in.form-groupTo obtain the best arrangement.

<Form role = "form"> tell the secondary device (such as screen reader) that the role played by this element is a form </form> <form role = "button"> tell the device, this is a button. You can click it. In essence, it enhances semantics and component accessibility and availability. </form>

Do not mix the form combination input box groups. We recommend that you nest the input box Groups in the form group.

<form>      <div class="form-group">            <label for="exampleInputEmail1">Email address</label>             <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">       </div>       <div class="form-group">             <label for="exampleInputPassword1">Password</label>             <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">        </div>       <div class="form-group">          <label for="exampleInputFile">File input</label>             <input type="file" id="exampleInputFile">           <p class="help-block">Example block-level help text here.</p>     </div>       <div class="checkbox">             <label>               <input type="checkbox"> Check me out             </label>      </div>       <button type="submit" class="btn btn-default">Submit</button></form>

Multiple controls can be arranged in the same row:

<form class="form-inline">      <div class="form-group">            <label for="exampleInputName2">Name</label>            <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">      </div>      <div class="form-group">            <label for="exampleInputEmail2">Email</label>            <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">      </div>     <button type="submit" class="btn btn-default">Send invitation</button></form>

Horizontally arranged forms

Add a form.form-horizontalAnd use the grid class preset by Bootstrap to horizontally layout the label and control group. This will change.form-groupSo that the row in the raster system does not need to be added. row.

Single-choice and multi-choice boxes

Multiple selection box（checkbox）Used to select one or more options in the list, while（radio）Select only one option from multiple options.

SetdisabledAn appropriate style can be attached to a single or multiple selection box of an attribute. For the <label> label used in combination with multiple or single-choice labels, If You Want To hover the cursor over the label to a "do not click" style, assign the. disabled class. Radio,. radio-inline,. checkbox,. checkbox-inline, or <fieldset>.

Multiple selection box:

<div class="checkbox">      <label>          <input type="checkbox" value="">        Option one is this and that—be sure to include why it's great       </label></div><div class="checkbox disabled">      <label>            <input type="checkbox" value="" disabled>            Option two is disabled      </label></div>

Single region:

<div class="radio">      <label>            <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">        Option two can be something else and selecting it will deselect option one      </label></div><div class="radio disabled">      <label>            <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>            Option three is disabled      </label></div>

By applying the. checkbox-inline or. radio-inline class to a series of multi-choice box or single-choice (radio) controls, these controls can be arranged in one row.

Refer to the blog post: How to Use the bootstrap framework?