Bootstrap base -2 CSS style (global CSS style)

First, global CSS style

Overview

-HTML5 File type

-Some HTML elements and CSS properties used by bootstrap need to set the page to HTML5

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M00/7E/88/wKiom1cDeCvy5BotAAAb2KAPRwM480.png "title=" Web.png "alt=" Wkiom1cdecvy5botaaab2kaprwm480.png "/>-Mobile device first

-To ensure proper drawing and touch-screen scaling, you need to add viewport metadata elements to the

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M00/7E/85/wKioL1cDeP7QA-YjAAAgzDeS2Qc626.png "title=" Web.png "alt=" Wkiol1cdep7qa-yjaaagzdes2qc626.png "/>

CSS Global Styles

-Set Background-color for BODY element: #fff;

-Use @font-family-base, @font-size-base, and @line-height-base a variables as the basic parameters for typesetting

-Basic color @link-color is set for all links, and underscores are added when the link is in: hover state

Layout container

-. Container class for containers that are fixed-width and support responsive layouts

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M01/7E/85/wKioL1cDexGzAS3gAAAXx6isfZY864.png "title=" Web.png "alt=" Wkiol1cdexgzas3gaaaxx6isfzy864.png "/>

-. Container-fluid class for containers of 100% width, occupying all viewports (viewport)

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M02/7E/88/wKiom1cDenrQ2zMeAAAZtfZKoM8939.png "title=" Web.png "alt=" Wkiom1cdenrq2zmeaaaztfzkom8939.png "/>

Button

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M01/7E/89/wKiom1cDez_xcfuvAADD97vxcXw193.png "title=" Web.png "alt=" Wkiom1cdez_xcfuvaadd97vxcxw193.png "/>

Image

-Responsive Images

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M01/7E/85/wKioL1cDfGThiUYgAAAjqhtJj4U778.png "title=" Web.png "alt=" Wkiol1cdfgthiuygaaajqhtjj4u778.png "/>

-Picture shape

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M00/7E/85/wKioL1cDfJuyqV4TAAA3RYgfW6k275.png "title=" Web.png "alt=" Wkiol1cdfjuyqv4taaa3rygfw6k275.png "/>

Form

-Basic table

-. Table

-Striped Table

-. table-striped

-Table with borders

-. table-bordered

-Condensed form

-. table-condensed

-Mouse hover

-. Table-hover

-Responsive table (table parent Element)

-. Table-responsive

Typesetting

-Title

-Element

<small>

-style

. H1-. h6

. Small

-page Theme

-Global

FONT-SIZE:14PX (@font-size-base)

line-height:1.428 (@line-height-base)

-Center Content

. Lead

-Inline text

-<mark>

-<del>

-<s>

-<ins>

-<u>

-<small>

-<strong>

-<em>

-Align

-Text-left

-Text-center

-Text-right

-Text-justify

-Text-nowrap

-Case

-Text-lowercase

-Text-uppercase

-Text-capitalize

-Abbreviations

-<abbr>

Title

. initialism

-Address

-<address>

-Reference

-<blockquote>

<footer>

. backquote-reverse

-List

-Unordered list

<ul>

-Ordered list

<ol>

-No Style list

. list-unstyled

-Inline list

. list-inline

-Description

<dl>

-Level description

Dl.horizontal

Designing layout pages with typeset styles

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M02/7E/89/wKiom1cDf0eA032oAAFnR-GTTvI347.png "title=" Web.png "alt=" Wkiom1cdf0ea032oaafnr-gttvi347.png "/>

Grid

-12 columns per row (row) (COL)

-Basic Flow layout

-Responsive layout

-Offset

-Nested

-Sort

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M01/7E/86/wKioL1cDgNixi-oZAAEpCnjsxU4711.png "title=" Web.png "alt=" Wkiol1cdgnixi-ozaaepcnjsxu4711.png "/>

Form

-Basic Form

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M01/7E/89/wKiom1cDgMXR6lN6AAAdHz9ovPk314.png "title=" Web.png "alt=" Wkiom1cdgmxr6ln6aaadhz9ovpk314.png "/>

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M02/7E/86/wKioL1cDgYaysgYmAAASavZBdHI768.png "title=" Web.png "alt=" Wkiol1cdgyaysgymaaasavzbdhi768.png "/>

-Level form

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M00/7E/89/wKiom1cDgQLDkmWOAAAr12dpOLk308.png "title=" Web.png "alt=" Wkiom1cdgqldkmwoaaar12dpolk308.png "/>

-Inline form

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M00/7E/86/wKioL1cDgdSwg_7BAACZ_iile_I545.png "title=" Web.png "alt=" Wkiol1cdgdswg_7baacz_iile_i545.png "/>

-Input Box

-Form-control

-Text field

-Form-control

Rows

-Multi-Select and single box

-Inline multi-select and radio boxes

. checkbox-inline

. reaio-inline

-Drop-down list

-Form-control

-Static controls

-Form-control-static

-Status

-Focus Status

-Disabled status

. Disabled

-read-only status

. readonly

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/7E/89/wKiom1cDgh6SDyHYAAAdg490LmU310.png "title=" Web.png "alt=" Wkiom1cdgh6sdyhyaaadg490lmu310.png "/>

-Check

-<div class= "Form-group has-sucess|warning|error" >

-Feedback icon: Has-feedback

Glypicon-ok Form-control-feedback

Glypicon-warning-sign Form-control-feedback

Glypicon-remove Form-control-feedback

Summary: This chapter mainly describes the BootStrap CSS style (global CSS style)

This article from the "Flying Ants" blog, declined to reprint!

Bootstrap base -2 CSS style (global CSS style)