Home > Developer > Web Develop
CSS Layout
1) When using bootstrap, all HTML files need to refer to the HTML5 DOCTYPE property at the top of the
<! DOCTYPE html>
...
2) The new Bootstrap is a mobile-first frameset that can be found in the entire frameset, and the Zoom (zooming) feature can be disabled on the mobile device browser through the user-scalable=no added for the viewport meta tag. When the zoom feature is disabled, users can only scroll the screen.
3) Bootstrap added a. Img-responsive style to the 3.x version, which essentially sets the max-width:100% for the picture, and height:auto; property so that the picture is scaled proportionally and does not exceed the size of its parent element.
4) Bootstrap has set some basic global style, layout and link style for the webpage, 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.
All default basic styles can be found in the normalize.less and scaffolding.less files.
5) NORMALIZE.CSS is a CSS library designed to set the default CSS properties of different browsers to a uniform effect, so that developers can access or set page elements in a more standard way.
6) 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 that restricts the maximum width of the grid system. The max-width size of the container is related to the maximum resolution of the device.
Basic layout
1) Title: Bootstrap for the traditional title element H1~h6 redefined the standard style, so that all browsers display the same effect,
Bootstrap also defines 6 class styles (. h1~.h6) synchronously, so that the same style is used under non-heading elements, except that the class style does not define margin-top and Margin-bottom.
2) Page Theme
By default, Bootstrap is globally set to a font size of font-size of 14 pixels, and the spacing line-height is 1.428 times times the font size (that is, 20 pixels). This setting applies to the <body> element and all paragraphs.
The paragraphs within the <p> element will have an extra margin-bottom, which is half the line spacing (default is 10px).
If you want a paragraph to be highlighted, you can use the. Lead style, which is primarily about increasing font size, weight, line spacing, and margin-bottom.
The default values for the bootstrap layout settings are stored in the two less variables in the variables.less file: @font-size-base and @line-height-base. The system uses these two values by default to generate the corresponding margin, padding, and line-height for the entire page. Make your own version of bootstrap by modifying both values and then recompiling.
3) Emphasis on text
Bootstrap implements a lightweight implementation of the default text accent elements, which are: small, strong, EM, cite.
4) Abbreviations
Bootstrap implements the function of the abbreviation on the abbr element, that is, when the mouse moves to the abbreviation, it displays the attribute value declared in the title. The effect is: there is a dashed line under the acronym, and the mouse moves to the abbreviation with a hand icon.
5) Address Element
Bootstrap defines a simple and common style for address element addresses, which are mainly line spacing and margin at the bottom.
6) References
References in the <blockquote> element can refer to any HTML content, but it is generally recommended to use <p>.
If you want to add some text to the source as a comment, you can use the small and cite elements together.
The bootstrap also provides a. pull-right style for right-aligned to fit different typesetting styles.
7) List
Bootstrap defines a list-inline style for implementing inline lists, that is, displaying list items horizontally,
Bootstrap provides a dl-horizontal style that enables the list to be displayed horizontally by applying the class to the DL element.
Code
Bootstrap provides the following 3 ways to display code:
Display single-line inline code using the <code> element
Display user input codes using the <kbd> element
Use the <pre> element to renaissance multiple lines of code, you can apply the. pre-scrollable style to the pre element, you can control the area to a maximum height of 340 pixels, and you can scroll in the y direction.
Form
Bootstrap provides 1 foundations. Table Style, 4 additional styles (. table-striped,. table-bordered,. Table-hover,. table-condensed), and one support responsive layout The. Table-responsive container style.
1). Table style has 3 main functions: Increasing the padding of the cell, setting a thick line of 2 pixels at the bottom of the THEAD, and 1 lines of 1 pixels at the top of each row of records.
2) The Background stripe table, which is based on the existing. Table Style, applies a. table-striped style, which adds a setting of interlaced plus background color.
3) Bootstrap provides 1 1-pixel-wide borders for all cells in the table. Use the following methods:
<table class= "Table table-bordered" >
......
</table>
4) on the record in the table, when the mouse moves up the corresponding part can be changed color, it will appear to be very dynamic, and has highlighted the function. Bootstrap certainly will not miss this highlight, which offers a. table-hover style.
5) Compact table, that is, the table display is a little more compact than the normal table, the principle is to reduce the internal margin of the cell. Use the following methods:
<table class= "Table table-condensed" >
......
</table>
6) Bootstrap provides 5 additional styles for the TR element of the table to control the background color of the TR.
In addition to the active style, the other 4 styles are used together with the. Table-hover style, and the bootstrap also sets the color of the mouse hover highlighting accordingly.
7) Bootstrap also provides a responsive design container (. Table-responsive style) that wraps the. Table-responsive style outside of the. Table style to create a responsive table that is on a small screen device (less than 768 pixels ) to scroll horizontally. The horizontal scroll bar disappears when the screen is larger than 768 pixels wide.
Form
1) 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.
2) apply a. Form-inline style to the normal form element to set the elements inside the form to inline styles. The only factor on the horizon is to control how the element is displayed as Display:inline-block, so you only need to set the display property for the corresponding child element. However, it is important to note that the. Form-inline style can only be applied on browsers larger than 768 pixels.
Because the default style is. Form-control, and its input, select, and textarea widths are all 100%, it is not valid when using inline forms, and you need to set width widths separately for these control elements, or outside Plus a layer of DIV elements with a. Form-group style.
If you do not set a label for each input control, the screen reader will not recognize it correctly. For this inline form, you can hide it by setting the. Sr-only style for the label.
3) Form Controls
INPUT element: Type must be declared,
Select element: The drop-down list select element is used in the same way as the original, and the multiline selection setting mulitiple property is multiple.
TEXTAREA element: Defines cols to define the width of a large text box. However, if the. Form-control style is applied on the frame, the Cols property does not work,
CheckBox and radio: usually with the label text in the process of use, but usually there is a problem with the left and right margin misalignment. To do this, each input is wrapped with a label and wrapped in a container element at the outermost layer and applied with the. CheckBox and. Radio style. Some checkboxes or radio elements have very few text, may need to be displayed horizontally, and the corresponding inline style is provided for this bootstrap. Checkbox-inline and. Radio-inline,
4) control state
Focus State: The implementation is to remove the default outline style on the selector: Focus, reapply a new Box-shadow style, and thus achieve a soft shaded border (note that the effect must use the. Form-control style) When the focus state is applied.
Disabled state: The main implementation is to improve the default disabled state display state, using the same way as normal disabled, only need to use the disabled attribute on the disabled element.
Validation hint Status: Bootstrap provides the. has-warning,. Has-error,. has-success three styles for the contents of the warning (yellow), error (red), and successful (green) context, respectively. If you want to provide a small icon of the corresponding state when validating, Bootstrap provides a special feedback style for this function, 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 Lets you set the display size of the icon, and so on.
5) Control Size
Bootstrap provides two styles for setting slightly larger or smaller input inputs, respectively:. INPUT-LG and. Input-sm. Input-lg and. INPUT-SM styles not only for input, but also for Select and TEXTAREA elements.
6) Other
Bootstrap also provides a help-block style for displaying block-level help tips in a form.
Button
1) button style
The bootstrap provides 7 styles of button styles by default,
Use the following:
<button type= "button" class= "btn Btn-default" > Default </button>
<button type= "button" class= "Btn btn-primary" > Primary </button>
2) button size
There are 3 styles available in the 2.x series:. Btn-large,. Btn-small, Btn-mini. The current version renames these styles to. btn-lg,. Btn-sm,. Btn-xs. These styles can be combined with btn color styles.
Bootstrap alone provides us with a block-level style ——. the Btn-block button, which does not automatically scale with text, it does not have padding and margin values, but is filled with the parent container.
3) multi-label support
BTN related elements not only support the normal button element, but also support the A and input elements, which apply the BTN style to produce the same display effect.
4) Activity Status
When the button is active, it behaves as if it were pressed (a deeper background, a darker border, and a built-in shadow). For the <button> element, this is done by: active, and for the <a> element, it is implemented through. Active. However, it can also be used in conjunction with: Active and <button>, and programmatically to make it active.
Active is a pseudo-class, so it is supported by default without adding <button> elements. However, if you want to show the appearance of the active state when the page is loaded, add the. Active style directly above.
5) Disable Status
There are two ways to disable a button, one is to use the original disabled property, and one to take advantage of the. Disabled style. The difference between the two is. The disabled style does not suppress the default behavior of the button (it needs to be blocked with JavaScript code).
Image
In the picture display aspect, the bootstrap frame provides 3 style effect, the use way is also very simple, only need to apply on the IMG tag separately. img-rounded,. img-circle,. Img-thumbnail Styles,
Auxiliary styles
Text styles and background styles
1) Text style: Bootstrap provides 6 uniform style colors, namely: soft Grey (text-muted), main blue (text-primary), Success Green (text-success), Information Blue (text-info), Warning yellow (text- Warning), Dangerous red (Text-danger).
2) Text background style: Bootstrap provides 5 background colors corresponding to the above 5 text color styles (except the 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
1) Close icon: The initial code to close the icon is defined in a separate close.less file,
There are two ways of using
<button type= "button" class= "Close" > × </button>
Or
<a class= "Close" > × </a>
2) Down Lens: Bootstrap provides a caret style that is very simple to apply to the corresponding span (or other element) directly.
Content floating
For left and right floats, the Pull-left and pull-right styles are defined respectively.
For center alignment, use the Center-block style to
Typically an element is floating after it has been floated, and can be cleared before the element is used to avoid layout confusion. Clear float is typically a set element of the before pseudo-class display as table (and content is empty), and set the after pseudo-class of clear to both. Bootstrap provides a clearfix style for clearing floats,
Hide and show
For elements or textual content, we usually pay attention to two forms of hiding and display, one is the display of the hidden and displayed, the other is the hidden and display of visibility. For display elements, the bootstrap framework defines only the show style, whereas for hiding the hidden and invisible styles are defined, where hidden indicates that the element is neither displayed nor occupies the document flow (which affects the layout adjustment), and invisible indicates that although it is not displayed, But it occupies a placeholder for the document flow.
There is also a special case where you can use the Text-hide style if you want the text content of an element to not be displayed, but only for the background effect (that is, a transparent effect). Its implementation principle is to hide text, set the background color transparency.
Responsive style
Responsive design can be adapted to different sizes of devices, it will be based on different sizes of devices to display and hide the specific elements of the settings, while the responsive design can also distinguish between print mode and normal browsing mode.
Bootstrap uses the @media print syntax, which provides settings for hiding and displaying browsers and printers, respectively, in the following styles:. Visible-print and. Hidden-print.
The above full text reference from "in-depth understanding bootstrap"
"Learning notes" bootstrap CSS layout
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
