Python Learning Day 60th: BootStrap

UI Framework

• A tool set with CSS and JS effects plugin to quickly develop Web pages
• Classic UI Framework: BootStrap, jQueryUI, Meiziui ...

BootStrap2.1 version

• For production environments (Css\javascript)
• Source (less) (less is a CSS preprocessor)
• SASS (SASS is also CSS preprocessing)
• Chinese web site Address: http://www.bootcss.com/

Responsive layout 3.1 The resolution of the phone screen

• Most mobile retina screens now have physical resolution, and render resolution. Iphone8 Physical resolution is the 750*1334 rendering resolution of375*667
• Mobile browser in order to let the non-responsive processing of the page can be displayed, automatic scaling. The viewport size is typically set to 980px

3.2 Media Effects:

min-widthmin-heightmax-widthmax-heightwidthheight......

3.3 Viewport

name="viewport" content="width=device-width,initial-scale=1.0">

4 Layout 4.1 grille system. Container

<768px100% Ultra small screen xs>=768px <992px 750px small screen, range in [768,992) , use 750px sm> =992px <1200px 970px medium screen, range at 992, +) , use 970px md>=1200px  1170px Large screen, range in [768,992) , using 1200px LG        

. Rows and Columns

行 .row列 col-xs-*  col-sm-* col-md-* col-lg-*把父元素分成12份,*指定占父元素的份数

4.2 Table

.table              table标签中必须加tableclass.table-striped      条纹状表格.table-bordered 带边框的表格.table-hover 鼠标悬停.table-condensed 紧缩表格.success .info .danger .warning .active 颜色

4.3 form

.form-horizontal  .form-group.form-control      .control-label

Python Learning Day 60th: BootStrap