<!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>