Bootstrap框架技术

最新推荐文章于 2019-11-23 14:32:03 发布

dietunzhuan4435

最新推荐文章于 2019-11-23 14:32:03 发布

阅读量138

点赞数

原文链接：http://www.cnblogs.com/wangyi0527/p/5349996.html

版权

bootstrap自带响应式布局，移动设备优先
    col-xs-占位各数
    最外层<div class="containers"> 【自动居中】
            内容......
        </div>
    div class "row"命名必须包含在.containers之中

禁用响应式布局

    通过为.container设置一个width值从而覆盖框架的默认width设置，例如width: 970px !important;。请确保这些设置全部放在默认的bootstrap.CSS后面。也可以略去!important

引入bootstrap技术几大要点

    1.<html lang="en">改为<html lang="zh-CN">
    2.在<meta charset="UTF-8">下面引入：
    (1)<meta name="viewport" content="width=device-width, initial-scale=1.0">【表示可以让用户自由缩放】
    (2)<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">｝【表示用户不可以自由缩放】
    3.IE兼容模式引入：
    (1)<meta http-equiv="X-UA-Compatible" content="IE=edge">
    4.用link方式在<title></title>下面引入外部bootstrap.min.scc
    (1)<link rel="stylesheet" href="../css/bootstrap.min.css">
    5.由于bootstrap需要JS的支持，且JS又依赖于JQuery，故要在</body>和</html>结束标签中间用script引入两个JS文件，src后面接JS文件地址，一定要分先后顺序的引入：
    </body>
    <script src="../js/jquery-1.11.2-min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    </html>
    6.引入文件都要用min类型压缩过的文件，对软件有优化