Bootstrap复习

来源：互联网发布：mac pro有什么用编辑：程序博客网时间：2024/05/13 17:40

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>

9.对齐

<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 velitPhasellus 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">
则运行效果：
3）条纹状表格  .table-striped
通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。
<table class="table table-striped">  ...</table>
示例代码：
<table class="table table-bordered table-striped">
运行效果：


4）鼠标悬停   .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 headingColumn headingColumn heading1Column contentColumn contentColumn content2Column contentColumn contentColumn content3Column contentColumn contentColumn content4Column contentColumn contentColumn content5Column contentColumn contentColumn content6Column contentColumn contentColumn content7Column contentColumn contentColumn content8Column contentColumn contentColumn content9Column contentColumn contentColumn content
复制
<!-- 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>
15.响应式表格将任何 .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>
运行效果：

0 0