|
好处：1:快速制作响应式网页适配各种终端;2:开发简单，方便;3:移动先行;4:代码开源;5:代码有良好的规范 使用场景：1:响应式页面;2:移动端页面;3:后台页面;4:带有交互效果的页面 开发环境：（webstorm） 引用bootstrap框架文件 1：压缩处理文件bootstrap.min.css,bootstrap.min.js 2：使用bootstrap中文网提供的免费CDN加速服务（www.bootcss.com） Bootstrap基本模板 <html> <head> <meta name="viewport" content="width=device-width,user-scalable=no,initial-sc ale=1.0/"> <link href="css/bootstrap.css" rel="stylesheet"> </head> <body> <h1>这是一个Bootstrap框架的最基本的HTML模板</h1> <script src="js/jquery-1.12.4.js"></script> <script src="js/botstrap.js"></script> </body> </html> Bootstrap架构 响应式设计，css组件，JavaScript插件，基础布局组件（排版，代码，表格，表单，按钮，图像，辅助样式），12栅格系统（结合media query，实现移动先行和响应式设计），jQuery1.10+ 使用12栅格系统布局网页系统 实现原理：定义容器大小，平分12分，调整内外边距，结合媒体查询 使用方式： 列组合 <div class="container"> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> </div> 列偏移 <div class="container"> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4 col-md-offset-4">.col-md-4</div> </div> </div> 列嵌套 <div class="container"> <div class="row"> <div class="col-md-8"> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4 col-md-offset-4">.col-md-4</div> </div> </d iv> <div class="col-md-4 col-md-offset-4">.col-md-4</div> </div> </div> 列排序 <div class="row"> <div class="col-md-8 col-md-push-3">.col-md-8</div> <div class="col-md-4 col-md-pull-9">.col-md-4</div> </div> 栅格系统行为 .container最大宽度：none（自动） 750px 970px 1170px 类前缀：none（自动） .col-sm-（小屏幕） .col-md-（中等屏幕） .cil-lg-（大屏幕） 列（column）数：12 最大列（column）宽：自动 ~62px ~81px ~97px 槽（gutter）宽：30px（每列左右均有15px） 可嵌套：是 偏移（offsets）：是 列排序：是
|
|
|
来自： 昵称54273430 > 《待分类》
