1, title,

to

, all headings are 1.1 line height (i.e. 1.1 times font-size).

2. Subheadings

, row height is 1, gray (#999).

<h1>Main title<small>subtitle</small>
</h1>
Copy the code

3. Body style

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: # 333;
    background-color: #fff;
}
Copy the code

4,

, paragraph style

p { margin: 0 0 10px; }
Copy the code

5. Emphasize style. Lend

.lead {
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 200;
    line-height: 1.4;
}
Copy the code

6, Bold , 

b.strong {
    font-weight: bold; /* Text bold */
}
Copy the code

7, italic < I >,

and are generally shown to crawlers (emphasis on semantics), while < I > and are shown to users (emphasis on visual effects).

8. Font color

.text-intensive: light grey (#999). Text-primary: blue (# 428bCA). Text-success: light green (# 3c763D). Text-info:. Text – Warning: warning, use yellow (#8a6d3b). Text – Danger: Danger, use brown (#a94442).

9. Text alignment

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}

.text-justify {
    text-align: justify;
}
Copy the code

10, The list goes to.list-unstyled

.list-unstyled {
    padding-left: 0;
    list-style: none;
}
Copy the code

11, horizontal navigation. List-inline

.list-inline {
    padding-left: 0;
    margin-left: -5px;
    list-style: none;
}

.list-inline > li {
    display: inline-block;
    padding-right: 5px;
    padding-left: 5px;
}
Copy the code
<ul class="list-inline">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
Copy the code

12. Define lists

<dl>
    <dt>Subject to a</dt>
    <dd>Content of a</dd>
    <dt>Topic 2</dt>
    <dd>Content of the two</dd>
</dl>
Copy the code

Horizontal definition list. Dl-horizontal.

13. Enter the code style

(1) : generally refers to the code of a single word or sentence (2) 

 : generally refers to the code of multiple lines (that is, the code of blocks) (3) < KBD > : generally refers to the content that the user needs to input through the keyboard

14. Table styles

Table: basic table- indispensable. Table-striped table. Table-bordered table. Table-hover: highlighted table- can be used in conjunction with other table styles. Table – Responsive form – small screen add scroll bar

Table background color

15. Basic forms

Role is an HTML5 attribute where role=”form” tells an assistive device (such as a screen reader) that the role the element plays is a form.

16. Horizontal forms

The name of the class. The form – horizontal

17. Inline forms

<div class="form-group">
  <label >QQQ</label>
  <input type="">
</div>
Copy the code

18, input box input

Input type – email

The email input type is used for the input field that should contain an email address.

When the form is submitted, the value of the email field is automatically validated.

19, checkbox and single select button radio

.checkbox

<div class="checkbox">
    <label>
      <input type="checkbox" value="">
      QQQ
    </label>
</div>
Copy the code

.radio 

<div class="radio">
    <label>
      <input type="radio" value="love" checked>
      CCC
    </label>
</div>
Copy the code

Level display

<div class="form-group">
    <label class="radio-inline">
        <input type="radio" value="mazey" name="mazey">men</label>
    <label class="radio-inline">
        <input type="radio" value="mazey" name="mazey">neutral</label>
    <label class="radio-inline">
        <input type="radio" value="mazey" name="mazey">women</label>
</div>
Copy the code
  1. ifcheckboxIt needs to be horizontally arranged. It just needs to be inlabelAdd the class name to the tagcheckbox-inline.
  2. ifradioIt needs to be horizontally arranged. It just needs to be inlabelAdd the class name to the tagradio-inline.

20. Form control size – Change height only

  1. input-sm: Makes the control smaller than normal
  2. input-lg: Makes the control larger than normal

21. Form validation status

  1. .has-warning: Warning status (yellow)
  2. .has-error: Error status (red)
  3. .has-success: Success status (green)

Has-feedback should be added to the check mark

<div class="form-group has-success has-feedback">
      <label class="control-label" for="qqq">The E-mail address</label>
      <input type="text" class="form-control" id="qqq" placeholder="qqq">
      <span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
Copy the code

Form prompt text.help-block

<div class="form-group has-error has-feedback">    
    <label class="control-label" for="inputError1">Error status</label>
    <input type="text" class="form-control" id="inputError1" placeholder="Error state">
    <span class="help-block">The information you entered is wrong</span>
    <span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
Copy the code

22. Button styles

. BTN,. Btn-default can be used in tags such as a, SPAN, and div.

<button class="btn" type="button">Base button. BTN</button>
<button class="btn btn-default" type="button">Default button bTN-default</button>
<button class="btn btn-primary" type="button">Main button. Btn-primary</button>
<button class="btn btn-success" type="button">Success button bTN-success</button>
<button class="btn btn-info" type="button">Info button bTN-info</button>
<button class="btn btn-warning" type="button">Warning button bTN-warning</button>
<button class="btn btn-danger" type="button">BTN - Danger Button</button>
<button class="btn btn-link" type="button">Link button bTN-link</button>
Copy the code

HTML

  • submitThis button is the submit button (the default value for all browsers except Internet Explorer).
  • buttonThis button is a clickable button (the default for Internet Explorer).
  • resetThis button is the reset button (clears form data)

23. Button size

<button class="btn btn-primary btn-lg" type="button">Large button. Btn-lg</button>
<button class="btn btn-primary" type="button">Normal button</button>
<button class="btn btn-primary btn-sm" type="button">Small button. Btn-sm</button>
<button class="btn btn-primary btn-xs" type="button">Super small button. Btn-xs</button>
Copy the code

24. Block buttons

.btn-block fills the entire container (parent element) with the button.

25. Button state

When a button handles the clicking state (that is, the mouse-pressed state), this is done with the :active pseudo-class for

Disabled

Disabled =”disabled” With class disable may have disable style, but no disable effect, can still be clicked.

26, images,

  1. img-responsive: Responsive images, mainly for responsive design
  2. img-rounded: Rounded picture
  3. img-circle: Round picture
  4. img-thumbnail: Thumbnail image

Since styles do not limit the size of images, they need to be used in other ways to handle image sizes. For example, control the image container size. (Note that you cannot change the size of the IMG image directly by using CSS styles, so the operation will not respond.) For rounded corner images and round image effects, because the CSS3 rounded corner style is used to achieve, so note that IE8 and its later versions do not support rounded corner effects.

27, icon

The icon mentioned here is the small icon icon often seen in Web production, it can be said that these small icon ICONS are an indispensable part of an excellent Web, play a finishing touch effect. Bootstrap framework also provides nearly 200 different icon images, and these ICONS are realized using CSS3 @font-face attribute and font effect.

<span class="glyphicon glyphicon-search"></span>
<span class="glyphicon glyphicon-asterisk"></span>
<span class="glyphicon glyphicon-plus"></span>
<span class="glyphicon glyphicon-cloud"></span>
Copy the code

And Font Awesome.

Custom icon website: www.runoob.com/try/demo_so…

Appendix:

Read the original article: blog.mazey.net/1923.html