Bootstrap框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap框架介绍_使用</title>
    <!-- bootstrap框架
来自于Twitter. 依赖JavaScript框架. 有既定式样, 需引入css. 拥有字形图标库(glyph-icon),可优化性能,需引入font文件夹.
--> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> <script type="text/javascript"> </script> <style type="text/css"> .container-fluid, .container{ background:tan; font: 20px/50px 'Microsoft Yahei'; } .container{ background: coral; margin:0 -15px; /*padding: 0 -15px;*/ } </style> </head> <body> <div class="container-fluid">流体布局(fluid-layout)</div> <br> <br> <br> <div class="container">响应式布局(responsive-layout)</div> <!-- 与swiper插件不同的是.
     1> bootstrap在使用的时候并不需要通过new创建容器绑定元素,直接使用既定类名即可. 2>. 无论 流体布局还是响应式布局, 容器内部都有15px的padding, 有时需要通过 -margin或-indent来中和. 3>. 响应布局reponsive layout最大的宽为1170px,为12*10-15*2;此处padding应为container的容器的padding.
--> </body> </html>

 

posted @ 2019-08-13 21:07  Jrri  阅读(137)  评论(0编辑  收藏  举报