- 1新魔百和M301H_关于CW代工_JL(南传)代工_zn及sm代工区分及鸿蒙架构全网通卡刷包刷机教程_m301h刷机
- 2ajax请求报parsererror错误_ajax parsererror是什么错误
- 3云端技术驾驭DAY15——ClusterIP服务、Ingress服务、Dashboard插件、k8s角色的认证与授权
- 4kubeCon2020重磅演讲：基于k8s构建新一代私有云和容器云_captain k8s
- 5HTML+CSS：3D轮播卡片
- 6Python+医学院校二手书管理 毕业设计-附源码201704_基于python的校园二手交易平台论文开题报告
- 7python函数递归求和详解_Python函数中多类型传值和冗余参数及函数的递归调用
- 8【毕业设计】ASP.NET 网上选课系统的设计与实现(源代码+论文)_aspnet毕业设计含代码
- 9Stable Diffusion提示词总结_stable diffusion 提示词详解
- 10玩转k8s：Pod详解_k8s pod配置文件查看
【Bootstrap-学习小结】_bootstrap心得体会
赞
踩
一、初始Bootstrap
1、简介
简介：是一个基于HTML、CSS和Javascript语言编写的框架，具有简单、灵活的特性，
拥有样式库、组件和插件。常用来开发响应式布局
2、组成
（1）基本结构：栅格系统
（2）丰富的css样式库：只需要改变标签的class属性值，就可以给标签应用不同的样式。
（3）布局组件：有丰富的组件库
（4）插件：基于jQuery的插件，功能强大。
3、浏览器
- PC端
Chrome浏览器的优势:
①市场占有率高，兼容性好，界面简洁、简单易用。基于强大的JavaScript V8引擎,速度很快。
②可通过扩展插件增强功能，便于开发人员使用。内置防止网络钓鱼及恶意软件功能，更加安全。
③跨平台，支持PC端的Windows、Linux和Mac系统，以及移动端的Android和iOS系统。
（1）浏览器按照设备类型来划分，主要包括PC端浏览器和移动端浏览器。
（2）浏览器内核主要包括Blink、WebKit和Trident等。
（3）PC端的浏览器主要包括Google (谷歌)公司的Chrome浏览器、Mozilla公司的Firefox浏览器、和Edge浏览器等。
- 移动端：
①移动端设备主要包括Android、iOS等手机设备。
②屏幕尺寸非常多，手机分辨率和大小也不尽相同，碎片化严重。
（1）移动端的浏览器主要包括Android Browser和Mobile Safari,以及国产浏览器。
（2）浏览器的内核主要是Webkit内核，对HTML5提供了很好的支持。
（3）国产浏览器主要包括UC浏览器、QQ浏览器和百度浏览器等。
4、视口
视口：能将大分辨率尺寸网页缩小显示在手机浏览器
（1）布局视口（layout viewport)：是指网页的宽度
（2）视觉视口（visual viewport)：是指用户正在看到的网站的区域，这个区域的宽度等同于移动设备的浏览器窗口的宽度。
（3）理想视口（ideal viewport)：是指对设备来讲最理想的窗口尺寸。
（4）视口的设置：在<mete>标签中，将name属性设置为viewport，即可设置视口。在终端中以理想视口打开网页。
5、分辨率
6、可缩放矢量图形（Scalable Vector Graphics,SVG)
可缩放矢量图形：是一种开放标准的描述矢量图形的语言，它基于XML（可扩展标记语言）
（1)SVG使用标签的方式定义各种图形，外层标签是<svg>
（2)它的属性包括x、y、width、height用数字表示，每个数字之间用空格或逗号隔开，表示定义在一个左上角（x,y)坐标位置，宽度为width,高度为height的矩形。
二、boorstrap的环境配置
1、在页面中引入本地文件
<link rel="stylesheet" href="../css/bootstrap.min.css">
<script src="../js/jquery-3.4.1.js"></script>
<script src="../js/bootstrap.min.js"></script>
- 1
- 2
- 3
2、使用CDN加速器
（1）CDN的全称是Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，是内容传输更快，更稳定。
（2）用法:(前提必须联网）
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
- 1
- 2
三、bootstrap全局的css样式
1、HTML5文档类型
bootstrap使用到的某些HtmL元素和css属性需要将页面设置为HTML5文档类型。在你项目中的每个页面都要参照下面的格式进行设置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
2、移动设备优先
Bootstrap是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。为了确保适当的绘制和触屏缩放，需要在之中添加viewport 元数据标签。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- 1
3、禁用移动设备上的缩放功能
在移动设备浏览器上，通过为视口(viewport) 设置meta属性为user-scalable=no ,可以禁用其缩放(zooming) 功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。
<meta name="viewport" content=" width=device-width，initial-scale=1,maximum-scale=l，user-scalable=no">
- 1
4、布局容器
Bootstrap需要为页面内容和栅格系统包裹一个.container 容器。我们提供了两个作此用处的类。注意，由于padding等属性的原因，这两种容器类不能互相嵌套。
（1）.container：用于固定宽度并支持响应式布局的容器。
（2）.container-fluid：类似于100%宽度，占据全部视口（viewport）的容器。
举例如下：
<style>
div{
width: 300px;
height: 180px;
background-color: rgb(231, 184, 221);
}
</style>
<body>
<div class="container"> </div>
<br><br>
<div class="container-fluid text-center text-capitalize" >
西安邮电大学 abcd
</div>
</body>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
效果如下图所示：
5、文本排版样式
class=‘text-left’ 文本左对齐
class=‘text-right’ 文本右对齐
class=‘text-center’ 文本居中
class=’ text-justify’ 文本两端对齐
class=‘text-nowrap’ 禁止文本换行
6、设置字母的大小写
class=‘text-lowercase’ 转成小写
class=‘text-uppercase’ 转成大写
class=‘text-capitalize’ 首字母大写
7、列表样式
（1）无样式列表
class=‘list-unstyled’
①无序列表-顺序无关紧要的一组元素。
<body>
<ul class="list-unstyled">
<li>西安</li>
<li>上海</li>
<li>北京</li>
</ul>
</body>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
修改样式之前：
修改样式之后：
②有序列表-顺序至关紧要的一组元素。
<body>
<ol class="list-unstyled">
<li>西安</li>
<li>上海</li>
<li>北京</li>
</ol>
</body>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
修改样式之前：
修改样式之后：
（2）内联列表
通过设置display:inline-block;并添加少量的内补（padding），将所有元素放置于同一行。
class=‘list-inline’
<body>
<ul >
<li>西安</li>
<li>上海</li>
<li>北京</li>
</ul>
</body>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
<ul class="list-inline">
<li>西安</li>
<li>上海</li>
<li>北京</li>
</ul>
- 1
- 2
- 3
- 4
- 5
8、表格样式
（1）表格的全局样式：简要描述它是为任意<table>标签添加.table类可以为其赋予基本的样式。
class=“table”
（2）带边框的表格：添加. table-bordered类为表格和其中的每个单元格增加边框。
class=“table table-bordered”
（3)表格隔行变色，斑马线效果：通过.table-striped类可以给<tbody> 之内的每一行增加斑马条纹样式。
class="table table-bordered table-striped "
（4）鼠标悬停:通过添加.table-hover类可以让<tbody>中的每一行对鼠标悬停状态作出响应。
class=“table table-bordered table-striped table-hover”
（5）紧缩表格:通过添加. table-condensed类可以让表格更加紧凑，单元格中的内补(padding) 均会减半。
class="table table-bordered table-striped table-hover table-condensed”
（6）状态类：通过这些状态类可以为行或单元格设置颜色
.active 鼠标悬停在行或单元格上时所设置的颜色
.success 标识成功或积极的动作-绿色。
.info 标识普通的提示信息或动作-蓝色。
.warning 标识警告或需要用户注意-黄色。
.danger 标识危险或潜在的带来负面影响的动作-红色。
举个例子：
<table class="table table-bordered table-striped table-hover table-condensed "> <thead> <tr> <th>学号</th> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> </thead> <tbody> <tr class="table-success"> <td>1001</td> <td>贾宝玉</td> <td>男</td> <td>18</td> </tr> <tr> <td>1002</td> <td>贾元春</td> <td>男</td> <td>28</td> </tr> <tr class="table-warning"> <td >1003</td> <td>林黛玉</td> <td>女</td> <td>18</td> </tr> <tr> <td>1004</td> <td>王熙凤</td> <td>女</td> <td>19</td> </tr> </tbody> </table>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
效果展示：
9、表单样式
（1）html中的表单：
<form action="远程服务器地址" method="请求方式"></form>
- 1
（2）bootstrap应用到form的样式属性：
- 单独的表单控件会被自动赋予一些全局样式。所有设置了.form-control类的<input>、<textarea>和<select>元素都将被默认设置宽度属性为width: 100%;。将label 元素和前面提到的控件包裹在.form-group中可以获得最好的排列。
a、form-control:应用该样式，则表单控件<input>,<textarea>,<select>的宽度默认100%（即占浏览器窗口宽度的100%）
<input class="form-control"/>
<textarea class="form-control"></textarea>
<select class="form-control"></select>
- 1
- 2
- 3
- 4
b、内联表单:为 元素添加. form-inline类可使其内容左对齐并且表现为inline-block 级别的控件。只适用于视口(viewport) 至少在768px 宽度时(视口宽度再小的话就会使表单折叠)。
<form class="form-inline"></form>
- 1
c、水平排列的表单:通过为表单添加.form-horizontal类，并联合使用Bootstap.预置的栅格类,可以将label标签和控件组水平并排布局。这样做将改变.form–group的行为，使其表现为栅格系统中的行(row) . 因此就无需再额外添加.row了。
<form class="form-horizontal"></form>
- 1
10、按钮
1、可作为按钮使用的标签或元素
●为<a>、<button> 或<input> 元素添加按钮类(button class) 即可使用Bootstrap .
提供的样式。
●虽然按钮类可以应用到<a>和<button>元素上，但是，导航和导航条组件只支持
<button>元素。
●如果<a>元素被作为按钮使用，那么，务必为其设置role= “button” 属性。
●兼容性:强烈建议尽可能使用<button>元素来获得在各个浏览器上获得相匹配的绘制效果。
<a>、<button>、<input type=“button”/>
<a href="#" class="btn btn-default" role="button">公司首页</a>
<button class="btn btn-default">公司简介</button>
<input type="button" class="btn btn-default" value="新闻中心"> <!--普通按钮-->
<input type="submit" class="btn btn-default" value="在线留言"> <!--提交按钮，在form表单外没有意义，form表单里面提交给远程服务器-->
- 1
- 2
- 3
- 4
（1）样式
<button class="btn btn-default">default</button>//默认样式
<button class="btn btn-primary">primary</button>//首选项
<button class="btn btn-success">success</button>//成功
<button class="btn btn-info">info</button>//一般信息
<button class="btn btn-warning">warning</button>//警告
<button class="btn btn-danger">danger</button>//危险
<button class="btn btn-link">link</button>//链接
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
<button type="button" class="btn btn-primary active">激活状态</button>
<button class="btn btn-default" disabled>禁用状态</button>
- 1
- 2
（2）尺寸
btn-lg:大按钮
btn-sm:小按钮
btn-xs:超小按钮
<button class="btn btn-success btn-lg">success</button>
<button class="btn btn-info">info</button>
<button class="btn btn-warning btn-sm">warning</button>
<button class="btn btn-danger btn-xs">danger</button>
- 1
- 2
- 3
- 4
11、图片
(1)class=“img-rounded”：圆角图片
(2)class=“img-circle” ：圆形图片
(3)class=“img-thumbnail”：边框圆角
<img src="../images/001.png" class="img-rounded" width="200px" height="200px">
<img src="../images/002.png" class="img-circle" width="200px" height="200px">
<img src="../images/003.png" class="img-thumbnail" width="200px" height="200px">
- 1
- 2
- 3
12、辅助类
(1)文本颜色
柔和的：<p class="text-muted">...</p>
首选项：<p class="text-primary">...</p>
成功：<p class="text-success">...</p>
信息：<p class="text-info">...</p>
警告：<p class="text-warning">...</p>
危险：<p class="text-danger">...</p>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
☀️举个例子
<body style="text-align: center;">
<p class="text-muted">一</p>
<p class="text-primary">二</p>
<p class="text-success">三</p>
<p class="text-info">四</p>
<p class="text-warning">五</p>
<p class="text-danger">六</p>
</body>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
（2）背景色
<p class="bg-primary"></p>
<p class="bg-success"></p>
<p class="bg-info"></p>
<p class="bg-warning"></p>
<p class="bg-danger"></p>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
☀️举个例子
<body style="text-align: center;">
<p class="bg-primary">一</p>
<p class="bg-success">二</p>
<p class="bg-info">三</p>
<p class="bg-warning">四</p>
<p class="bg-danger">五</p>
</body>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
(3)三角符号：通过使用三角符号可以指示某个元素具有下拉菜单的功能。注意,向上弹出式菜单中的三角符号是反方向的。
class=“caret”
(4)快速浮动类
- 可以将任意元素向左(. pull-left)或向右浮动(. pull-right)。
- 注意:不能用在导航条组件中，导航条组件要使用.navbar-left或. navbar-right
(5)让内容块网页居中
- 为任意元素设置display: block属性并通过margin属性让其中的内容居中。
- <div class=“center-block”> … </div>
- 注意:一定要指定width，否则看不到效果。
(6)清除浮动
- 通过为父元素添加.clearfix 类可以很容易地清除浮动(float) 。
<body>
<div class="clearfix">
<div class="pull-left">左</div>
<div class="pull-right">右</div>
</div>
</body>
- 1
- 2
- 3
- 4
- 5
- 6
(4)显示和隐藏内容:.show类和.hidden类可以强制任意元素显示或隐藏(对于屏幕阅读器也能起效)。
class=“show”
class=“hide”
四、bootstrap的栅格系统
1、栅格系统
（1）将屏幕或视口（viewport)自动分为最多12列。
（2）通过一系列的行（row)和列（column)的组合来创建页面布局。
（3）行（row)必须包含在.container（固定宽度）和.container-fulid(100%宽度)中。
（4）通过行（row)在水平方向创建一组列，内容应当放置于列（column)中，并且，只有列可以作为行的子元素。
（5）如果一行（row)中包含了的列（column)大于12，多余的列（column)所在的元素将被作为一个整体另起一行排列。
2、栅格参数
栅格参数:'*'标识1到12之间的数字
| 样式名称 | 含义 |
|---|---|
| col-xs-* | 超小屏幕、手机 |
| col-sm-* | 小屏幕、平板 |
| col-md-* | 中等屏幕、桌面显示器 |
| col-lg-* | 大屏幕、大桌面显示器 |
☀️举例说明：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="../css/bootstrap.min.css"> <script src="../js/jquery-3.4.1.js"></script> <script src="../js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <div class="col-md-1 bg-success">1</div> <div class="col-md-1 bg-danger">1</div> <div class="col-md-1 bg-success">1</div> <div class="col-md-1 bg-danger">1</div> <div class="col-md-1 bg-success">1</div> <div class="col-md-1 bg-danger">1</div> <div class="col-md-1 bg-success">1</div> <div class="col-md-1 bg-danger">1</div> <div class="col-md-1 bg-success">1</div> <div class="col-md-1 bg-danger">1</div> <div class="col-md-1 bg-success">1</div> <div class="col-md-1 bg-danger">1</div> </div> <br> <div class="container-fluid"> <div class="col-md-8 bg-success">col-md-8</div> <div class="col-md-4 bg-danger">col-md-4</div> </div> <br> <div class="container-fluid"> <div class="col-md-4 bg-success">col-md-4</div> <div class="col-md-4 bg-danger">col-md-4</div> <div class="col-md-4 bg-warning">col-md-4</div> </div> <br> <div class="container-fluid"> <div class="col-md-6 bg-success">col-md-6</div> <div class="col-md-6 bg-danger">col-md-6</div> </div> </body> </html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
效果如下：
3、栅格系统列偏移
(1)列偏移
- 使用. col-md-offset-*类可以将列向右侧偏移。这些类实际是通过使用*选择器为当前元素,增加了左侧的边距(margin) 。例如，. col-md-offset-4类将. col-md-4元素向右侧偏移了4个列(column) 的宽度。
☀️举例如下：
<div class="row">
<div class="col-md-4 bg-success">col-md-4</div>
<div class="col-md-4 bg-danger col-md-offset-4">col-md-4</div>
</div>
- 1
- 2
- 3
- 4
- 5
效果如下：
(2)列嵌套
- 为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的.row元素和一系列.col-sm-*元素到已经存在的.col-sm-* 元素内。被嵌套的行(row) 所包含的列(column) 的个数不能超过12 (其实，没有要求你必须占满12列)。
☀️举例如下：
<div class="row">
<div class="col-md-8 bg-success">
A
<div class="row">
<div class="col-md-4 bg-danger">C<br>C</div>
<div class="col-md-8 bg-primary">D<br>D</div>
</div>
A
</div>
<div class="col-md-4 bg-danger">B<br>B<br>B<br>B</div>
</div>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
效果如下：
4、字体图标
(1)如何使用字体图标
出于性能的考虑，所有图标都需要一个基类和对应每个图标的类。把下面的代码放在任何地方
都可以正常使用。注意，为了设置正确的内补(padding) ，务必在图标和文本之间添加一个
空格。
(2)不要和其他组件混合使用
图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。应该创建一个嵌套的标签，并将图标类应用到这个标签上。
(3)只对内容为空的元素起作用
图标类只能应用在不包含任何文本内容或子元素的元素上。
☀️举个例子：
<button class="btn btn-default">
<span class="glyphicon glyphicon-align-left"></span>
</button>
<button class="btn btn-default">
<span class="glyphicon glyphicon-align-center"></span>
</button>
<button class="btn btn-default">
<span class="glyphicon glyphicon-align-right"></span>
</button>
<button class="btn btn-default">
<span class="glyphicon glyphicon-align-justify"></span>
</button>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
效果如下：
5、下拉菜单
（1）定义容器（容器的class为：dropdown)
（2）在容器中添加菜单触发器和菜单项
<div class="dropdown">
<button class="btn btn-default" data-toggle="dropdown">关于我们<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">公司简介</a></li>
<li><a href="#">公司声誉</a></li>
<li><a href="#">发展历程</a></li>
<li><a href="#">组织结构</a></li>
</ul>
</div>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
（3）分割线
<div class="dropdown">
<button class="btn btn-default" data-toggle="dropdown">关于我们<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">公司简介</a></li>
<li><a href="#">公司声誉</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">发展历程</a></li>
<li><a href="#">组织结构</a></li>
</ul>
</div>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
（4）禁用的菜单项（下拉菜单项不可用）
<div class="dropdown">
<button class="btn btn-default" data-toggle="dropdown">关于我们<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">公司简介</a></li>
<li><a href="#">公司声誉</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">发展历程</a></li>
<li class="disabled"><a href="#">组织结构</a></li>
</ul>
</div>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
6、按钮组：将按钮放在btn-group的容器中
●通过按钮组容器.btn-group把一组按钮放在同一行里。
●按钮组中，除第一个和最后一个按钮外，中间按钮没有圆角。
<div class="btn-group">
<button class="btn btn-default">left</button>
<button class="btn btn-default">middle</button>
<button class="btn btn-default">right</button>
</div>
- 1
- 2
- 3
- 4
- 5
(1)按钮工具栏
按钮工具栏：<div class=“btn-toolbar”>按钮</div>,因此把一组<div class=“btn-group”> 组合进一个<div class=“btn-toolbar”> 中就可以做成更复杂的组件。
☀️举个例子：
<body> <br> <!-- 按钮工具栏 --> <div class="btn-toolbar"> <!-- 按钮组 --> <div class="btn-group"> <button class="btn btn-default">left</button> <button class="btn btn-default">middle</button> <button class="btn btn-default">right</button> </div> <!-- 按钮组 --> <div class="btn-group"> <button class="btn btn-default">1</button> <button class="btn btn-default">2</button> <button class="btn btn-default">3</button> </div> </div> </body>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
效果如下：
(2)按钮组的尺寸：
只要给.btn-group 加上.btn-group-*类，就省去为按钮组中的每个按钮都赋予尺寸类了,如果包含了多个按钮组时也适用。
| 类名 | 用途 |
|---|---|
| .btn-group-lg | 应用于大型按钮组 |
| .btn-group-md | 应用于中型按钮组 |
| .btn-group-sm | 应用于小型按钮组 |
| .btn-group-xs | 应用于超小型按钮组 |
☀️举例如下：
<!-- 按钮组 --> <div class="btn-group btn-group-lg"> <button class="btn btn-default">left</button> <button class="btn btn-default">middle</button> <button class="btn btn-default">right</button> </div> <!-- 按钮组 --> <div class="btn-group btn-group-md"> <button class="btn btn-default">left</button> <button class="btn btn-default">middle</button> <button class="btn btn-default">right</button> </div> <!-- 按钮组 --> <div class="btn-group btn-group-sm"> <button class="btn btn-default">left</button> <button class="btn btn-default">middle</button> <button class="btn btn-default">right</button> </div> <!-- 按钮组 --> <div class="btn-group btn-group-xs"> <button class="btn btn-default">left</button> <button class="btn btn-default">middle</button> <button class="btn btn-default">right</button> </div>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
效果如下：
(3)嵌套
想要把下拉菜单混合到一系列按钮中，只须把.btn-group 放入另一个.btn-group 中。
☀️举例如下：
<div class="btn-group"> <button class="btn btn-default">left</button> <button class="btn btn-default">middle</button> <button class="btn btn-default">right</button> <div class="btn-group"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" > More <span class="caret"></span> </button> <ul class="dropdown-menu" > <li ><a href="#">top</a></li> <li><a href="#">middle</a></li> <li><a href="#">bottom</a></li> </ul> </div> </div>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
效果如下：
7、输入框组
(1)描述
- 通过在文本输入框<input> 前面、后面或是两边加上文字或按钮，可以实现对表单控件的扩展。为.input-group 赋予.input-group-addon 类，可以给.form-control的前面或后面添加额外的元素。
- 只支持文本输入框<input>, 不能用于<select>和<textarea>元素。
(2)尺寸
- 为.input-group 添加相应的尺寸类，其内部包含的元素将自动调整自身的尺寸。尺寸类包括: .input-group-lg和.input-group-sm。
☀️举个例子：
<!-- 输入框组 -->
<div class="container">
<div class="input-group col-md-2">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="username">
</div>
- 1
- 2
- 3
- 4
- 5
- 6
效果如下：
(3)作为额外元素的按钮
为输入框组添加按钮需要额外添加一层嵌套，不是.input-group-addon, 而是添加.input-group-btn来包裹按钮元素。由于不同浏览器的默认样式无法被统一的重新赋值，所以才需要这样做。
☀️举个例子：
<!-- 输入框组 --> <div class="container"> <div class="input-group col-md-2"> <input type="text" class="form-control" placeholder="username"> <span class="input-group-btn"> <button class="btn btn-danger" data-toggle="dropdown">开始搜索<span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">AAAA</a></li> <li><a href="#">AAAA</a></li> <li><a href="#">AAAA</a></li> <li><a href="#">AAAA</a></li> <li class="divider"></li> <li><a href="#">AAAA</a></li> </ul> </span> </div> </div>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
效果如下：
