1.BootStrap是Twitter公司开发的前端框架 2.好处:
a.包含有很多定义好的 CSS和JS代码,可以直接使用 b.支持响应式布局.（一套代码在不同分辨率上面都有很好的体验效果）中文官方网站地址 http://d.bootcss.com/bootstrap-3.3.5.zip 1.复制文件
bootstrap-3.3.7-dist 文件夹下面的 css js fonts 文件夹复制项目. jquery-3.2.1.min.js 文件复制到 js 目录下面2.复制模板代码
Bootstrap离线文档\v3.bootcss.com\index.htm -> 起步 -> 基本模板3.模板代码
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟>随其后！ --> <title>基础模板</title> <!-- Bootstrap css 引入的路径需要修改 --> <link href="../css/bootstrap.min.css" rel="stylesheet"> </head> <body> <h1>Hello，World！</h1> <!-- jQuery 引入的路径需要修改--> <script src="../js/jquery-3.2.1.min.js"></script> <!-- bootstrap.min.js 引入的路径需要修改 --> <script src="../js/bootstrap.min.js"></script> </body> </html>1.将屏幕划分成为12个格子 2.操作步骤
a.样式"理解成为table" .container (两端留白) 或者 .container-fluid (宽度>全屏) b.样式"理解成为tr" .row c.样式"理解成为td" .col-尺寸-占格数目3.尺寸的大小: (顺序"英文字母顺序lmsx")
a. lg 超大屏幕尺寸(超大) b. md 中等屏幕尺寸(大) c. sm 平板屏幕尺寸(中等) d. xs 手机屏幕尺寸(小)4.注意事项
a.设置的"占格数目"超过12会前面的独占一行,后面的自动换一行 b.设置的"尺寸"大于设备的尺寸,会独占一行 c.设置的"尺寸"小于设备的尺寸,会向上兼容,也具备上面的效果.5.列偏移
a.语法 col-尺寸-offset-占格数目 b.含义 在原始的栅格当中,占据几个空白格子1.位置
文档: 全局CSS样式 -> 按钮2.设置
<button type="button" class="btn btn-default">（默认样式）Default</button> <button type="button" class="btn btn-primary btn-lg">（大按钮）Large >button</button>A.位置
文档: 全局CSS样式 -> 图片B.设置
<img src="..." alt="..." class="img-rounded"> <!-- 圆角矩形 --> <img src="..." alt="..." class="img-circle"> <!-- 椭圆 --> <img src="..." alt="..." class="img-thumbnail"> <!-- 相框 -->1.位置
文档: 全局CSS样式 -> 表格2.设置
<table class="table table-hover"> <!-- 鼠标悬浮 --> <table class="table table-bordered"> <!-- 带有边框 --> <table class="table table-striped"> <!-- 条纹表格 -->1.位置
文档: 全局CSS样式 -> 表单2.设置
水平表单1.位置
文档: 组件 -> 导航条2.设置
<nav class="navbar navbar-inverse"> <!-- 反色设置"黑色" -->1.位置
文档: 组件 -> 分页1.位置
文档: JavaScript插件 -> Carousel2.设置
data-interval="3000" <!-- 设置时间差 每隔多长时间替换一次 -->