1.Bootstrap是前端的框架(包含HTML、CSS、JS)
2.一般常用的bootstrap,下载这个就可以了:
用于生产环境的 Bootstrap
编译并压缩后的 CSS、JavaScript 和字体文件。不包含文档和源码文件。
3.bootstrap简化CSS代码4.引用CSS文件的时候,引用bootstrap.min.css 比较小的这个版本就可以了。Js也是,用bootstrap.min.js 这个压缩包的。
5.要想使用bootstrap,还需要下载JQuery。使用的时候,直接将下载好的bootstrap包解压,拷贝到站点的根目录下。
6.bootstrap的一个基本的模板:(图片来自传智)
7.具体的示例代码如下:(代码主要来自bootstrap官网)
<!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>Bootstrap基础</title> <!-- 引入bootstrap的css文件的方式,具体的路径视具体的情况而定 --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!--下面的这一大段是用来解决IE浏览器的兼容性问题的--> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>你好,世界!</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins)需要引入JQuery文件,如果是在本地目录下,则根据本地路径 给定src里面的内容 --> <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <!-- 引入bootstrap下的js文件 --> <script src="js/bootstrap.min.js"></script> </body> </html>
8.布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container
容器。我们提供了两个作此用处的类。注意,由于 padding
等属性的原因,这两种 容器类不能互相嵌套。
.container
类用于固定宽度并支持响应式布局的容器。(这种情况下内容自动居中显示)
<div class="container">
...
</div>
.container-fluid
类用于 100% 宽度,占据全部视口(viewport)的容器。(内容全屏显示)
<div class="container-fluid">
...
</div>
<p class="text-left">Left aligned text.</p> <!--左对齐-->
<p class="text-center">Center aligned text.</p> 居中对齐
<p class="text-right">Right aligned text.</p> 右对齐
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
10.内联列表
通过设置
display: inline-block;
并添加少量的内补(padding),将所有元素放置于同一行。
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
复制<ul class="list-inline"> <li>...</li> </ul>
11.无样式列表
移除了默认的
list-style
样式和左侧外边距的一组元素(只针对直接子元素)。这是针对直接子元素的,也就是说,你需要对所有嵌套的列表都添加这个类才能具有同样的样式。
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
<ul class="list-unstyled"> <li>...</li> </ul>
12.代码练习:
<!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>Bootstrap基础</title> <!-- 引入bootstrap的css文件的方式,具体的路径视具体的情况而定 --> <link href="bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet"> <!-- jQuery (necessary for Bootstrap's JavaScript plugins)需要引入JQuery文件,如果是在本地目录下,则根据本地路径 给定src里面的内容 --> <script src="bootstrap-3.3.5-dist/js/jquery-1.11.3.min.js"></script> <!-- 引入bootstrap下的js文件 --> <script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script> <!--下面的这一大段是用来解决IE浏览器的兼容性问题的--> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <h1>你好,世界!</h1> <p class="text-left">Left aligned text.</p> <p class="text-center">Center aligned text.</p> <p class="text-right">Right aligned text.</p> <p>汇通网1月8日讯——周五(1月8日)市场对非农报告预期乐观,美元指数(98.7579, 0.4466, 0.45%)反弹走高,刷新日高98.79;欧元兑美元 (1.0859, -0.0062, -0.57%)刷新日低1.0854;受获利回吐打压,黄金刷新日低1099.79美元/盎司;空头回补提振,NYMEX原油刷新两 个交易日高点34.31美元/桶;中国证监会宣布自1月8日起暂停实施熔断机制,中国A股反弹,上证指数收盘上涨1.97%,亚太股市涨跌不一。 </p> <p class="h1"> 主要市场行情一览:</p> <p>汇市方面:随着偏鸽会议纪要影响减弱,兼之市场对非农报告预期乐观,美元指数周五反弹,刷新日高98.79;欧元兑美元承压回落,刷新日 低1.0854;英镑兑美元(1.4612, -0.0015, -0.10%)冲高回落,刷新两个交易日高点1.4645;美元兑日元反弹,刷新日高118.59;澳元 兑美元(0.7052, 0.0036, 0.51%)反弹,刷新日高0.7074;美元兑加元(1.4093, -0.0027, -0.19%)震荡,现报1.4084。 </p> <p class="text-justify">Justified text. 股市方面:中国证监会宣布自1月8日起暂停实施熔断机制,中国A股随之反弹,上证指数收盘上涨1.97%,报3186.41点,深证成指收盘上涨1.2%,报10888.91点;亚太股市涨跌不一,香港恒生指数尾盘下跌0.98%,报20532.64点;日经225指数收盘下跌0.39%,报17697.96点;韩国KOSPI指数收盘上涨0.7%,报1917.62点;澳大利亚S&P/ASX-200指数收盘下跌0.39%,4990.84。</p> <p class="text-nowrap">No wrap text.股市方面:中国证监会宣布自1月8日起暂停实施熔断机制,中国A股随之反弹,上证指数收盘上涨1.97%,报3186.41点,深证成指收盘上涨1.2%,报10888.91点;亚太股市涨跌不一,香港恒生指数尾盘下跌0.98%,报20532.64点;日经225指数收盘下跌0.39%,报17697.96点;韩国KOSPI指数收盘上涨0.7%,报1917.62点;澳大利亚S&P/ASX-200指数收盘下跌0.39%,4990.84。</p> <ul class="list-inline"> <li>林黛玉</li> <li>薛宝钗</li> <li>贾宝玉</li> </ul> <ul class="list-unstyled"> <li>元春</li> <li>迎春</li> <li>探春</li> <li>惜春</li> </ul> </div> </body> </html>13.表格1).table
为任意
<table>
标签添加.table
类可以为其赋予基本的样式 — 少量的内补(padding)和水平方向的分隔线。<table class="table"> ... </table>
示例代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>table</title> <link href="bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet"> <script src="bootstrap-3.3.5-dist/js/jquery-1.11.3.min.js"></script> <script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script> <style> table{ margin-top:20px; } </style> </head> <body class="container"> <table class="table"> <tr> <th>红楼梦</th> <th>西游记</th> <th>水浒传</th> <th>三国演义</th> </tr> <tr> <td>贾宝玉</td> <td>唐僧</td> <td>武松</td> <td>曹操</td> </tr> <tr> <td>林黛玉</td> <td>孙悟空</td> <td>宋江</td> <td>刘备</td> </tr> <tr> <td>薛宝钗</td> <td>猪八戒</td> <td>林冲</td> <td>孙权</td> </tr> <tr> <td>贾探春</td> <td>沙僧</td> <td>鲁智深</td> <td>诸葛亮</td> </tr> </table> </body> </html>运行效果:
2)带边框的表格 .table-bordered
添加
.table-bordered
类为表格和其中的每个单元格增加边框。跨浏览器兼容性
条纹状表格是依赖
:nth-child
CSS 选择器实现的,而这一功能不被 Internet Explorer 8 支持。<table class="table table-bordered"> ... </table>
示例代码:
<table class="table table-bordered">运行效果:
若代码改为如下:
<table class="table-bordered">则运行效果:
4)鼠标悬停3)条纹状表格 .table-striped通过
.table-striped
类可以给<tbody>
之内的每一行增加斑马条纹样式。示例代码:<table class="table table-striped"> ... </table>
<table class="table table-bordered table-striped">运行效果:
.table-hover
通过添加
.table-hover
类可以让<tbody>
中的每一行对鼠标悬停状态作出响应。示例代码:<table class="table table-hover"> ... </table>
<table class="table table-bordered table-hover">运行效果:鼠标悬浮在某一行,该行背景色加深,表示选中
(上图是鼠标悬浮在第二行的效果)
通过添加5)紧缩表格 .table-condensed
.table-condensed
类可以让表格更加紧凑,单元格中的内补(padding)均会减半。<table class="table table-condensed"> ... </table>
示例代码:
<table class="table table-bordered table-hover table-condensed">运行效果:14.(该部分内容全部来自bootstrap官网)
状态类
通过这些状态类可以为行或单元格设置颜色。(也就是下面的这些类只能给<tr>或者<td>添加,其他标记是不能加的)
Class 描述 .active
鼠标悬停在行或单元格上时所设置的颜色 .success
标识成功或积极的动作 .info
标识普通的提示信息或动作 .warning
标识警告或需要用户注意 .danger
标识危险或潜在的带来负面影响的动作
# Column heading Column heading Column heading 1 Column content Column content Column content 2 Column content Column content Column content 3 Column content Column content Column content 4 Column content Column content Column content 5 Column content Column content Column content 6 Column content Column content Column content 7 Column content Column content Column content 8 Column content Column content Column content 9 Column content Column content Column content 复制15.响应式表格<!-- On rows --> <tr class="active">...</tr> <tr class="success">...</tr> <tr class="warning">...</tr> <tr class="danger">...</tr> <tr class="info">...</tr> <!-- On cells (`td` or `th`) --> <tr> <td class="active">...</td> <td class="success">...</td> <td class="warning">...</td> <td class="danger">...</td> <td class="info">...</td> </tr>
将任何
.table
元素包裹在.table-responsive
元素内,即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于 768px 宽度时,水平滚动条消失。
示例代码:<div class="table-responsive"> <table class="table"> ... </table> </div>
<body class="container"> <table class="table table-bordered"> <tr> <th>红楼梦</th> <th>西游记</th> <th>水浒传</th> <th>三国演义</th> </tr>当窗口很小的时候,上述代码会有以下效果:
而table-responsive的作用就是让上面的内容不要竖着显示,即使窗口的大小变化了,内容显示的格式还是保持不变。
示例代码如下:
<body class="container"> <div class="table-responsive"> <table class="table table-bordered"> <tr> <th>红楼梦</th> <th>西游记</th> <th>水浒传</th> <th>三国演义</th> </tr>运行效果:
(小窗口的时候,会有横向的滚动条)
(窗口宽度大于768px的时候,滚动条自动消失)
16.表单:
所有设置了
.form-control
类的<input>
、<textarea>
和<select>
元素都将被默认设置宽度属性为width: 100%;
。 将label
元素和前面提到的控件包裹在
.form-group
中可以获得最好的排列。运行效果:<form> <div class="form-group"> <label for="username">用户名:</label> <input type="text" id="username" class="form-control" placeholder="请输入用户名"> </div> </form>
<form> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-group"> <label for="exampleInputFile">File input</label> <input type="file" id="exampleInputFile"> <p class="help-block">Example block-level help text here.</p> </div> <div class="checkbox"> <label> <input type="checkbox"> Check me out </label> </div> <button type="submit" class="btn btn-default">Submit</button> </form>(上面这段代码全部来自bootstrap官网)运行效果:
窗口缩小以后:
17.内联表单:
<form class="form-inline">示例代码:
<form class="form-inline"> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> </form>运行效果:
小窗口的时候:
18.
.sr-only
类在内联表单中,为label设置
.sr-only
类,可以将label隐藏,如:运行效果:<form class="form-inline"> <div class="form-group"> <label class="sr-only" for="exampleInputEmail3">Email address</label> <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email"> </div> <div class="form-group"> <label class="sr-only" for="exampleInputPassword3">Password</label> <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password"> </div> </form>