码迷,mamicode.com
首页 > 其他好文 > 详细

Bootstrap框架技术

时间:2016-04-05 00:29:33      阅读:200      评论:0      收藏:0      [点我收藏+]

标签:

1、Bootstrap是前端开发的框架技术,其采用将整个网页划分为12列,进行框架搭建,通过其内部
        特定代码可自动生成对应的各种样式。是比较方便快速的网页编写方法。
2、col-xs-数字(占位的格数)
        row=12,间距30px
3、使用Bootstrap时,需要引入相应的文件
        1、在css文件夹中放入文件夹css,js,和fonts;
        2、引入文件名为.bootstrap.min.css(head部分用link方式引入)
        3、引入js文件{jquery.min.js(前)    <script src"">    
                    bootstrap.min.js(后)(在</body>与</html>之间引入
4、bootstrap为移动设备优先的,并且自带响应式布局,若需要禁用响应式布局可以:
        1、!import方式
        2、对container(最外层div)设置宽度
5、Bootstrap使用到的某些HTML元素和CSS属性需要将页面设置为HTML5文档类型。
        <!DOCTYPE html>
        <html lang="zh-CN">
          ...
        </html>
 6、为了确保适当的绘制和触屏缩放,需要在<head>之中添加viewport元数据标签。
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        若需要禁用缩放功能,则用:
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    7、栅格选项
    超小屏幕<768px,手机        .col-xs-
    小屏幕设备》768px,平板        .col-sm-
    中等屏幕设备》992px,pc      .col-md-
    超大屏幕》1200px,            .col-lg-

Bootstrap框架技术

标签:

原文地址:http://www.cnblogs.com/chenliangping/p/5353271.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!