Bootstrap learning, bootstrap

Bootstrap learning, bootstrap

We can understand through thisbootstarpSome common knowledge points.

Grid

• . Row in. container or. container-fluid
• . Col-md-*,. col-lg-*,. col-xs-*, col-sm -*
• Column offset. col-md-offset -*
• Can be nested. The nested data is further divided into 12 cells.

Typographical

• h1~h6
• <small></small>
• . Lead can highlight the p section of the package.
• <mark>Internal chain highlighted Scheme
• Useless text<s>
• Inserted text<ins>
• <u>Underline
• Statement Enhancement<strong>
• <em>Italics
• Text alignment, text-left, text-center, text-right, text-justify, text-nowrap
• . Text-lowercase,. text-uppercase,. text-capitalize case and hump
• Address
• Reference:<blockquote class=".blockquote-reverse">, Multiple references<cite class="source Title">
• List<ul><li>
  Ordered<ol><li>
  No style.list-unstyled
  Internal Connection.list-inline
  Description<dl><dt><dd>, Horizontal description:.dl-horizontal
  Usetext-overflowA phrase that is too long can be truncated.
  

Code

• Internal Connection code<code>
• Used for Input<kbd>
• Multiple rows<pre>
• Variable<var>
• Program output<samp>
  

Table

• .table
• .table-stripedZebra crossing
  
• .table-bordedBox
  
• .table-hoverHover
  
• .table-condensedCompact
  
• To<tr><td>Set color:.active,.success,.info,.warning,.danger
  
• Table response:. table-responsive
  

Basic form example

Drop-down list

Static text

Disable. disabled,If it is checkbox or radio, use disabled, It is best not to use<fieldset disabled>, Cause:<A> labels are not affected.

Read-only attribute

Add color to the input boxdiv.has-success,div.has-warning,div.has-error

Add a standard value to the input box

Set the size of the output boxinput.form-control input-lg

Set the size of the output group (when there is a label ),div.form-group form-group-sm

Horizontal size is set through the grid

Button

Size.btn-lg> No description>.btn-sm>.btn-xs

Block frame 100%.btn-block

Activation status.active

Disable<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>

Disable a label<a class='diabled'>

Image text color

    <p class="text-muted">...</p>    <p class="text-primary">...</p>    <p class="text-success">...</p>    <p class="text-info">...</p>    <p class="text-warning">...</p>    <p class="text-danger">...</p>

Background Color

    <p class="bg-primary">...</p>    <p class="bg-success">...</p>    <p class="bg-info">...</p>    <p class="bg-warning">...</p>    <p class="bg-danger">...</p>

Close button

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
Use.closeTo modify<button>

Triangle

`<span class="caret"></span>`

Div floating

    <div class="pull-left">...</div>    <div class="pull-right">...</div>

Center content

<div class="center-block">...</div>
Note:

// Class.center-block {  display: block;  margin-left: auto;  margin-right: auto;}// Usage as a mixin.element {  .center-block();}

Floating cancel

<div class='clearfix'>
Description
'''Css
// Mixin itself
. Clearfix (){
&: Before,
&: After {
Content :"";
Display: table;
}
&: After {
Clear: both;
}
}

// Usage as a mixin
. Element {
. Clearfix ();
}
'''

Hide

// Classes.show {  display: block !important;}.hidden {  display: none !important;}.invisible {  visibility: hidden;}// Usage as mixins.element {  .show();}.another-element {  .hidden();}

You can use the. text-hide class or the corresponding mixin class to replace the text content of an element with a background image.

Whether to hide the response according to the screen width

1. visible -*-*
2. hidden -*

Set the display Attribute Based on the screen width.

Knowledge about components

Component font

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

Drop-down menu button group

Vertical button.btn-group-vertical

Alignment.btn-group-justified

Drop-down menu

• The key to the drop-down menu isdata-toggle='dropdown'
• Use. dropup to modify the div to implement up

Navigation

    <ul class="nav nav-tabs">      <li role="presentation" class="active"><a href="#">Home</a></li>      <li role="presentation"><a href="#">Profile</a></li>      <li role="presentation"><a href="#">Messages</a></li>    </ul>

Navigation bar path navigation

The principle is added through css: before and content
Usage:

<ol class="breadcrumb">  <li><a href="#">Home</a></li>  <li><a href="#">Library</a></li>  <li class="active">Data</li></ol>

Input group paging Tab

<span class="label label-default">Default</span><span class="label label-primary">Primary</span><span class="label label-success">Success</span><span class="label label-info">Info</span><span class="label label-warning">Warning</span><span class="label label-danger">Danger</span>

Violation

<span class="badge">

Giant Screen

<div class="jumbotron">Divide the space

Panel

. Panel
Color. panel-primary
Structure:. panel-heading,. panel-body,. panel-footer

List

. List-group Modifier<ul>

Well

Set an embedded effect. well