Common Styles

Typesetting

Title

Bootstrap, like regular HTML pages, defines headings with labels <h1> to <h6>, except that Bootstrap overrides its default style and works the same as it does in all browsers.In order for Non-heading elements to use the same style as headings, six class names, from.H1 to.H6, have also been deliberately defined.You can also follow a small line of subtitles <small></small> or use small.

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

paragraph

Paragraph is one of the other important elements in typesetting.Highlighting content through.lead (which enlarges the font size, Bolds the text, and handles line heights and margin s accordingly).Text can be highlighted with the following tags:

<small>: Small Size

<b><strong>: bold

<i><em>: italics

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

Emphasize

Defines a set of class names, which are referred to here as accent class names. These accent classes are colored to represent accents. The instructions are as follows:

.text-muted: Tip, use light gray (#999)

    .text-primary: mainly, using blue (bca)

    .text-success: Success, use light green (#3c763d)

    .text-info: Notification information, using light blue (#708f)

    .text-warning: warning, use yellow (#8a6d3b)

    .text-danger: dangerous, use brown (#a94442)

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

Alignment effect

text-align is often used in CSS to achieve text alignment style settings.

There are four main styles:

Left alignment, value left;

Center alignment, value center;

Right alignment, value right;

Align both ends, value justify.

To simplify operation and facilitate use, Bootstrap controls the alignment style of text by defining four class names:.text-left: left alignment.text-center: center alignment.text-right: right alignment.text-justify: both ends alignment.

<p class="text-left">I'm on the left</p>
<p class="text-center">I center</p>
<p class="text-right">I live right</p>
<p class="text-justify">The principle of implementing a grid system is very simple. By defining the size of a container, dividing it into 12 equal parts (24 or 32, but 12 are the most common), adjusting the internal and external margins, and finally combining media queries, a powerful and responsive grid system is created.The grid system in the Bootstrap framework is to divide containers into 12 parts </p>

list

There are three main list structures in HTML documents:

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

Ordered List (<ol><li>...</li></ol>)

Definition List (<dl><dt>...</dt><dd>...</dd></dl>)

Descending List

​ class="list-unstyled"

<ul class="list-unstyled">
    <li>Unordered Item List 1</li>
    <li>Unordered Item List II</li>
</ul>

Inline List

class="list-inline". Replace the vertical list with the horizontal list, and remove the bullets (numbers) to keep the horizontal display.In other words, inline lists are created to make horizontal navigation.

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

Definition List

Add some styles to the original base and use the style class="dl-horizontal" to make a list of horizontal definitions: when the title width exceeds 160px, three ellipsis signs appear.

<dl>
    <dt>HTML</dt>
    <dd>Hypertext Markup Language</dd>
    <dt>CSS</dt>
    <dd>Cascading style sheets are a style sheet language</dd>
</dl>
<dl class="dl-horizontal">
    <dt>HTML Hypertext Markup Language</dt>
    <dd>HTML is called Hypertext Markup Language and is an identifying language.</dd>          
    <dt>Test Title cannot exceed 160px width, otherwise 2 points </dt>
    <dd>I'm writing the effects of a horizontal definition list. I'm writing the effects of a horizontal definition list.</dd>
</dl>

Code

Commonly used on personal blogs to show the style of the code.There are three main code styles available in Bootstrap:

(1) Use <code></code> to display a single line of inline code

(2) Use <pre></pre> to display multiline block codes

Style: pre-scrollable (height, max-heightfixed, 340px above scrollbar)

(3) Use <kbd></kbd> to display user input codes, such as shortcuts

Single line inline code

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

Shortcut keys

<p>Use<kbd>ctrl+s</kbd>Preservation</p>

Multiline block code

<!-- The code retains its original formatting, including spaces and line breaks -->
<pre>
public class HelloWorld {
    public static void main(String[] args){
        System.out.println("helloworld...");
    }
}
</pre>
<!-- 
    display html Label code needs to fit into character entities  
    Less than sign(<)To use hard-coded "<"To replace, greater than sign(>)Use ">"To replace 
-->
<pre>
    <ul>
        <li>Test Entity Characters</li>
    </ul>
</pre>
<!-- When the height exceeds, scrollbars exist -->
<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 Style

Bootstrap provides a table with one base style, four additional styles, and a table that supports response.When using Bootstrap tables, you can get different table styles by simply adding the corresponding class names:

Basic Styles

1). table: base table

Additional Styles

1) Table-striped: Zebra Line Table

2) table-bordered: Bordered table

3) table-hover: hover over a highlighted table

4). table-condensed: compact table with no or smaller cell spacing than other tables

tr, th, td styles

Five different class names are provided, each of which controls the line's different background colors

<table class="table table-bordered table-hover">
    <tr class="active">
        <th>JavaSE</th>
        <th>data base</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 a form is a web page control used to communicate with users. Good form design can make the web page communicate better with users.Common elements in forms include text input boxes, drop-down selection boxes, radio buttons, check buttons, text fields, and buttons.

form control

.form-control.input-lg (larger). input-sm (smaller)

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 select ion box

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>

Text field textarea

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

Check box 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 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

Base Style: btn

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

Additional styles: 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, etc. to make 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-smor.btn-xs to get buttons of different sizes

<button class="btn btn-primary btn-xs">Ultra 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 disabled

Method 1: Add disabled attribute to label

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

Method 2: Add the class name "disabled" to the element label

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

Adding disabled to the class attribute is only stylistically disabled, not really disabled!

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 parent <form>element.
• Place labels and controls in a <div>with class.form-group.This is necessary to obtain the optimal 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 your mailbox"/>
        </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 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 controls in one line

Note that label does not display, and what it means is that if you do not set label labels for input controls, screen readers will not recognize them correctly.

<form class="form-inline">
    <div class="form-group">
        <label for="email" >mailbox</label>
        <input type="email" class="form-control" placeholder="Please enter your mailbox"/>
    </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 password</label>
    </div>
    <div class="form-group">
        <button class="btn btn-default">Submit</button>
    </div>
</form>

thumbnail

Thumbnails are common on business websites, most commonly on the product list page.Thumbnails are implemented to work with grid systems.Thumbnails can also be used with titles, descriptions, buttons, and so on.

<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, an actress and model in mainland China.</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

What the default.panel component does is set the basic border and padding to include 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>