[Bootstrap] 7-day in-depth Bootstrap (3) CSS layout, bootstrapcss
The basis of Bootstrap's three core contents: the basic CSS layout syntax. It includes Typography, Code, Tables, Forms, Buttons, Images, and Helper Classes) and Responsive utilities ).
This section contains the following contents:
Overview
HTML5 Document Type
Since Bootstrap uses HTML 5-specific HTML elements and CSS attributes, when using Bootstrap, all HTML files must reference the DOCTYPE attribute of html5.
<!DOCTYPE html>
Mobile first
In the mobile device browser, zooming can be disabled by adding userscalable = no to the viewport meta tag.
Response Image
To enable auto scaling of the image size, Bootstrap is in step 3. added one in Version x. the img-responsive style essentially sets the maxwidth: 100%; and height: auto; attributes for the image.
Layout and link
Bootstrap sets some basic global style, typographical style, and link style for webpages.
Center container
To center a page (or element), you can simply use the. container style on the external container. Because the grid system depends on the size setting of external containers, the container style has a max-width attribute by default to limit the maximum width of the grid system.
Basic Layout
Title
Bs is the traditional title element h1 ~ H6 redefined the standard style so that the display effect is the same in all browsers.
Bs also provides h-class styles, such as. h1 styles than h1 labels. The difference is that margin-top and margin-bottom are not defined.
Text
Bs indicates the font size set globally.
Small, strong, em, cite
Text alignment in the container: text-left, text-center, text-right, text-justify
Abbreviation: abbr (the title value displayed by the mouse hover)
List
Bs provides six types of lists: normal list, ordered list, de-vertex list, inline list, description list, and horizontal description list.
The General list (ul), ordered list (ol), list-unstyled, description list, and horizontal description list are only optimized, and the effect is not obvious.
Inline list (list-inline) displays list items horizontally. Similar to horizontal menu Effects
Code
The Code style usually appears where the code needs to be referenced.
The Inline code of a single row must contain the code element.
<Kbd> the content contained in the element indicates that the content needs to be input by the user's keyboard. Generally, the content is set to input. The usage is similar to the code.
The pre element is generally used to display a large block of code segments and ensure that the original format remains unchanged. You can also apply the. pre-scrollable style on the pre element to control the maximum height of the region to 340 pixels and scroll in the y direction.
Table
Bs provides a foundation. table Style, four additional styles (. table-striped ,. table-bordered ,. table-hover ,. table-condensed) and a responsive layout. table-responsive container style.
. Table-striped style, which adds the background color settings for the line.
. Table-bordered provides a one-pixel border for all cells in the table.
. Table-hover when the mouse moves up, the corresponding part can be changed to a color, it will be very dynamic, and there is a highlighted Function
. Table-condensed: a compact table is slightly more compact than a common table. The principle is to reduce the padding of cells.
The. tableresponsive style is packaged outside the. table style to create a responsive table that will scroll horizontally on a small screen device (less than 768 pixels ).
Bs provides five basic color styles (active success info warning danger) for the tr element of the table to control the background color of tr.
Form
The core content in the bs framework. Forms provide a wide range of styles (basic, inline, and horizontal ).
Learn about two basic styles first
Form-control: Set to 100%
Form-group: sets the bottom margin to ensure that each control is displayed.
If the. form-control style is applied to select, input, and textarea elements, the display width is changed to 100%, and the placeholder color is set to #999999.
Inline form
Sometimes, we may need a form with all the controls in one row. We only need to apply a. form-inline style to a common form element.
Horizontal form
Unlike inline forms, A. form-horizontal style cannot be simply applied to form elements.
Because the. form-horizontal style changes the. form-group behavior, it will behave like a row in the raster system, so there is no need to use the. row style.
Form Control
Supports the input in the existing HTML5 syntax (such as text, password, datetime, datetime-local, date, month, time, week, number, email, url, search )., tel, and color)
Input element. The type must be declared. Otherwise, other problems may occur.
Select element. select multiple rows and set the mulitiple attribute to multiple.
The textarea element defines the rows number to define the height of the large text box, And the cols can define the width of the large text box.
The checkbox and radio elements are two very special types in the input element. Because they are often used with text display, bs performs standard display.
<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 there are few checkbox and radio content and need to be displayed horizontally, you can use checkbox-inline and radio-inline
Control status
Bs provides three status styles: Focus status (provided by default), disabled status, and verification prompt status.
The usage is the same as that of common disabled. You only need to use the disabled attribute on the disabled element. <Input... disabled>
If fieldset uses the disabled attribute, internal controls are also disabled.
When entering a form, you are often prompted whether the user's input content is valid. bs provides three styles:. has-warning,. has-error, and. has-success.
(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>
Widget size
Bs provides two styles for setting slightly larger or smaller input boxes:. input-lg and. input-sm.
Button
The button style defines 5 Standard colors, 1 default, and a link button.
Button size, which defines three types:. btn-lg,. btn-sm, And. btnxs .. The btn-block style can be filled with parent elements and does not change with the width of text characters.
Multiple tags. Three buttons a inputare supported. For compatibility, we recommend that you use the button.
Supports active and disabled statuses.
Image
Three style effects are provided. Apply the. img-rounded,. img-circle, and. img-thumbnail styles on the img tag.
During use, note that the above style does not control the image display size. Therefore, you need to apply an additional style or limit the size of the parent element to control the image display size.
IE8 and earlier versions do not support. img-rounded and. img-circle style effects.
Secondary Style
Text
Text style, bs provides one gray color and five basic standard style colors, respectively: text-muted, text-primary) text-success, text-info, textwarning, and danger red)
Text background style. bs also provides the above five text color styles (except muted styles), which are: bg-primary and bg-success), information blue (bg-info), warning yellow (bg-warning), dangerous red (bg-danger)
Secondary icon
Close the icon (floating on the right)
<button class="close">×</button> <a class="close">×</a>
Down Arrow
<span class="caret"></span>
Floating
There are generally three requirements for content floating (left floating, right floating, and center alignment), which correspond to the pull-left, pull-right, and center-block styles respectively.
Response Style
Uses the features of media queries to hide or display specific situations.
The style at the beginning of. visible-is displayed only when a certain size, while the others are hidden. The. hidden style is hidden only when a certain size, and the others are displayed.
For example:
Allows you to hide and display browsers and printers separately.
Show visble-lg only on the big screen
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
