Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。
Bootstrap 是基于 HTML、CSS、JAVASCRIPT
<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
运用了一个link标签，href属性 引入一个外部样式表文件
<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
以上3个文件就可以使用Bootstrap，JQ一定是在最上边的
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]--> 这不是注释语法，而是if语句
二 网格系统
默认的把一行拆成12个格 网格系统宽度 同一级别的谁在下面用谁的，上边的会被覆盖掉
例：
<body>
<div class="container"> container 代表容器
<div class="row">
<div class="col-xs-6"></div> * 是能替换掉的
<div class="col-xs-6"></div>
</div>
</div>
</body>
注：在bootstrap里的class名不能更改，因为预设了很多样式，直接复制
如果做响应式的效果，选择XS的效果更显著
例：如何同时控制4个
<style type="text/css">
*{ margin:0px auto; padding:0px}
.d1{ background-color:#F30; color:white; text-align:center; line-height:30px; height:30px; vertical-align:middle}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-xs-2 d1">首页</div>
<div class="col-xs-4 d1">产品介绍</div>
<div class="col-xs-4 d1">售后服务</div>
<div class="col-xs-2 d1">联系我们</div>
</div>
</div>
</body>
max-width max：最大宽
响应式实用工具
例：放置位置
<div class="container">
<div class="row">
<div class="col-xs-2 d1 ">首页</div>
<div class="col-xs-4 d1 hidden-xs">产品介绍</div>
<div class="col-xs-4 d1 hidden-xs">售后服务</div>
<div class="col-xs-2 d1 hidden-xs">联系我们</div>
</div>
</div>
练习图
<title>无标题文档</title> <link href="dist/css/bootstrap.min.css" rel="stylesheet" type="text/css"/> <script src="dist/js/jquery-1.11.2.min.js"/></script> <script src="dist/js/bootstrap.min.js"/></script> <style type="text/css"> *{ margin:0px auto; padding:0px} @media (min-768px){.container{width:100%}} @media (min-992px){.container{width:100%}} @media (min-1200px){.container{width:100%}} .d1{ background-color:#F60; color:#FFF; text-align:center; line-height:40px; height:40px; vertical-align:middle; font-weight:bold} .t1{ max-width:400px;} </style> </head> <body> <div class="container"> <div class="row"> <div class="col-xs-2 d1">首页</div> <div class="col-xs-4 d1">产品展示</div> <div class="col-xs-4 d1">售后服务</div> <div class="col-xs-2 d1">联系我们</div> </div> </div> <table class="table table-striped"> <caption>条纹表格布局</caption> <thead> <tr> <th>名称</th> <th>城市</th> <th>邮编</th> </tr> </thead> <tbody> <tr> <td>Tanmay</td> <td>Bangalore</td> <td>560001</td> </tr> <tr> <td>Sachin</td> <td>Mumbai</td> <td>400003</td> </tr> <tr> <td>Uma</td> <td>Pune</td> <td>411027</td> </tr> </tbody> </table> <input type="text" class="form-control t1" placeholder="请输入用户名"> </body>
