<p class="lead"><small>After the</small><b>you</b>will<i>Thank you</i>now<em>Efforts to</em>the<strong>you</strong></p>
Copy the code

Emphasis on

A set of class names is defined, which are called emphasis class names. These emphasis classes are emphasized by color, with the following description:

. Text-intensive: note, light grey (#999)

.text-primary: primary, use blue (# 428bca). Text-success: use light green (# 3C763D). Text-info: use light blue (# 31708f). Text-warning: Warning, use yellow (#8a6d3b). Text - Danger: Use brown (#a94442)Copy the code

<div class="text-muted">Prompt effect</div>
<div class="text-primary">The main effect of</div>
<div class="text-success">Successful effect</div>
<div class="text-info">Effect of information</div>
<div class="text-warning">Warning effect</div>
<div class="text-danger">Dangerous effect</div>
Copy the code

Alignment effect

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

There are four main styles:

Left-aligned, the value left;

The value is center.

Right aligned, right;

Justify both ends with the value justify.

To simplify and justify text, Bootstrap defines four class names:.text-left: left-justify. Text-center: center justify. Text-right: justify right.

<p class="text-left">I left</p>
<p class="text-center">I'm in the middle</p>
<p class="text-right">I'm in the right</p>
<p class="text-justify">The realization principle of the grid system is very simple, just by defining the size of the container, dividing it into 12 parts (there are also 24 or 32 parts, but 12 is the most common), adjusting the margins inside and outside, and finally combining the media query, a powerful responsive grid system is made. The grid system in the Bootstrap framework splits the container into 12 pieces</p>
Copy the code

The list of

In HTML documents, there are three main list structures:

Unordered list (

• …

)

Ordered list (

1. …

)

Define a list (

…

…

)

To the point list

​ class=”list-unstyled”

<ul class="list-unstyled">
    <li>Unordered item list one</li>
	<li>Unordered item list two</li>
</ul>
Copy the code

Inline list

Class =”list-inline”, changes the vertical list to a horizontal list, and removes the bullet (number), keeping the horizontal display. It could also be said that inline lists are made for horizontal navigation.

<ul class="list-inline">
	<li>Home page</li>
	<li>Institute of Java</li>
	<li>Online classroom</li>
</ul>
Copy the code

Define a list

Add some styles to the base and make a list of horizontal definitions using the style class=” DL-horizontal “: three ellipses will be displayed when the header width exceeds 160px.

<dl>
	<dt>HTML</dt>
	<dd>Hypertext Markup Language</dd>
	<dt>CSS</dt>
	<dd>Cascading style sheets is a style sheet language</dd>
</dl>
<dl class="dl-horizontal">
    <dt>HTML Hypertext Markup language</dt>
    <dd>HTML, called hypertext Markup Language (HTML), is an identifier language.</dd>		   
    <dt>The test header must not be more than 160px wide, or 2 dots</dt>
    <dd>I'm writing the effect of a horizontally defined list.</dd>
</dl>
Copy the code

code

It is often used on personal blogs to show the style of the code. Bootstrap provides three main code styles:

(1) Used to display a single line of inline code

(2) Use

To display multiple lines of block code

Style: pre-scrollable (height,max-height fixed at 340px, over existing scrollbar)

(3) used to display user input codes, such as shortcut keys

Single line of inline code

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

shortcuts

<p>use<kbd>ctrl+s</kbd>save</p>
Copy the code

Multi-line block code

<! -- The code will retain its original format, including Spaces and newlines -->
<pre>
public class HelloWorld {
	public static void main(String[] args){
		System.out.println("helloworld...");
	}
}
</pre>
<! -- The code that displays HTML tags needs to accommodate character entities less than (<) using hard-coded "&lt;" Instead, the greater than sign (>) uses ">;" To replace -- -- >
<pre>
	&lt;ul&gt;
		&lt;li&gt;Test entity character&lt;/li&gt;
	&lt;/ul&gt;
</pre>
<! -- When the height is exceeded, there is 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>
Copy the code

form

Table style

Bootstrap provides one base style and four additional styles for tables, as well as one responsive table. When using the Bootstrap table, you only need to add the corresponding class name to get different table styles:

Basic style

1). Table: basic table

Additional style

1). Table-striped: table of zebra crossing

2).table-bordered: table with border

3). Table-hover: hover a highlighted table

4). Table -condensed: a compact table, in which cells have no or smaller space than other tables

Tr, TH, TD styles

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

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

The form

The main function of the form is to communicate with the user to do a web control, good form design can make the web page and the user better communication. Common elements in forms include text input fields, drop-down selection boxes, radio buttons, check buttons, text fields, and buttons.

The form controls

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

The input text box

​ .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>
Copy the code

Drop down the select box

Multiple line 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>
Copy the code

Text fields textarea

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

Checkbox checkbox

Vertical display:.checkbox

Horizontal display:.checkbox-inline

<! -- Vertical display -->
<div>
    <div class="checkbox">
        <label><input type="checkbox" >The game</label>
    </div>
    <div class="checkbox">
        <label><input type="checkbox" >learning</label>
    </div>
</div>
<! -- Horizontal display -->
<div>
    <label class="checkbox-inline">
        <input type="checkbox" >The game</label>
    <label class="checkbox-inline">
        <input type="checkbox" >learning</label>
</div>
Copy the code

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>
Copy the code

button

1) Use button implementation

Base style: BTN

<button class="btn">button</button>
Copy the code

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>
Copy the code

2) Multi-label support: use a div to make buttons

<a href="# #" class="btn btn-info">A Label button</a>
<span class="btn btn-success">Span button</span>
<div class="btn btn-warning">Div tag button</div>
Copy the code

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> 
Copy the code

4) Button is disabled

Method 1: Add the Disabled attribute to the tag

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

Method 2: Add the class name “Disabled” to the element tag

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

Adding disabled to the class property is just style-disabling, not actually disabling the button!

The form 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 to the parent elementrole=”form”.
• Put labels and controls in a class.form-group 的
  In the. This is necessary for optimal spacing.
• To all text elementsAnd add class =”form-control”.

The level of form

The same row shows the form-horizontal

Mesh system with Bootstrap framework

<form class="form-horizontal" role="form">
	<div class="form-group">
		<label for="email" class="control-label col-sm-2">email</label>
		<div class="col-sm-10">
			<input type="email" class="form-control" placeholder="Please enter email address"/>
		</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 enter your 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>
Copy the code

The inline form

Displays the controls of the form in a line form-inline

Note that label is not displayed for this purpose: If you do not set the label label for the input control, the screen reader will not recognize it correctly.

<form class="form-inline">
	<div class="form-group">
		<label for="email" >email</label>
		<input type="email" class="form-control" placeholder="Please enter email address"/>
	</div>
	<div class="form-group">
		<label for="pwd" >password</label>
			<input type="pwd" class="form-control" placeholder="Please enter your 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>
Copy the code

The thumbnail

Thumbnails are common on e-commerce sites, and the most common place is on product listings. Thumbnail implementations are used in conjunction with the grid system. You can also use thumbnails with titles, descriptions, buttons, etc.

<div class="container">
	<div class="row">
		<div class="col-md-3">
	   		<div class="thumbnail">
	   			<img src="img/IMG_0131.JPG" alt="...">
	   			<h3>gao</h3>
	   			<p>Born in Beijing, She is 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>comments</button>
	   		</div>
		</div>
	</div>
</div>
Copy the code

panel

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

.panel-default: the default style

.panel-heading: panel head

.panel-body: indicates the body of the panel

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

The BootStrap plug-in

navigation

Use drop-down and button combinations to create navigation

Key points:

Nav + "nav-tabs" and "nav-pills" 1) Nav-tabs navigation 2) and nav-pills navigation 3) and nav-stacked navigation 4) and nav-justified navigation 5) and breadcrumb navigation using separate style. It is not used with nav, but can be added to OL or UL directly. It is generally used for navigation, mainly used to tell users the current position of the page (current position) 3, Status: 1), selected status active style 2), disabled status: Disable 4, secondary menuCopy the code

Label navigation

<p>Tabbed navigation menu</p>
<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">SVN</a></li>
  <li><a href="#">iOS</a></li>
  <li><a href="#">VB.Net</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">PHP</a></li>
</ul>
Copy the code

Capsule navigation

<p>Basic capsule navigation menu</p>
<ul class="nav nav-pills">
	<li class="active"><a href="#">Home</a></li>
	<li><a href="#">SVN</a></li>
	<li><a href="#">iOS</a></li>
	<li><a href="#">VB.Net</a></li>
	<li><a href="#">Java</a></li>
	<li><a href="#">PHP</a></li>
</ul>
Copy the code

Paging navigation

Paging is everywhere, divided into page number navigation and page-turning navigation

Page navigation: ul labels to add pagination [pagination – lg | pagination – sm]

Page navigation: Add pager to UL label

paging

<ul class="pagination">
	<li><a href="#">&laquo;</a></li>
	<li><a href="#">1</a></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	<li><a href="#">5</a></li>
	<li><a href="#">&raquo;</a></li>
</ul>
Copy the code

Turn the page

<ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
</ul>
Copy the code

The drop-down menu

When using the drop-down menu of the Bootstrap framework, you must use two JS

<! If you want to use the Bootstrap JS plugin, you must first call in jQuery.
<script src="Js/jquery - 3.4.1 track. Js"></script>
<! -- Includes all bootstrap JS plugins or js plugins that can be used as needed -->
<script src="js/bootstrap.min.js"></script>
Copy the code

Key points:

1. Wrap the entire dropdown with a div class named dropdown or bTN-group:<div class="dropdown"></div>3. Use button as the parent menu and use the class name dropdown-toggle and custom data-toggle attributes<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"></button>4. Create a drop-down arrow using font in button<span class="caret"></span>Use a ul list for dropdown menu items and define a class named "Dropdown menu".<li>Add the class name "divider" to enable the function of adding drop-down dividers. 7. Group title: li Add the class name "dropdown-header" to enable the group. 1), dropdown-menu-left left-aligned default style 2), dropdown-menu-right right-aligned 9, active state (.active) and disabled state (.disabled)Copy the code

<! Dropdown = dropdown; dropdown = dropdown; dropup =.dropup
<div class="dropdown ">
    <! -- Use button as parent menu, use class name: Dropdown-toggle and custom data-toggle attributes -->
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Like channel<span class="caret"></span><! -- Drop down arrow -->
    </button>
    <! Dropdown menu uses a ul list and defines a class named dropdown menu-->
    <ul class="dropdown-menu">	 <! --dropdown-menu-right -->
        <! Dropdown-header = dropdown-header = dropdown-header = dropdown-header
        <li class="dropdown-header">- science -</li>
        <li>
            <a href="#">Man and nature</a>
        </li>
        <! <li> Add the name of the "divider" class to add the drop-down divider -->
        <li class="divider"></li>
        <li class="dropdown-header">- funny -</li>
        <li>
            <a href="#">Jolly comedian</a>
        </li>
        <li>
            <a href="#">Happy Camp</a>
        </li>
        <li class="divider"></li>
        <li class="disabled">	<! -- Disabled state -->
            <a href="#">Big Bang Theory</a>
        </li>
    </ul>
</div>
Copy the code

Modal dialog

A Modal box is a child form overlaid on top of a parent form. Typically, the goal is to display content from a single source, allowing for some interaction without leaving the parent form. Child forms can provide information, interaction, and so on.

usage

1. With the data attribute: Set the property data-toggle=” Modal “on a controller element (such as a button or link), Also set data-target=”#identifier” or href=”#identifier” to specify the particular modal box to switch (with id=”identifier”).
2. Through JavaScript: With this technique, a modal box with id=”identifier” can be called through JavaScript:

$('#identifier').modal(options);
Copy the code

The instance

<h2>Create a Modal box</h2>
<! -- Button trigger modal box -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Start demonstrating the modal box</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Modal box headings</h4>
            </div>
            <div class="modal-body">Add some text here</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Shut down</button>
                <button type="button" class="btn btn-primary">Commit the changes</button>
            </div>
        </div><! -- /.modal-content -->
    </div><! -- /.modal -->
</div>
Copy the code

methods