<html lang="zh-CN">2.设置Meta标签，为了兼容老版本的IE
<Meta http-equiv="X-UA-Compatible" content="IE=edge">3.必须项，设置视口
<Meta name="viewport" content="width=device-width, initial-scale=1">4.引入bootstrap的主文件
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.css">5.处理兼容性的js文件 cssHack 条件注释法 6.引入jquery，因为bootstrap是依赖于jquery，所以jquery必须放在前面先加载 最好使用bootstrap自己带的jquery
<script src="bootstrap-3.3.5-dist/js/jquery-1.11.3.js"></script>7.引入bootstrap中所需要用到的JavaScript插件
<script src="bootstrap-3.3.5-dist/js/bootstrap.js"></script>
如下代码：
!DOCTYPE html>
<!-- 1.指定语言的类型 -->
<html lang="zh-CN">
<head>
<Meta charset="UTF-8">
<!-- 2.设置Meta标签，为了兼容老版本的IE -->
<Meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 3.必须项，设置视口 -->
<Meta name="viewport" content="width=device-width, initial-scale=1">
<title>Document</title>
<!-- 4.引入bootstrap的主文件 -->
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.css">
<!-- 5.处理兼容性的js文件
cssHack 条件注释法 -->
<!--[if lt IE 9]>
<script src="bootstrap-3.3.5-dist/js/html5shiv.min.js"></script>
<script src="bootstrap-3.3.5-dist/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container"> <!-- 最大的一个使用宽度为970px -->
这个是container容器
</div>
<div class="container-fluid"> <!-- 使用宽度为100% -->
这个是container-fluid容器
</div>
<!-- 6.引入jquery，因为bootstrap是依赖于jquery，所以jquery必须放在前面先加载 -->
<!-- 最好使用bootstrap自己带的jquery -->
<script src="bootstrap-3.3.5-dist/js/jquery-1.11.3.js"></script>
<!-- 7.引入bootstrap中所需要用到的JavaScript插件 -->
<script src="bootstrap-3.3.5-dist/js/bootstrap.js"></script>
</body>
</html>
表格
一般表格
<table class="table"> ... </table>
条纹状表格
通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。
<table class="table table-striped"> ... </table>
带边框的表格：添加 .table-bordered 类为表格和其中的每个单元格增加边框。
<table class="table table-bordered"> ... </table>鼠标悬停：通过添加
.table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。
<table class="table table-hover"> ... </table>
紧缩表格：通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。
<table class="table table-condensed"> ... </table>状态类：通过这些状态类可以为行或单元格设置颜色。
（默认样式）Default （首选项）Primary （成功）Success （一般信息）Info （警告）Warning （危险）Danger --> <h3>按钮的颜色</h3> <a href="" class="btn btn-default">基础颜色</a> <a href="" class="btn btn-primary">首选项-深蓝色</a> <a href="" class="btn btn-success">成功色-绿色</a> <a href="" class="btn btn-info">提示色-浅蓝色</a> <a href="" class="btn btn-warning">警告色-黄色</a> <a href="" class="btn btn-danger">危险色-红色</a> <h3>按钮的尺寸</h3> <a href="" class="btn btn-primary btn-lg">大按钮</a> <a href="" class="btn btn-success">中按钮（默认演示）</a> <a href="" class="btn btn-info btn-sm">小按钮</a> <a href="" class="btn btn-warning btn-xs">超小按钮</a> <h3>块级按钮</h3> <a href="" class="btn btn-danger btn-block btn-lg">块级按钮</a> <a href="" class="btn btn-warning btn-block">块级按钮</a> <a href="" class="btn btn-default btn-block btn-sm">块级按钮</a> <a href="" class="btn btn-info btn-block btn-xs">块级按钮</a>
button 元素
表现为被按压下去（底色更深、边框夜色更深、向内投射阴影）
<button type="button" class="btn btn-primary btn-lg active">Primary button</button> <button type="button" class="btn btn-default btn-lg active">Button</button>
链接（<a>）元素
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a> <a href="#" class="btn btn-default btn-lg active" role="button">Link</a>
禁用状态
通过为按钮的背景设置 opacity 属性就可以呈现出无法点击的效果。
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button> <button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>
链接（<a>）元素为基于 <a> 元素创建的按钮添加 .disabled 类。
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a> <a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>
图片形状
<img src="..." alt="..." class="img-rounded"> <img src="..." alt="..." class="img-circle"> <img src="..." alt="..." class="img-thumbnail">
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
