BootStrap简介
Bootstrap 是一套现成的 CSS 样式集合。
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
2011 年，twitter 的“一小撮”工程师为了提高他们内部的分析和管理能力，用业余时间为他们的产品构建了一套易用、优雅、灵活、可扩展的前端工具集–BootStrap。Bootstrap 由MARK OTTO 和 Jacob Thornton 所设计和建立，在 github 上开源之后，迅速成为该站上最多人watch&fork的项目。大量工程师踊跃为该项目贡献代码，社区惊人地活跃，代码版本进化非常快速，官方文档质量极其高（可以说是优雅），同时涌现了许多基于 Bootstrap 建设的网站：界面清新、简洁；要素排版利落大方。
Bootstrap 特别适合那种没有设计师的团队（甚至说没有前端的团队），可以快速的出一个网页。
BootStrap特点
- 简洁、直观、强悍的前端开发框架，html、css、javascript 工具集，让 web 开发更速、简单。
- 基于 html5、css3 的 bootstrap，具有大量的诱人特性：友好的学习曲线，卓越的兼容性，响应式设计，12 列格网，样式向导文档。
- 自定义 JQuery 插件，完整的类库，bootstrap3 基于 Less，bootstrap4 基于 Sass的 CSS 预处理技术。
- Bootstrap 响应式布局设计,让一个网站可以兼容不同分辨率的设备。Bootstrap 响应式布局设计，给用户提供更好的视觉使用体验。
- 丰富的组件。
BootStrap下载与使用
下载
使用
-
下载完成后，拷贝bootstrap-3.3.7-dist文件夹到项目中
-
需要jquery的支持，所以还要下载jquery.js：
-
在项目HTML文件中引入BootStrap：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <!--使用 X-UA-Compatible 来设置 IE 浏览器兼容模式 最新的渲染模式--> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- viewport 表示用户是否可以缩放页面； width 指定视区的逻辑宽度； device-width 指示视区宽度应为设备的屏幕宽度； initial-scale 指令用于设置 Web 页面的初始缩放比例 initial-scale=1 则将显示未经缩放的 Web 文档 --> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 的 HTML 标准模板</title> <!-- 载入 Bootstrap 的 css --> <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <h1>Hello, world!</h1> </body> <!-- 如果要使用 Bootstrap 的 js 插件，必须先调入 jQuery --> <script type="text/javascript" src="js/jquery-3.4.1.js" charset="utf-8"></script> <!-- 包括所有 bootstrap 的 js 插件或者可以根据需要使用的 js 插件调用 --> <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> </html>
布局容器和栅格网格系统
布局容器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>布局容器</title>
<!--引入bootstrap的核心css文件-->
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" />
</head>
<body>
<!--
两种布局容器不可嵌套使用
-->
<!-- .container 类用于固定宽度并支持响应式布局的容器。 -->
<div class="container" style="height: 300px;background-color: mediumaquamarine;">
</div>
<!-- .container-fluid类用于100% 宽度，占据全部视口（viewport）的容器。 -->
<div class="container-fluid" style="height: 300px;background-color: antiquewhite;">
</div>
<!-- 普通div -->
<div style="height: 300px;background-color: chocolate;">
</div>
</body>
</html>
栅格网格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。
网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分 12 份(也有平分成 24 份或32 份，但 12 份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap 框架中的网格系统就是将容器平分成 12 份。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JxAalcqj-1571836286716)(D:\SHSXT\中级班\WEB\code\bootstrap\img\1571828604507.png )]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x66jmLsw-1571836286718)(D:\SHSXT\中级班\WEB\code\bootstrap\img\1571828917654.png)]
- 数据行(.row)必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距(padding)。
- 在行(.row)中可以添加列(.column)，只有列（column）才可以作为行容器(.row)的直接子元素，但列数之和不能超过平分的总列数，比如12。如果大于12，则自动换到下一行。
- 列组合：
- 列组合简单理解就是更改数字来合并列（原则：列总和数不能超12，大于12，则自动换到下一行），有点类似于表格的colspan属性。
- 列偏移
- 在列元素上添加类名"col-md-offset-N"(其中N代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。例如，你在列元素上添加"col-md-offset-8"，表示该列向右移动8个列的宽度(要保证列与偏移列的总数不超过12，不然会致列断行|换行显示)。
- 列排序
- 列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名"col-md-push-N"和"col-md-pull-N"(其中N代表移动的列组合数)。往前pull，往后push。
- 列嵌套
- Bootstrap框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行（row）容器，然后在这个行容器中插入列。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>栅格网格系统</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" />
</head>
<body>
<!--布局容器-->
<div class="container">
<!--行-->
<div class="row">
<!--栅格 col-xs-n col-sm-n col-md-n col-lg-n -->
<div class="col-md-6" style="background-color: rosybrown;">6</div>
<div class="col-md-6" style="background-color: navajowhite;">6</div>
</div>
</div>
<div class="container">
<!--列组合 start-->
<!--行-->
<div class="row">
<div class="col-md-1" style="background-color: wheat;">1</div>
<div class="col-md-2" style="background-color: teal;">2</div>
<div class="col-md-3" style="background-color: khaki;">3</div>
<div class="col-md-4" style="background-color: darkcyan;">4</div>
</div>
<!--行-->
<div class="row">
<div class="col-md-8" style="background-color: bisque;">8</div>
<div class="col-md-4" style="background-color: lawngreen;">4</div>
<div class="col-md-4" style="background-color: blue;">4</div>
</div>
<!--行-->
<div class="row">
<div class="col-md-6" style="background-color: darkblue;">6</div>
<div class="col-md-4" style="background-color: aqua;">4</div>
<div class="col-md-4" style="background-color: mediumvioletred;">4</div>
</div>
<!--列组合 end-->
<hr />
<!-- 列偏移 strat -->
<div class="row">
<div class="col-md-1" style="background-color: cadetblue;">1</div>
<div class="col-md-1 col-md-offset-10" style="background-color: red;">1</div>
<div class="col-md-1" style="background-color: greenyellow;">1</div>
</div>
<!-- 列偏移 end -->
<hr />
<!-- 列排序 strat -->
<div class="row">
<div class="col-md-1 col-md-push-1" style="background-color: yellowgreen;">1</div>
<div class="col-md-2 col-md-push-1" style="background-color: darkturquoise;">2</div>
<div class="col-md-4 col-md-pull-1" style="background-color: darkgray;">4</div>
</div>
<!-- 列排序 end -->
<hr />
<!-- 列嵌套 strat -->
<div class="row">
<div class="col-md-8" style="background-color: honeydew;">
<div class="row">
<div class="col-md-4 " style="background-color: darkviolet;">4</div>
<div class="col-md-4 " style="background-color: teal;">4</div>
<div class="col-md-4 " style="background-color: salmon;">4</div>
</div>
</div>
<div class="col-md-4 " style="background-color: rosybrown;">4
<div class="row">
<div class="col-md-6 " style="background-color: cyan;">6</div>
<div class="col-md-6 " style="background-color: thistle;">6</div>
</div>
</div>
</div>
<!-- 列嵌套 end -->
</div>
</body>
</html>
常用样式
排版
-
标题
- 为了让非标题元素和标题使用相同的样式，还特意定义了.h1~.h6六个类名
- 同时后面可以紧跟着一行小的副标题<small></small>或使用.small
-
段落
- 通过.lead 来突出强调内容(其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理)。
- 可以使用以下标签给文本做突出样式处理：
- <small>:小号字
- <b><strong>:加粗
- <i><em>:斜体
-
引用
- <blockquote>：标签定义摘自另一个源的块引用，使用.blockquote-reverse，实现右对齐。
- <footer>：脚注
- <cite>：表示对某个参考文献的引用
-
强调
- 强调字体颜色
- .text-muted：提示，使用浅灰色（#999）
- .text-primary：主要，使用蓝色（#428bca）
- .text-success：成功，使用浅绿色(#3c763d)
- .text-info：通知信息，使用浅蓝色（#31708f）
- .text-warning：警告，使用黄色（#8a6d3b）
- .text-danger：危险，使用褐色（#a94442）
- 强调字体颜色
-
文本对齐
- 在CSS中常常使用text-align来实现文本的对齐风格的设置。其中主要有四种风格：
- 左对齐，取值left ;
- 居中对齐，取值center;
- 右对齐，取值right ;
- 两端对齐，取值justify。
- 为了简化操作，方便使用，Bootstrap通过定义四个类名来控制文本的对齐风格：
- .text-left：左对齐
- .text-center：居中对齐
- .text-right：右对齐
- .text-justify：两端对齐。
- 在CSS中常常使用text-align来实现文本的对齐风格的设置。其中主要有四种风格：
-
列表
- 在HTML文档中，列表结构主要有三种：
- 无序列表(<ul><li>…</li></ul>)
- 有序列表(<ol><li>…</li></ol>)
- 定义列表(<dl><dt>…</dt><dd>…</dd></dl>)
- bootstrap根据平时的使用情形提供了六种形式的列表： 普通列表、有序列表、去点列表、内联列表、 描述列表、水平描述列表
- 去点列表：class=“list-unstyled”
- 内联列表：class=“list-inline”，把垂直列表换成水平列表，而且去掉项目符号(编号)，保持水平显示。也可以说内联列表就是为制作水平导航而生
- 定义列表：在原有的基础加入了一些样式，使用样式 class=".dl-horizontal"制作水平定义列表 : 当标题宽度超过160px时，将会显示三个省略号
- 在HTML文档中，列表结构主要有三种：
-
代码
-
三种代码风格：
- 使用<code></code>来显示单行内联代码
- 使用<pre></pre>来显示多行块代码
- 样式：pre-scrollable (height,max-height高度固定,为340px,超过存在滚动条)
- 使用<kbd></kbd>来显示用户输入代码，如快捷键
-
不管使用哪种代码风格，在代码中碰到小于号（<）要使用硬编码“<”来替代，大于号(>)使用“>”来替代。
-
-
表格
- 样式：Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。在使用Bootstrap的表格过程中，只需要添加对应的类名就可以得到不同的表格风格：
- 基础样式
- .table：基础表格
- 附加样式
- .table-striped：斑马线表格
- .table-bordered：带边框的表格
- .table-hover：鼠标悬停高亮的表格
- . table-condensed：紧凑型表格，单元格没内距或者内距较其他表格的内距小
- 基础样式
- <tr>提供了五种不同的类名，每种类名控制了行的不同背景颜色
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>排版</title> <link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.css"/> </head> <body> <!--标题--> <h2>标题1<small>小标题</small></h2> <h3>标题3<span class="small">小标题</span></h3> <div class="h2">这是div</div> <hr /> <!--段落--> <p>通过.lead 来突出强调内容</p> <p class="lead">通过.lead 来突出强调内容</p> <p><i>以后</i>的<small>你</small>会<b>感谢</b>现在<strong>努力</strong>的<em>自己</em></p> <hr /> <!--引用--> <blockquote class="blockquote-reverse"> 好好学习Java！ <footer>本文出自大师之手</footer> <cite>thinking in java</cite> </blockquote> <hr /> <!--强调--> <div class="text-muted">提示效果</div> <div class="text-primary">主要效果</div> <div class="text-success">成功效果</div> <div class="text-info">信息效果</div> <div class="text-warning">警告效果</div> <div class="text-danger">危险效果</div> <hr /> <!--对齐方式--> <p style="text-align: left;">Hello</p> <p style="text-align: right;">Hello</p> <p style="text-align: justify;"> 为了简化操作，方便使用，Bootstrap通过定义四个类名来控制文本的对齐风格：.text-left：左对齐.text-center：居中对齐 .text-right：右对齐 .text-justify：两端对齐。 </p> <p class="text-center">Hello</p> <p class="text-right">Hello</p> <p class="text-justify"> 为了简化操作，方便使用，Bootstrap通过定义四个类名来控制文本的对齐风格：.text-left：左对齐.text-center：居中对齐 .text-right：右对齐 .text-justify：两端对齐。 </p> <hr /> <!--列表--> <ul > <li>项目列表一</li> <li>项目列表二</li> </ul> <ol> <li>项目列表一</li> <li>项目列表二</li> </ol> <ul class="list-unstyled"> <li>项目列表一</li> <li>项目列表二</li> </ul> <ol class="list-unstyled"> <li>项目列表一</li> <li>项目列表二</li> </ol> <ul class="list-inline"> <li>首页</li> <li>java学院</li> <li>在线课堂</li> </ul> <!--自定义列表--> <dl> <dt>JAVA</dt> <dd>世界上最好的语言</dd> <dt>JAVASCRIPT</dt> <dd>抱大腿</dd> </dl> <dl > <dt>使用bootstrap3的css</dt> <dd>我在写一个水平定义列表的效果，我在写一个水平定义列表的效果</dd> <dt>测试标题不能超过160px的宽度,否则3个点</dt> <dd>我在写一个水平定义列表的效果，我在写一个水平定义列表的效果</dd> </dl> <dl class="dl-horizontal" > <dt>使用bootstrap3的css</dt> <dd>我在写一个水平定义列表的效果，我在写一个水平定义列表的效果</dd> <dt>测试标题不能超过160px的宽度,否则3个点</dt> <dd>我在写一个水平定义列表的效果，我在写一个水平定义列表的效果</dd> </dl> <hr /> <!--代码--> <!--单行代码--> <code>this is a simple code <br /> this is a simple code</code> <!--多行代码--> <pre> public class HelloWorld{ public static void main(String[] args){ System.out.println("helloworld..."); } } <h2>Hello</h2> </pre> <pre class="pre-scrollable"> public class HelloWorld{ public static void main(String[] args){ System.out.println("helloworld..."); } } </pre> <!--快捷键--> <p>使用<kbd>ctrl</kbd>+<kbd>s</kbd>保存</p> <hr /> <!--表格--> <table class="table table-bordered table-hover table-striped table-condensed" > <tr class="active"> <th>JavaSE</th> <th>数据库</th> <th>JavaScript</th> </tr> <tr class="info" > <td>面向对象</td> <td>oracle</td> <td>json</td> </tr> <tr class="success"> <td>数组</td> <td>mysql</td> <td>ajax</td> </tr> <tr class="warning"> <td>数组</td> <td>mysql</td> <td>ajax</td> </tr> <tr class="danger"> <td>数组</td> <td>mysql</td> <td>ajax</td> </tr> </table> </body> </html> - 样式：Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。在使用Bootstrap的表格过程中，只需要添加对应的类名就可以得到不同的表格风格：
表单
表单主要功能是用来与用户做交流的一个网页控件，良好的表单设计能够让网页与用户更好的沟通。表单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。
-
表单控件
- .form-control .input-lg（较大） .input-sm（较小）
- 输入框
- .form-control
- 下拉选择框select
- 多行选择设置：multiple=“multiple”
- 文本域textarea
- <textarea class=“form-control” rows=“3”></textarea>
- 复选框checkbox
- .checkbox，水平显示：.checkbox-inline
- 单选择按钮
- .radio， 水平显示：.radio-inline
- 按钮
- 使用button实现：
- 基础样式：btn
- 附加样式：btn-primary btn-info btn-success btn-warning btn-danger btn-link btn-default
- 多标签支持：使用a div 等制作按钮，设置class属性即可
- 按钮大小：使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮
- 按钮禁用：
- 方法1：在标签中添加disabled属性
- 方法2：在元素标签中添加类名"disabled"
- 在class属性中添加disabled只是样式上禁用了，并不是真正的禁用了此按钮！
- 使用button实现：
- 输入框
- .form-control .input-lg（较大） .input-sm（较小）
-
表单案例
- 水平表单：同一行显示 form-horizontal，配合Bootstrap框架的网格系统
- 内联表单：将表单的控件都在一行内显示 form-inline
- 注意label不会显示，存在的意义：如果没有为输入控件设置label标签，屏幕阅读器将无法正确识别。这也是Bootstrap框架另一个优点之处：为残障人员进行了一定的考虑。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表单</title> <link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"/> </head> <body> <div class="container"> <div class="row"> <div class="col-md-3"> <label>姓名</label> <input type="text" class="form-control input-sm" /> </div> </div> <div class="row"> <div class="col-md-3"> <label>城市</label> <select class="form-control"> <option>上海</option> <option>北京</option> </select> </div> </div> <div class="row"> <div class="col-md-3"> <label>简介</label> <textarea class="form-control"></textarea> </div> </div> <div class="row"> <div class="col-md-3"> <label>爱好</label> <div class="checkbox"> <label><input type="checkbox" >游戏</label> </div> <div class="checkbox"> <label><input type="checkbox" >游戏</label> </div> <div> <label class="checkbox-inline"> <input type="checkbox" >游戏 </label> <label class="checkbox-inline"> <input type="checkbox" >游戏 </label> </div> </div> </div> <div class="row"> <div class="col-md-3"> <label>性别</label> <div class="radio"> <label><input type="radio" >男</label> </div> <div class="radio"> <label><input type="radio" >女</label> </div> <div> <label class="radio-inline"> <input type="radio" >男 </label> <label class="radio-inline"> <input type="radio" >女 </label> </div> </div> </div> <div class="row"> <div class="col-md-6"> <button class="btn">提交</button> <button class="btn btn-default">提交</button> <button class="btn btn-danger">提交</button> <button class="btn btn-warning">提交</button> <button class="btn btn-success">提交</button> <button class="btn btn-info">提交</button> <button class="btn btn-primary">提交</button> <button class="btn btn-link">提交</button> <br /><br /> <button class="btn btn-primary btn-xs">提交</button> <button class="btn btn-primary btn-sm">提交</button> <button class="btn btn-primary btn-lg">提交</button> <br /><br /> <p class="btn btn-default">提交</p> <div class="btn btn-default">提交</div> <a href="#" class="btn btn-default">提交</a> <br /><br /> <button class="btn btn-primary btn-sm" disabled="disabled" onclick="alert(1)"> 提交 </button> <button class="btn btn-primary btn-sm disabled" onclick="alert(1)"> 提交 </button> <br /><br /> <button class="btn btn-success btn-xs"> <span class="glyphicon glyphicon-plus"></span> 添加 </button> <button class="btn btn-warning btn-xs"> <span class="glyphicon glyphicon-pencil"></span> 修改 </button> <button class="btn btn-danger btn-xs"> <span class="glyphicon glyphicon-trash"></span> 删除 </button> </div> </div> <hr /> <form class="form-horizontal"> <div class="form-group"> <label for="uname" class="control-label col-sm-2">姓名</label> <div class="col-sm-4"> <input type="text" id="uname" class="form-control" placeholder="姓名"/> </div> </div> <div class="form-group"> <label for="pwd" class="control-label col-sm-2">密码</label> <div class="col-sm-4"> <input type="pwd" class="form-control" placeholder="密码" /> </div> </div> <div class="form-group"> <div class="col-sm-offset-2"> <div class=" checkbox"> <label> <input type="checkbox" />记住密码 </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button class="btn btn-default">提交</button> </div> </div> </form> <hr /> <form class="form-inline"> <div class="form-group"> <label for="email" >邮箱</label> <input type="email" class="form-control" placeholder="请输入邮箱"/> </div> <div class="form-group"> <label for="pwd" >密码</label> <input type="pwd" class="form-control" placeholder="请输入密码" /> </div> <div class="form-group checkbox"> <label><input type="checkbox" />记住密码</label> </div> <div class="form-group"> <button class="btn btn-default">提交</button> </div> </form> </div> </body> </html>
缩略图
缩略图在电商类的网站很常见，最常用的地方就是产品列表页面。缩略图的实现是配合网格系统一起使用。同时还可以让缩略图配合标题、描述内容，按钮等。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>缩略图</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="thumbnail">
<img src="img/gyy.jpg" />
<h3>高圆圆</h3>
<p>出生于北京市，中国内地影视女演员、模特。</p>
<button class="btn btn-default">
<span class="glyphicon glyphicon-heart"></span>喜欢
</button>
<button class="btn btn-info">
<span class="glyphicon glyphicon-pencil"></span>评论
</button>
</div>
</div>
</div>
</div>
</body>
</html>
面板
-
默认的 .panel组件所做的只是设置基本的边框（border）和内补（padding）来包含内容。
- .panel-default：默认样式
- .panel-heading：面板头
- .panel-body：面板主体内容
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>面板</title> <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" /> </head> <body> <div class="container"> <div class="row"> <div class="panel panel-success"> <div class="panel-heading"> ...... </div> <div class="panel-body"> ...... </div> </div> </div> </div> </body> </html>
BootStrap插件
下拉菜单
-
使用要点：
- 使用一个类名为dropdown 或btn-group的div 包裹整个下拉框:
<div class=“dropdown”></div> - 默认向下dropdown，向上弹起加入 . dropup 即可
- 使用button作为父菜单，使用类名: dropdown-toggle 和自定义data-toggle属性
<button type=“button” class=“btn btn-default dropdown-toggle” data-toggle=“dropdown”></button> - 在button中 使用font 制作下拉箭头
<span class=“caret”></span> - 下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu
- 分组分割线: <li>添加类名“divider”来实现添加下拉分隔线的功能
- 分组标题: li 添加类名 “dropdown-header” 来实现分组的功能
- 对齐方式:
1)、dropdown-menu-left 左对齐 默认样式
2)、dropdown-menu-right 右对齐 - 激活状态（.active）和禁用状态（.disabled）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>下拉菜单</title> <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" /> </head> <body> <div style="height: 300px;"></div> <!--使用一个类名为dropdown 或btn-group的div 包裹整个下拉框--> <div class="dropdown"> <!-- 使用button作为父菜单，使用类名: dropdown-toggle 和自定义data-toggle属性 --> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <!--在button中 使用font 制作下拉箭头--> 请选择喜欢的歌曲 <span class="caret"></span> </button> <!--下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu--> <ul class="dropdown-menu"> <!--分组分割线: <li>添加类名“divider”来实现添加下拉分隔线的功能--> <li class="dropdown-header">--周杰伦--</li> <li class="active"><a href="">不能说的秘密</a></li> <li><a href="">青花瓷</a></li> <li><a href="">我不配</a></li> <li class="divider"></li> <li class="dropdown-header">--林俊杰--</li> <li><a href="">江南</a></li> <li class="disabled"><a href="">把故事写成我们</a></li> </ul> </div> </body> <script type="text/javascript" src="js/jquery-3.4.1.js" ></script> <script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js" ></script> </html> - 使用一个类名为dropdown 或btn-group的div 包裹整个下拉框:
按钮组和列表组
-
使用要点：
- 使用一个类名为btn-group的div 包裹整个按钮组
- 使用标签button 、a、span制作按钮，需要指定类名.btn
- 使用span 制作图标
- 大小分类: btn-group-lg btn-group btn-group-sm btn-group-xs
- 等分按钮: 自适应分组按钮btn-group-justified
- 默认为水平，使用btn-group-vertical 制作垂直按钮组
- 按钮工具栏: 在外层套用 .btn-toolbar 即可
- btn-group-lg仅仅是放大按钮，不能将所有的按钮作为连接在一起的按钮组
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>下拉菜单</title> <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" /> </head> <body> <div class="btn-group"> <button type="button" class="btn btn-default">按钮 1</button> <button type="button" class="btn btn-default">按钮 2</button> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 下拉 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">下拉链接 1</a></li> <li><a href="#">下拉链接 2</a></li> </ul> </div> </div> <div class="btn-group-vertical"> <button type="button" class="btn btn-default">按钮 1</button> <button type="button" class="btn btn-default">按钮 2</button> <div class="btn-group-vertical"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 下拉 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">下拉链接 1</a></li> <li><a href="#">下拉链接 2</a></li> </ul> </div> </div> <ul class="list-group"> <li class="list-group-item">免费域名注册</li> <li class="list-group-item active">免费 Window 空间托管</li> <li class="list-group-item">图像的数量</li> <li class="list-group-item">24*7 支持</li> <li class="list-group-item">每年更新成本</li> </ul> </body> <script type="text/javascript" src="js/jquery-3.4.1.js" ></script> <script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js" ></script> </html>
导航
-
导航栏
- 基本样式：.nav 与" nav-tabs"、"nav-pills"组合制作导航
- 分类:
- 标签型 (nav-tabs)导航
- 胶囊形(nav-pills)导航
- 堆栈(nav-stacked)导航
- 自适应(nav-justified)导航
- 面包屑式(breadcrumb)导航：
- 单独使用样式，不与nav一起使用，直接加入到ol、ul中即可，一般用于导航，主要是起的作用是告诉用户现在所处页面的位置（当前位置）
- 状态：选中状态 active 样式；禁用状态: disable
- 二级菜单
-
分页导航
- 页码导航：ul 标签上加 pagination [pagination-lg | pagination-sm]
- 翻页导航：ul 标签上加 pager
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>导航</title> <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" /> </head> <body> <p>标签式的导航菜单</p> <ul class="nav nav-tabs"> <li ><a href="#">Home</a></li> <li><a href="#">SVN</a></li> <li><a href="#">iOS</a></li> <li><a href="#">VB.Net</a></li> <li class="active"><a href="#">Java</a></li> <li><a href="#">PHP</a></li> </ul> <p>基本的胶囊式导航菜单</p> <ul class="nav nav-pills"> <li><a href="#">Home</a></li> <li><a href="#">SVN</a></li> <li><a href="#">iOS</a></li> <li><a href="#">VB.Net</a></li> <li class="active"><a href="#">Java</a></li> <li><a href="#">PHP</a></li> </ul> <p>面包屑式导航菜单</p> <ul class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">2013</a></li> <li class="active">十一月</li> </ul> <p>分页导航</p> <ul class="pagination"> <li><a href="#">«</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li class="active"><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">»</a></li> </ul> <p>Pager翻页导航</p> <ul class="pager"> <li class="previous"><a href="#">上一页</a></li> <li class="next"><a href="#">下一页</a></li> </ul> </body> <script type="text/javascript" src="js/jquery-3.4.1.js" ></script> <script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js" ></script> </html>
1905
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
