Common styles

Typesetting

title

Bootstrap, like ordinary HTML pages, defines the title with tags from < H1 > to < H6 >. However, bootstrap overrides its default style and displays the same effect in all browsers. In order to make the non heading element and the heading use the same style, six class names of. h1~.h6 are specially defined. At the same time can be followed by a line of small subtitles or use. Small

<h1>h1. Bootstrap heading<small>Subtitle</small></h1>
<div class="h1">Bootstrap Title 1<span class="small">Subtitle</span></div>

paragraph

Paragraph is another important element in typesetting. Through. lead to highlight the content (its role is to increase the text font size, bold text, and line height and margin also do the corresponding processing. You can use the following tags to highlight text:

: small

: Bold

: italics

<p class="lead"><small>Later</small><b>you</b>Meeting<i>thank</i>Now?<em>strive</em>Of<strong>you</strong></p>

emphasize

This paper defines a set of class names, which are called emphasis class names here. These emphasis classes are represented by colors. The following is the description:

. text muted: prompt, use light gray (񖓿999)

       . text primary: primary, use blue (ා428bca)

        . text success: success, use light green (ා3c763d)

        . text Info: notification information in light blue (ාf)

        . text warning: warning, use yellow (ා8a6d3b)

        . text danger: danger, use brown (ාa94442)

<div class="text-muted">Prompt effect</div>
<div class="text-primary">Main effect</div>
<div class="text-success">Successful results</div>
<div class="text-info">Information effect</div>
<div class="text-warning">Warning effect</div>
<div class="text-danger">Hazardous effects</div>

Alignment effect

Text align is often used in CSS to set the alignment style of text.

There are four main styles:

Left alignment, value left;

Center alignment, value center;

Right alignment, value right;

Align at both ends, value justify.

In order to simplify the operation and facilitate the use, Bootstrap controls the text alignment style by defining four class names:. Text left: align left. Text Center: align center. Text right: align right. Text justify: align both ends.

< p class = "text left" > I'm on the left</p>
< p class = "text center" > I center</p>
< p class = "text right" > I'm on the right</p>
The implementation principle of < p class = "text justify" > grid system is very simple. Just by defining the container size, we divide 12 parts equally (24 or 32 parts equally, but 12 parts are the most common), adjust the internal and external margins, and finally combine the media query to make a powerful responsive grid system. The grid system in Bootstrap framework is to divide the container into 12 parts</p>

list

In HTML documents, there are three kinds of list structures:

Unordered list (< UL > < li > </li></ul>)

There is a sequence table (< ol > < li > </li></ol>)

Definition list (< DL > < DT > </dt><dd>… </dd></dl>)

Go to point list

​ class="list-unstyled"

<ul class="list-unstyled">
    <li>Unordered item list I</li>
    <li>Unordered item list II</li>
</ul>

Inline list

Class = "list inline", change the vertical list to the horizontal list, and remove the bullet (number) to keep the horizontal display. It can also be said that inline lists are created for horizontal navigation.

<ul class="list-inline">
    <li>home page</li>
    <li>java college</li>
    <li>Online classroom</li>
</ul>

Definition list

Some styles have been added to the original foundation. Use the style class = "DL horizontal" to make a list of horizontal definitions: when the title width exceeds 160px, three ellipsis will be displayed.

<dl>
    <dt>HTML</dt>
    < DD > hypertext markup language < / DD >
    <dt>CSS</dt>
    Cascading style sheets is a style sheet language
</dl>
<dl class="dl-horizontal">
    HTML hypertext markup language
    Html is called hypertext markup language, which is a kind of identifying language. </dd>           
    < DT > the test title shall not exceed the width of 160px, otherwise 2 points < / dt >
    < DD > I am writing the effect of a level definition list, and I am writing the effect of a level definition list. </dd>
</dl>

code

It is often used on personal blog to display the style of code. Bootstrap mainly provides three code styles:

(1) use to display single line inline code

(2) use < pre > < pre > to display multiline block code

Style: pre scrollable (height, Max height fixed, 340px, exceeding the existing scroll bar)

(3) use to display user input code, such as shortcut key

Single line inline code

<code>this is a simple code</code>

Shortcut key

<p>use<kbd>ctrl+s</kbd>preservation</p>

Multiline block code

<!-- The code retains its original format, including spaces and line breaks -->
<pre>
public class HelloWorld {
    public static void main(String[] args){
        System.out.println("helloworld...");
    }
}
</pre>
<!-- 
    display html The code of label needs to adapt to character entity  
    Less than sign(<)To use hard coding“&lt;"To replace, greater than(>)Use“&gt;"To replace 
-->
<pre>
    &lt;ul&gt;
        &lt;li&gt;Test entity character&lt;/li&gt;
    &lt;/ul&gt;
</pre>
<!-- When the height exceeds, there will be a scroll bar -->
<pre class="pre-scrollable">
    <ol>
        <li>...........</li>
        <li>...........</li>
        <li>...........</li>
        <li>...........</li>
        <li>...........</li>
        <li>...........</li>
        <li>...........</li>
        <li>...........</li>
        <li>...........</li>
        <li>...........</li>
        <li>...........</li>
        <li>...........</li>
    </ol>
</pre>

form

Table styles

Bootstrap provides 1 basic style, 4 additional styles and 1 responsive table for tables. In the process of using bootstrap tables, you only need to add the corresponding class name to get different table styles:

Basic style

1). Table: basic table

Additional styles

1). Table striped: zebra crossing table

2). Table bordered: table with border

3). Table hover: hover over the highlighted table

4). Table condensed: a compact table with no or smaller internal distance between cells than other tables

tr, th, td styles

Five different class names are provided, each of which controls the background color of the row

<table class="table table-bordered table-hover">
    <tr class="active">
        <th>JavaSE</th>
        <th>database</th>
        <th>JavaScript</th>
    </tr>
    <tr class="danger">
        <td>object-oriented</td>
        <td>oracle</td>
        <td>json</td>
    </tr>
    <tr class="success">
        <td>array</td>
        <td>mysql</td>
        <td>ajax</td>
    </tr>
</table>

form

The main function of form is a web control used to communicate with users. Good form design can make web pages communicate with users better. Common elements in the form mainly include: text input box, drop-down selection box, radio button, check button, text field and button, etc.

form control

.form-control.Input-lg (large).input-sm (small)

Input box text

​ .form-control

<div class="col-sm-3">
    <input type="text" name="" id="" class="form-control" />
    <input type="text" name="" id="" class="form-control input-lg" />
    <input type="text" name="" id="" class="form-control input-sm" />
</div>

Drop down selection box select

Multiline selection settings: multiple="multiple"

<div class="col-sm-3">
    <select class="form-control">
        <option>Beijing</option>
        <option>Shanghai</option>
        <option>Shenzhen</option>
    </select>
    <select class="form-control" multiple="multiple">
        <option>Beijing</option>
        <option>Shanghai</option>
        <option>Shenzhen</option>
    </select>
</div>

textarea

<div class="col-sm-3">
    <textarea class="form-control" rows="3"></textarea>
</div>

Checkbox checkbox

Vertical display:. checkbox

Horizontal display:. Checkbox inline

<!-- Vertical display -->
<div>
    <div class="checkbox">
        <label><input type="checkbox" >game</label>
    </div>
    <div class="checkbox">
        <label><input type="checkbox" >study</label>
    </div>
</div>
<!-- Horizontal display -->
<div>
    <label class="checkbox-inline">
        <input type="checkbox" >game
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" >study
    </label>
</div>

Radio box radio

Vertical display:. radio

Horizontal display:. Radio inline

<!-- Vertical display -->
<div>
    <div class="radio">
        <label><input type="radio" >male</label>
    </div>
    <div class="radio">
        <label><input type="radio" >female</label>
    </div>
</div>
<!-- Horizontal display -->
<div>
    <label class="radio-inline">
        <input type="radio" >male
    </label>
    <label class="radio-inline">
        <input type="radio" >female
    </label>
</div>

Button

1) Using button to implement

Base style: btn

<button class="btn">Button</button>

Additional style: BTN primary BTN info BTN success BTN warning BTN danger BTN link BTN default

<button class="btn btn-danger">Button</button>
<button class="btn btn-primary">Button</button>
<button class="btn btn-info">Button</button>
<button class="btn btn-success">Button</button>
<button class="btn btn-default">Button</button>
<button class="btn btn-warning">Button</button>
<button class="btn btn-link">Button</button>

2) Multi label support: use a div and other production buttons

<a href="##"Class =" BTN BTN info "> a label button</a>
<span class="btn btn-success">span Label button</span>
<div class="btn btn-warning">div Label button</div>

3) Button size

Use. BTN LG,. BTN SM, or. BTN XS to get buttons of different sizes

<button class="btn btn-primary btn-xs">Super small button.btn-xs</button>
<button class="btn btn-primary btn-sm">Small button.btn-sm</button>
<button class="btn btn-primary">Normal button</button>
<button class="btn btn-primary btn-lg">Large button.btn-lg</button> 

4) Button disable

Method 1: add the disabled attribute to the tag

<button class="btn btn-danger" disabled="disabled">Disable button</button>

Method 2: add the class name "disabled" to the element tag

<button class="btn btn-danger disabled">Disable button</button>

Adding disabled in the class attribute is only disabled on the style, not really disabled this button!

Table Layout

The basic form structure comes with Bootstrap, and individual form controls automatically receive some global styles. The steps to create a basic form are listed below:

• Add role="form" to the parent < form > element.
• Place tags and controls in a < div > with a class. Form group. This is necessary to get the best spacing.
• Add class = "form control" to all text elements < input >, < textarea > and < Select >.

Horizontal form

Show form horizontal on the same line

Grid system with Bootstrap framework

<form class="form-horizontal" role="form">
    <div class="form-group">
        <label for="email" class="control-label col-sm-2">mailbox</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" placeholder="Please enter email"/>
        </div>
    </div>
    <div class="form-group">
        <label for="pwd" class="control-label col-sm-2">password</label>
        <div class="col-sm-10">
            <input type="pwd" class="form-control" placeholder="Please input a password" />
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2">
            <div class=" checkbox">
                <label>
                    <input type="checkbox" />Remember the password
                </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button class="btn btn-default">Submit</button>
        </div>
    </div>
</form>

Inline form

Display form inline in one line

Note that the label does not display, meaning: if the label is not set for the input control, the screen reader will not recognize it correctly.

<form class="form-inline">
    <div class="form-group">
        <label for="email" >mailbox</label>
        <input type="email" class="form-control" placeholder="Please enter email"/>
    </div>
    <div class="form-group">
        <label for="pwd" >password</label>
            <input type="pwd" class="form-control" placeholder="Please input a password" />
    </div>
    <div class="form-group checkbox">
        <label><input type="checkbox" />Remember the password</label>
    </div>
    <div class="form-group">
        <button class="btn btn-default">Submit</button>
    </div>
</form>

thumbnail

Thumbnails are very common in e-commerce websites. The most common place is the product list page. The implementation of thumbnail is used together with grid system. At the same time, the thumbnail can be used to match the title, description content, buttons, etc.

<div class="container">
    <div class="row">
        <div class="col-md-3">
               <div class="thumbnail">
                   <img src="img/IMG_0131.JPG" alt="...">
                   <h3>High circle</h3>
                   <p>Born in Beijing, China mainland film actress, model.</p>
                   <button class="btn btn-default">
                    <span class="glyphicon glyphicon-heart"></span>like</button>
                   <button class="btn btn-info">
                    <span class="glyphicon glyphicon-pencil"></span>comment
                </button>
               </div>
        </div>
    </div>
</div>

panel

All the default. panel component does is set the basic border and padding to contain the content.

. panel default: default style

. panel heading: panel head

. panel body: panel body content

<div class="panel panel-success">
    <div class="panel-heading">
        ......
    </div>
    <div class="panel-body">
        ......
    </div>
</div>