bootstrap 教程
1、引用： <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
2、在<head>中添加meta，以使支持移动设备： <meta name="viewport" content="width=device-width, initial-scale=1.0"> initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。 如果添加： user-scalable=no ，则禁止用户使用缩放 3、<img src="..." class="img-responsive" alt="响应式图像"> class=img-responsive .img-responsive { display: block; height: auto; max-width: 100%; } 4、body的默认配置 body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.428571429; color: #333333; background-color: #ffffff; } 5、a的默认样式： a:hover, a:focus { color: #2a6496; text-decoration: underline; }
a:focus { outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } 6、normalize.css来兼容浏览器 7、div class=container <div class="container"> ... </div> .container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } 8 网格结构：container,row <div class="container"> <div class="row"> <div class="col--"></div> <div class="col--"></div> </div> <div class="row">...</div> </div> <div class="container">....
腾讯云开发者
