[Bootstrap]7 Day Deep Bootstrap (3) CSS layout

Bootstrap is the base of the three core content, that is, the basic CSS layout syntax. It includes basic typography (typography), Code, tables (Tables), Forms (Forms), buttons (Buttons), pictures (Images), helper Classes (helper Classes), and responsive design (responsive Utilities).

This program is recorded:

• Overview
• Basic layout
• Code
• Form
• Form
• Button
• Image
• Auxiliary styles

Overview

HTML5 Document Type

Since Bootstrap uses HTML5-specific HTML elements and CSS properties, all HTML files need to refer to the DOCTYPE property of HTML5 at the top of the bootstrap when using it.

<! DOCTYPE html>
Mobile First
On a mobile device browser, you can disable its zoom (zooming) function by Userscalable=no added to the viewport meta tag.
Responsive picture
In order to be able to adjust the size of the image of the adaptive scaling, bootstrap in the 3.x version of the addition of a. Img-responsive style, the essence is to set the picture maxwidth:100%; Height:auto; properties
Typography and Links
Bootstrap has set some basic global styles, typography, and link styles for the Web page.

 
 

  
  
 
   
The margin setting is canceled on the BODY element and the default is 0,margin:0.
 
   
Set the background color to white on the BODY element, Background-color: #ffffff.
 
   
Standard values for font, font size, and line spacing used in layout typography
 
  
 
 
Center Container
A page (or element) to be centered, can be easily applied on an external container. Container style. Because the raster system relies on the size setting of the external container, by default the container style has a max-width property to limit the maximum width of the grid system
Basic layout
Title
BS has redefined the standard style for the traditional title element H1~h6, making the display all the same in all browsers.
BS also provides styles for class H, such as the style of. H1, unlike the H1 label styles, which are not defined by Margin-top and Margin-bottom.
Text
BS is the font size that is set globally.
Small, strong, EM, cite
Text alignment within the container: Text-left, Text-center, Text-right, text-justify
Abbreviation: abbr (mouse hover display title value)
List
BS provides 6 forms of lists, namely: Normal list, ordered list, go to point list, inline list, description list, and horizontal description list.
General List (UL), sequence list (OL), go to Point list (list-unstyled), description list, horizontal description list, just optimize, the effect is not obvious.
The inline list (list-inline) displays the list items horizontally. Similar horizontal menu effects
Code
Code styles typically appear where you need to reference your code
Inline code for a single line needs to use the code element to contain
The <kbd> element contains content that indicates that the content requires user keyboard input, so it is generally set to input, using a similar code
The pre element is typically used to display chunks of code and to ensure that the original format is unchanged. You can also apply the. pre-scrollable style to the pre element, you can control the maximum height of the area to 340 pixels, and you can scroll in the y direction
Form
BS provides 1 foundations. Table Style, 4 additional styles (. table-striped,. table-bordered,. Table-hover,. table-condensed) and a. Table-responsive container style that supports responsive layouts.
The. table-striped style, which adds a setting for interlaced plus background color.
. table-bordered provides 1 1-pixel-wide borders for all cells in the table
. table-hover when the mouse moves up the corresponding part can be changed color, it will appear to be very dynamic, and has the function of highlighting
. table-condensed compact table, the table display is slightly more compact than the normal table, the principle is to reduce the cell padding
The. Tableresponsive style is wrapped outside the. Table style to create a responsive table that scrolls horizontally on a small screen device (less than 768 pixels)
BS provides 5 basic color styles for the TR element of the table (active Success Info warning danger), which controls the background color of the TR.
Form
The core content in the BS framework, the form provides a rich style (base, inline, landscape).
Learn 2 basic styles First
Form-control: Set to 100%
Form-group: Set the bottom margin to ensure that each control is displayed.
If the. Form-control style is applied on the Select, input, textarea elements, the displayed width becomes 100% and the placeholder color is set to #999999
Inline form
Sometimes, we may need a form with all the controls on one line, just apply one on the normal form element. Form-inline Style
Landscape forms
Unlike inline forms, it is not possible to simply apply a. Form-horizontal style to a FORM element.
Because the. Form-horizontal style has changed. The behavior of the. Form-group behaves as if it were a row in a grid system, so it is no longer necessary to use the. Row style.
form controls
Input is supported under existing HTML5 syntax (such as type text, password, datetime, datetime-local, date, month, time, week, number, email, URL, Elements of Search, tel, and color)
INPUT element, the type must be declared, otherwise it may cause other problems
Select element, multiline selection setting mulitiple property to multiple
The textarea element defines the rows number to define the height of the large text box, and defines the cols to define the width of the large text box
The checkbox and radio elements, which are two very special type in the INPUT element, are displayed as a standard, as often paired with text.
    <div class= "Radio" >        <label><input name= "opt" type= "Radio"/>on</label>    </div >    <div class= "Radio" >        <label><input name= "opt" type= "Radio"/>off</label>    </div>    <div class= "checkbox" >        <label><input type= "checkbox"/>swing</label>    </div>    <div class= "checkbox" >        <label><input type= "checkbox"/>runing</ Label>    </div>
When the checkbox and radio content is very small, you can use Checkbox-inline and radio-inline when you need to display horizontally.
control state
BS provides a 3-state style that is available in the focus state (provided by default), disabled state, and validation prompt status.
Using the same method as normal disabled, you only need to use the Disabled property on the disabled element. <input ... disabled>
FieldSet if the Disabled property is used, the internal controls are also disabled.
When filling out a form, it is often important to prompt the user for the legality of their input, and BS provides. has-warning,. Has-error,. has-success three styles.
(The Has-feedback style on the parent container is used to set the positioning method; the Form-control-feedback style on the small icon element is used to set the display size of the icon)
<div class= "Form-group has-success has-feedback" >                <label class= "Control-label" for= "name" >User Name: </label>                <input type= "text" class= "Form-control" id= "name"/>                <span class= "Glyphicon Glyphicon-ok Form-control-feedback "></span></div>
　　
Control size
BS provides two styles for setting a slightly larger or smaller input box, respectively:. INPUT-LG and. Input-sm
Button
A button style that defines a standard 5 colors, a default, and a link button.
Button size, define 3 kinds of. Btn-lg,. Btn-sm,. BTNXS: The Btn-block style can be filled with the parent element without changing the width of the text character.
Multi-label, support button a INPUT3 tags. For compatibility, it is highly recommended to use the button.
Supports active and disabled states.
Image
Available in 3 style effects, apply the. img-rounded,. img-circle,. Img-thumbnail style to the IMG tag.
It is important to note that the above styles do not control the display size of the picture, so you need to apply additional styles or limit the parent element size to control the picture display size.
IE8 and the following versions do not support. img-rounded and. Img-circle style effects.
Auxiliary styles
The text style, BS provides 1 shades of gray, and 5 basic standard styles, namely: Soft Grey (text-muted), main blue (text-primary), Success Green (text-success), Information Blue (text-info), Warning Yellow (textwarning), Dangerous Red (Text-danger)
Text background style, BS also provides the above 5 kinds of text color style corresponding (except muted style), namely: Main Blue (bg-primary), Success Green (bg-success), Information Blue (bg-info), Warning yellow (bg-warning), Dangerous Red (Bg-danger)
Secondary icon
Close icon (right float)
        <button class= "Close" >x</button>        <a class= "Close" >x</a>
Down ARROW
<span class= "Caret" ></span>
Floating
For content floating, there are generally 3 requirements (left float, right float, center align), corresponding to Pull-left, Pull-right, and Center-block styles respectively.
Responsive style
Use the features of media queries to hide or display settings for specific situations.
The style at the beginning of the. visible-is displayed only at a certain size, while the others are hidden; the. Hidden style indicates that only one dimension is hidden and the others are displayed.
Such as:
Provides settings for hiding and displaying browsers and printers separately Visible-print and Hidden-print
Show Visble-lg only on the big screen
[Bootstrap]7 Day Deep Bootstrap (3) CSS layout