1. HTML5 Document Structure
Note that lang= "zh-cn" means that the Web page is in Chinese, and if it is in English, lang= "en-cn".
1 <!DOCTYPE HTML>2 <HTMLLang= "zh-cn">3 <Head>4 <MetaCharSet= "UTF-8">5 <title>Page title</title>6 </Head>7 <Body>8 9 </Body>Ten </HTML>
2. Browser compatibility mode
If the Web page opens in IE , it must be opened with the latest engine rendering
Shortcut: Sublime through Emmet meta:compat Insertion
1 <Meta http-equiv= "x-ua-compatible" content= " Ie=Edge">
3. Favicon Site icon
Shortcut: Sublime through Emmet Link:favicon insertion
<link rel= "shortcut icon" type= "Image/x-icon" href= "favicon.ico">
4. Default font
1 body{2 font-family: "Helvetica Neue",3 Helvetica,4 Microsoft Yahei,5 Hiragino Sans GB,6 Wenquanyi Micro Hei,7 Sans-serif;8}
5. Grid system
-a response-style grid system is defined in Bootstrap
-The way to use it is to divide a container into columns,
-then control the ratio of each column by the class name of the col-xx-xx
Row class
-Because each column defaults to a 15px left and right margin
-One function of the row class is to shield the margin from the left and right -15px
<class= "container"> <class = "row"></div></Div >
Col-*\*-\* class
-col-XS[column]: show a few on the ultra-small screen
-col-SM-[Number of columns]: show several in small screen
-col-MD-[Number of columns]: show several on a medium screen
-col-LG-[Number of columns]: show several on the big screen
- __xs__ : Ultra Small screen phone (<768px)
- __sm__ : small screen tablet (≥768px)
- __md__ : medium -screen desktop display (≥992px)
- __lg__ : large screen large desktop monitor (≥1200px)
6. Font icon
1 CSS2 @font-face {3 font-family: 'itcast';4 src: url ('.. /font/mifie-web-font.eot ') format (' Embedded-opentype '), url ('.. /font/mifie-web-font.svg ') format (' svg '), url ('.. /font/mifie-web-font.ttf ') format (' TrueType '), url ('.. /font/mifie-web-font.woff ') format (' Woff ');5 }6 7 [class^= "icon-"],8 [class*= " icon-"] {9 / * Note the space in the middle of the selector above * /Ten / * The font we use named Itcast is declared in the @font-face way above * / One Font-family:itcast; A Font-style:normal; - } - the . icon-mobilephone::before{ - content: ' \e908 '; -}
1 HTML2 <Divclass= "Col-md-2 text-center">3 <aclass= "Mobile-link"href="#">4 <Iclass= "Icon-mobile"></I>5 <span>Mobile Micro-Gold</span>6 <!--The font icon in bootstrap is used here . -7 <Iclass= "Glyphicon glyphicon-chevron-down"></I>8 <imgsrc="..."alt="">9 </a>Ten </Div>
7. Font file format
- eot : Embedded-opentype
- svg : SVG
- TTF : TrueType
- woff : Woff
8. Button style generation
http://blog.koalite.com/bbg/
A new button style can be generated from the interface
1 . btn-itcast {2 color: #ffffff;3 background-color: #E92322;4 border-color: #DB3B43;5 }6 7 . Btn-itcast:hover,8 . Btn-itcast:focus,9 . Btn-itcast:active,Ten . Btn-itcast.active, One . Open. dropdown-toggle.btn-itcast { A color: #ffffff; - background-color: #E92322; - border-color: #DB3B43; the } - - . Btn-itcast:active, - . Btn-itcast.active, + . Open. dropdown-toggle.btn-itcast { - Background-image:none; + } A at . btn-itcast.disabled, - . btn-itcast[disabled], - fieldset[disabled]. Btn-itcast, - . Btn-itcast.disabled:hover, - . Btn-itcast[disabled]:hover, - fieldset[disabled]. Btn-itcast:hover, in . Btn-itcast.disabled:focus, - . Btn-itcast[disabled]:focus, to fieldset[disabled]. Btn-itcast:focus, + . Btn-itcast.disabled:active, - . Btn-itcast[disabled]:active, the fieldset[disabled]. btn-itcast:active, * . Btn-itcast.disabled.active, $ . Btn-itcast[disabled].active,Panax Notoginseng fieldset[disabled]. btn-itcast.active { - background-color: #E92322; the border-color: #DB3B43; + } A the . Btn-itcast. Badge { + color: #E92322; - background-color: #ffffff; $}
9, small screen hidden
- __hidden-xx__: Hiding in some sort of screen
- __visible-xx__: Display in a certain screen size
visible-xx-xx: The last xx is what the display is when it is decided.
<class= "Topbar hidden-xs hidden-sm"></Div >
Or
<class= "Topbar visible-md visible-lg"></div>
10. Bootstrap extension
-by Bootstrap the navigation bar style settings found in the document, in fact, there is a theme-like concept
- navbar-default: Default appearance
- navbar-inverse: Dark background style
-so we want to be able to customize a complete set of styles:
+ Navbar-itcast
"' CSS
. navbar-itcast{
...
}
... Specific code reference Navbar-default implementation can be
```
Day 121th: Basic knowledge of mobile development