Bootstrap(ui框架)
目录总览:
✍目录总览:(布局容器、栅格网格系统、排版、表单、缩略图、导航元素、分页、插件)
1、Bootstrap
1.1、下载与使用
- 英文官网:http://getbootstrap.com/
- 中文网站:https://getbootstrap.net/
1.进入中文网站,选择版本 v3.4.0
2.下载完成后
- 拷贝 dist 文件夹到项目中
- 由于我们之后可能还会使用 LayUi 等其他插件,所以我们将 dist 改为 Bootstrap,方便辨认
3.将 jQuery.js 放入我们的 js目录下
- 因为 jQuery.js 并不属于 Bootstrap,所以我们放在 js 目录下
4.在 html 中模板为
<!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="css/bootstrap.min.css" rel="stylesheet"></head><body><h1>Hello, world!</h1><!-- 如果要使⽤Bootstrap的js插件,必须先调⼊jQuery --><script src="js/jquery-3.4.1.js"></script><!-- 包括所有bootstrap的js插件或者可以根据需要使⽤的js插件调⽤ --><script src="js/bootstrap.min.js"></script></body>
</html>
注意:
- 如果要使⽤Bootstrap的js插件,必须先调用 jQuery.js
说明:
- viewport 标记⽤于指定用户是否可以缩放Web页面
- width 和 height 指令分别指定视区的逻辑宽度和⾼度。他们的值要么是以像素为单位的数字,要么是⼀个特殊的标记符号。
- width 指令使用 device-width 标记可以指示视区宽度应为设备的屏幕宽度。
- height 指令使用 device-height 标记指示视区⾼度为设备的屏幕⾼度。
- initial-scale 指令用于设置Web页面的初始缩放比例。默认的初始缩放比例值因智能手机浏览器的不同而有所差异。通常情况下设备会在浏览器中呈现出整个Web页面,设为1.0则将显示未经缩放的Web⽂档。
2、布局容器
2.1、.container
.container
类用于固定宽度并支持响应式布局的容器(网页两侧留白)
<div class="container">...
</div>
2.2、.container-fluid
.container-fluid
类用于 100% 宽度,占据全部视口 (viewport) 的容器(网页两侧不留白)
<div class="container-fluid">...
</div>
3、栅格网格系统
- Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。
- 栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。
- Bootstrap框架中的网格系统就是将容器平分成12份。
<div class="container"><div class="row"><div class="col-md-4">4列</div><div class="col-md-8">8列</div></div>
</div>
注意:
行(row)必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中
具体内容应该放置在列容器 (column) 之内
col-屏幕尺寸-列数,其中屏幕尺寸有
xs(xsmall phones) 超小屏(自动)
sm(small tablets) 小屏(750px)
md(middle desktops) 中屏(970px)
lg(larger desktops) 大屏(1170px)
<!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="bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head><body><!-- 布局容器 --><div class="container"><!-- 行元素 --><div class="row"><!-- 列元素 col-xs-数值 col-sm-数值 col-md-数值 col-lg-数值--><div class="col-md-4" style="background-color: red;">4列</div><div class="col-md-8" style="background-color: pink;">8列</div></div></div>
</body></html>
3.1、列组合
列组合简单理解就是更改数字来合并列(原则:列总和数不能超12,大于12则自动换到下一行),有点类似于表格的 colspan 属性
<div class="container"><div class="row"><div class="col-md-4">4列</div><div class="col-md-8">8列</div></div><div class="row"><div class="col-md-2">2列</div><div class="col-md-10">10列</div></div>
</div>
3.2、列偏移
- 如果我们不希望相邻的两个列紧靠在一起,但又不想使用 margin 或者其他的技术手段来。这个时候就可以使用列偏移 (offset) 功能来实现。
- 使用列偏移也非常简单,只需要在列元素上添加类名 “col-md-offset-*” (星号代表要偏移的列组合数),那么具有这个类名的列就会向右偏移。
- 例如,你在列元素上添加 “col-md-offset-8” ,表示该列向右移动8个列的宽度(要保证列与偏移列的总数不超过12,不然会导致列 断行|换行 显示)
<body><!-- 布局容器 --><div class="container"><!-- 行元素 --><div class="row"><!-- 列元素 --><div class="col-md-4 " style="background-color: red;">4</div><div class="col-md-2 col-md-offset-4" style="background-color: pink;">2</div></div></div>
</body>
3.3、列排序
<div class="container"><div class="row"><!--向右浮动10列距离--><div class="col-md-1 col-md-push-10"> 1列 </div><!--向右浮动1列距离--><div class="col-md-1 col-md-push-1"> 1列 </div></div>
</div>
- 列排序就是改变列的方向,就是改变左右浮动,并且设置浮动的距离。
- 在 Bootstrap 框架的网格系统中是通过 添加类名
col-md-push-*
和col-md-pull-*
(其中星号代表移动的列组合数) - 左浮动往前
pull
,右浮动往后push
我们让第二个盒子向右浮动1个列的距离
<body><!-- 布局容器 --><div class="container"><!-- 行元素 --><div class="row"><!-- 列元素 --><div class="col-md-1 " style="background-color: red;">1</div><!-- 第二个盒子向右浮动1个列的距离 --><div class="col-md-1 col-md-push-1" style="background-color: pink;">1</div><div class="col-md-1 " style="background-color: greenyellow;">1</div><div class="col-md-1 " style="background-color:yellow;">1</div></div></div>
</body>
我们让第二个盒子向右浮动3个列的距离
<body><!-- 布局容器 --><div class="container"><!-- 行元素 --><div class="row"><!-- 列元素 --><div class="col-md-1 " style="background-color: red;">1</div><!-- 第二个盒子向右浮动3个列的距离 --><div class="col-md-1 col-md-push-3" style="background-color: pink;">1</div><div class="col-md-1 " style="background-color: greenyellow;">1</div><div class="col-md-1 " style="background-color:yellow;">1</div></div></div>
</body>
3.4、列嵌套
- 列嵌套:你可以在一个列中添加一个或者多个行(row) 容器,然后在这个行容器中插入列。
<body><!-- 布局容器 --><div class="container"><div class="row"><!--先分一个8列--><div class="col-md-8" style="background-color: white ;"><!--再分的8列里面再分3个4列--><div class="col-md-4" style="background-color: red;">4</div><div class="col-md-4" style="background-color: green;">4</div><div class="col-md-4" style="background-color: yellow;">4</div></div><!--再分一个4列--><div class="col-md-4" style="background-color: blue ;">4</div></div></div>
</body>
4、排版
4.1、标题
- Bootstrap 和普通的 HTML 页面一样,定义标题都是使用标签 h1-h6,只不过 Bootstrap 覆盖了其默认的样式,使用其在所有浏览器下显示的效果一样,
- 为了让非标题元素和标题使用相同的样式,还特意定义了 .h1 ~ .h6 六个类名。同时后面可以紧跟着一行小的标题 或使用 .small
<h1>Bootstrap Heading<small>副标题</small></h1>
<div class="h1">Bootstrap 标题1<span class = "small"> 副标题 </span>
</div>
4.2、段落
- 段落是排版中的另一个重要元素之一。
- 通过.lead来突出强调内容(其作用就是增大文本字号,加粗文本,而且对行高和margin也做相应的处理)。可以使用以下标签给文本做突出样式处理。
<small>
:小号字<b><strong>
:加粗<i><em>
: 斜体
<p>以后的你会感谢现在努力的你</p>
<p class="lead">以后的你会感谢现在努力的你</p>
<p class="lead"><small>以后的</small><!-- 小号字 --><b>你</b>会 <!-- 加粗 --><i>感谢</i>现在 <!-- 斜体 --><em>努力</em>的 <!-- 斜体 --><strong>你</strong><!-- 加粗 -->
</p>
4.3、强调
定义了一套类名,这里称其为强调类名,这些强调嘞都是通过颜色来表示强调,具体说明如下:
- .text-muted: 提示,使用浅灰色(#999)
- .text.primary :主要,使用蓝色(#428bca)
- .text-success:成功,使用浅绿色(#3c763d)
- .text-info:通知信息,使用浅蓝色(#31708f)
- text-warning:警告,使用黄色(#8a6d3n)
- text-danger:危险,使用褐色(#a94442)
<div class="container"><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>
</div>
4.4、对齐效果
在CSS中常常使用text-align
来实现文本的对齐风格的设置。
其中主要有四种风格
值 | 说明 |
---|---|
left | 左对齐 |
right | 右对齐 |
center | 居中对齐 |
justify | 两端对齐 |
- Bootstrap 中通过定义四个类名来控制文本的对齐风格
类名 | 说明 |
---|---|
text-left | 左对齐 |
text-right | 右对齐 |
text-center | 居中对齐 |
text-justify | 两端对齐 |
<div class="container"><p class="text-left">我居左</p><p class="text-center">我居中</p><p class="text-right">我居右</p><p class="text-justify">网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份</p></div>
4.5、列表
4.5.1、无序列表
排列顺序无关紧要的一列元素。
<ul><li>...</li>
</ul>
4.5.2、有序列表
顺序至关重要的一组元素。
<ol><li>...</li>
</ol>
4.5.3、自定义列表
<dl><dt>HTML</dt><dd>超文本标记语言</dd><dt>CSS</dt><dd>层叠样式表是一种样式表语言</dd>
</dl>
4.5.3、水平定义列表
在原有的基础加入了一些样式,使用样式class=“dl-horizontal” 制作水平定义列表,当标题宽度超过 160px 时,将会显示三个省略号。
<div class="container"><dl class="dl-horizontal"><dt>HTML 超文本标记语言</dt><dd>HTML称为超文本标记语言,是一种标识性的语言。</dd><dt>测试标题不能超过160px的宽度,否则2个点</dt><dd>我在写一个水平定义列表的效果,我在写一个水平定义列表的效果。</dd></dl>
</div>
4.5.4、去点列表
移除了默认的 list-style
样式,也就是去掉了原无序列表前面的点 (去掉项目符号(编号))
<ul class="list-unstyled"><li>...</li>
</ul>
4.5.5、内联列表
给列表添加class=“list-inline”,把垂直列表换成水平列表,而且去掉项目符号(编号),将所有元素放置于同一行。也可以说内联列表就是为了制作水平导航而生的。
<ul><li>首页</li><li>java学院</li><li>在线课堂</li>
</ul>
4.6、代码
一般在个人博客上使用的较为频繁,用于显示代码的风格。在 Bootstrap 主要提供了三种代码风格:
- 使用 来显示单行内联代码
- 使用来显示多行块代码
- 样式pre-scrollable(height,max-height 高度固定为340px,超过则存在滚动条)
- 使用 来显示用户输入代码。如快捷键
4.6.1、单行内联代码
<code>this is a simple code</code>
4.6.2、快捷键
<p>使用<kbd>ctrl+s</kbd>保存
</p>
4.6.2、多行块代码
<body><!-- 1.显示代码原本格式,包括空格和换行 --><pre>public class HelloWorld {public static void main(String[] args){System.out.println("helloworld...");}}</pre><!-- 2.显示html标签的代码需要适应字符实体 小于号(<)要使用硬编码“<”来替代,大于号(>)使用“>”来替代 --><pre><h2>Hello World</h2></pre><pre><h2>Hello World</h2></pre><!-- 3.当高度超过,会存在滚动条 --><pre class="pre-scrollable"><ol><li>...........</li><li>...........</li><li>...........</li><li>...........</li><li>...........</li><li>...........</li><li>...........</li><li>...........</li><li>...........</li><li>...........</li><li>...........</li><li>...........</li></ol></pre>
</body>
4.7、表格
Bootstrap 为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。在使用Bootstrap得到表格过程种,只需要添加对应的类名就可以得到不同的表格风格。
4.7.1、基础样式
class = "table"
: 基础表格
4.7.2、附加样式
类名 | 说明 |
---|---|
table-striped | 斑马线表格 |
table-bordered | 带边框的表格 |
table-hover | 鼠标悬停高亮的表格 |
table-condensed | 紧凑型表格,单元格没内距或者内距较其他表格的内距小 |
<body><table class="table table-bordered table-striped table-hover table-condensed"><tr><th>JavaSE</th><th>数据库</th><th>JavaScript</th></tr><tr><td>面向对象</td><td>oracle</td><td>json</td></tr><tr><td>数组</td><td>mysql</td><td>ajax</td></tr><tr><td>面向对象</td><td>oracle</td><td>json</td></tr><tr><td>数组</td><td>mysql</td><td>ajax</td></tr></table>
</body>
4.7.3、tr、th、td样式
提供了五种不同的类名,每种类名控制了行的不同背景颜色
类名 | 说明 |
---|---|
active | 将悬停的颜色应用在行或者单元格上 |
success | 表示成功的操作 |
info | 表示信息变化的操作 |
warning | 表示一个警告的操作 |
danger | 表示一个危险的操作 |
<body><table class="table table-bordered table-striped table-hover table-condensed"><tr class="info"><th>JavaSE</th><th>数据库</th><th>JavaScript</th></tr><tr class="active"><td>面向对象</td><td>oracle</td><td>json</td></tr><tr class="danger"><td>数组</td><td>mysql</td><td>ajax</td></tr><tr class="warning"><td>面向对象</td><td>oracle</td><td>json</td></tr><tr class="success"><td>数组</td><td>mysql</td><td>ajax</td></tr></table>
</body>
5、表单
表单主要功能是用来和用户做交流的一个网页控件,良好的表单设计能够让网页与用户更好的沟通。表单中常见的元素主要包括:
- 文本输入框
- 下拉选择框
- 单选按钮
- 复选按钮
- 文本域和按钮等
5.1、表单控件
class="form-control"
表单元素的样式class="input-lg"
:表单控件较大class="input-sm"
: 表单控件较小
5.1.1、输入框text
- 添加
class = "form-controll"
<div class="container"><!-- 文本框 --><div class="row"><div class="col-sm-3"><!--原格式文本域--><input type="text" name="" id="" /><!--表单样式文本域--><input type="text" name="" id="" class="form-control" /><!--较大文本域--><input type="text" name="" id="" class="form-control input-lg" /><!--较小文本域--><input type="text" name="" id="" class="form-control input-sm" /></div></div>
</div>
5.1.2、下拉选择框select
- 添加class = “form-controll”
- 多个选择设置
multiple="multuple"
- 多个选择设置
<body><div class="container"><!-- 原格式下拉框 --><select><option>北京</option><option>上海</option><option>深圳</option></select><hr><hr><hr><!-- 表单样式下拉框 --><select class="form-control"><option>北京</option><option>上海</option><option>深圳</option></select><hr><hr><hr><!-- 表单样式下拉框提供多个选择 --><select class="form-control" multiple="multuple"><option >北京</option><option>上海</option><option>深圳</option></select></div>
</body>
5.1.3、文本域textarea
- 添加
class = "form-controll"
- 一般都是用栅格来控制文本域的大小
<div class="container"><!-- 占3列的原格式文本域 --><div class="row"><div class="col-sm-3"><textarea rows="3"></textarea></div><!-- 占6列的文本域 --><div class="col-sm-6"><textarea class="form-control" rows="3"></textarea></div></div>
</div>
5.1.4、复选框checkbox
- 垂直显示(给input标签加):
class="checkbox"
- 水平显示(给label标签加):
class="checkbox-inline"
<div class="container"><!-- 垂直显示 --><div><div class="checkbox"><label><input type="checkbox" >游戏</label></div><div class="checkbox"><label><input type="checkbox" >学习</label></div></div><!-- 水平显示 --><div><label class="checkbox-inline"><input type="checkbox" >游戏</label><label class="checkbox-inline"><input type="checkbox" >学习</label></div>
</div>
5.1.5、单选框radio
- 垂直显示(给input标签加):
class="radio"
- 水平显示(给label标签加):
class="radio-inline"
<div class="container"><div class="row"><!-- 垂直显示 --><div><div class="radio"><label><input type="radio" >男</label></div><div class="radio"><label><input type="radio" >女</label></div></div><!-- 水平显示 --><div><label class="radio-inline"><input type="radio" >男</label><label class="radio-inline"><input type="radio" >女</label></div></div>
</div>
5.1.6、按钮
①基础样式
- 基础样式(给button标签加):
class="btn"
<button class="btn">按钮</button>
②附加样式
类名 | 样式 |
---|---|
class="btn btn-default"
|
默认样式Default |
class="btn btn-primary"
|
首选项Primary |
class="btn btn-success"
|
成功Success |
class="btn btn-info"
|
一般信息Info |
class="btn btn-warning"
|
警告Warning |
class="btn btn-danger"
|
危险Danger |
class="btn btn-link"
|
链接Link |
<div class="container"><!-- Standard button --><button type="button" class="btn btn-default">(默认样式)Default</button><!-- Provides extra visual weight and identifies the primary action in a set of buttons --><button type="button" class="btn btn-primary">(首选项)Primary</button><!-- Indicates a successful or positive action --><button type="button" class="btn btn-success">(成功)Success</button><!-- Contextual button for informational alert messages --><button type="button" class="btn btn-info">(一般信息)Info</button><!-- Indicates caution should be taken with this action --><button type="button" class="btn btn-warning">(警告)Warning</button><!-- Indicates a dangerous or potentially negative action --><button type="button" class="btn btn-danger">(危险)Danger</button><!-- Deemphasize a button by making it look like a link while maintaining button behavior --><button type="button" class="btn btn-link">(链接)Link</button>
</div>
③多标签支持
- 多标签支持:使用 a div input 等制作按钮
<div class="container"><a class="btn btn-default" href="#" role="button">Link</a><button class="btn btn-default" type="submit">Button</button><input class="btn btn-default" type="button" value="Input"><input class="btn btn-default" type="submit" value="Submit">
</div>
注意:
- 虽然按钮类可以应用到 和 元素上,但是,导航和导航条组件只支持 元素。
- 如果 元素被作为按钮使用 – 并用于在当前页面触发某些功能 – 而不是用于链接其他页面或链接当前页面中的其他部分,那么,务必为其设置 role=“button” 属性。
- 我们总结的最佳实践是:强烈建议尽可能使用 元素来获得在各个浏览器上获得相匹配的绘制效果。
④设置按钮大小
使用
.btn-lg
、.btn-sm
或.btn-xs
就可以获得不同尺寸的按钮class="btn-lg"
大按钮class="btn-sm"
小按钮class="btn-xs"
超小按钮
<div class="container"><p><button type="button" class="btn btn-primary btn-lg">(大按钮)Large button</button><button type="button" class="btn btn-default btn-lg">(大按钮)Large button</button></p><p><button type="button" class="btn btn-primary">(默认尺寸)Default button</button><button type="button" class="btn btn-default">(默认尺寸)Default button</button></p><p><button type="button" class="btn btn-primary btn-sm">(小按钮)Small button</button><button type="button" class="btn btn-default btn-sm">(小按钮)Small button</button></p><p><button type="button" class="btn btn-primary btn-xs">(超小尺寸)Extra small button</button><button type="button" class="btn btn-default btn-xs">(超小尺寸)Extra small button</button></p>
</div>
⑤按钮禁用
- 为
<button>
元素添加disabled="disabled"
属性,使其表现出禁用状态。
<div class="container"><button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button><button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button></div>
5.2、表单布局
5.2.1、垂直表单
基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤:
- 向父元素 元素 添加 role=“form”
- 把标签和控件放在一个带有 class=“form-group” 的
中。这是获取最佳间距所必需的
- 向所有的文本元素 、 、select 添加 class=“form-control”
<body><form action="#" class="form-horizontal" role="form"><h2 align="center">用户信息表</h2><!-- 表单中的表单元素组 --><!-- 输入框 --><div class="form-group"><label for="uname" class="control-label col-md-2">姓名</label><div class="col-md-8"><input type="text" id="uname" class="form-control" placeholder="请输入姓名" /></div></div><!-- 输入框 --><div class="form-group"><label for="upwd" class="control-label col-md-2">密码</label><div class="col-md-8"><input type="password" id="upwd" class="form-control" placeholder="请输入密码" /></div></div><!-- 多选框 --><div class="form-group"><label class="control-label col-md-2">爱好</label><div class="col-md-8"><label class="checkbox-inline"><input type="checkbox" />敲代码</label><label class="checkbox-inline"><input type="checkbox" />跳舞</label></div></div><!-- 下拉选择框 --><div class="form-group"><label class="control-label col-md-2">城市</label><div class="col-md-8"><select class="form-control"><option>请选择城市</option><option>上海</option><option>北京</option><option>深圳</option></select></div></div><!-- 文本框 --><div class="form-group"><label for="remark" class="control-label col-md-2">简介</label><div class="col-md-8"><textarea id="remark" class="form-control"></textarea></div></div><!-- 按钮 --><div class="form-group"><div class="col-md-2 col-md-offset-5"><button class="btn btn-primary">提交</button></div></div></form>
</body>
5.2.1、内联表单
- 如果需要创建一个表单,它的所有元素是内联的,向左对齐的,标签是并排的,请向
<form>
标签添加class="form-inline"
。
<body><div class="container"><!-- 内联表单 --><form action="#" class="form-inline" role="form"><div class="form-group"><label for="userName">姓名</label><input type="text" id="userName" class="form-control" placeholder="请输入姓名" /></div><div class="form-group"><label for="userPwd">密码</label><input type="text" id="userPwd" class="form-control" placeholder="请输入姓名" /></div><div class="form-group"><label for="userName">姓名</label><input type="text" id="userName" class="form-control" placeholder="请输入密码" /></div><div class="form-group"><button class="btn btn-warning">提交</button></div></form></div>
</body>
6、缩略图
6.1、字体图标
- 在我们下载的 Bootstrap 加压文件中有 fonts 文件夹,里面就是我们的字体图标
- 只需将 fonts 文件夹复制到我们的项目红,我们就可以使用字体图标了
- 语法:
<span class="字体图标类名"> 字体图标 </span>
6.2、缩略图使用
大多数站点都需要在网格中布局图像、视频、文本等。Bootstrap 通过缩略图为此提供了一种简便的方式
使用 Bootstrap 创建缩略图的步骤如下:
在图像周围添加带有 class=“thumbnail” 的 标签。
这会添加四个像素的内边距(padding)和一个灰色的边框。
当鼠标悬停在图像上时,会动画显示出图像的轮廓。
<body><div class="container"><div class="col-sm-6 col-md-3"><a href="#" class="thumbnail"><img src="img/timg.jpg" alt="通用的占位符缩略图"></a></div></div>
</body>
6.3、自定义内容
现在我们有了一个基本的缩略图,我们可以向缩略图添加各种 HTML 内容,比如标题、段落或按钮。具体步骤如下:
- 把带有 class=“thumbnail” 的 标签改为
。
- 在该
内,您可以添加任何您想要添加的东西。由于这是一个,我们可以使用默认的基于 span 的命名规则来调整大小。
- 如果您想要给多个图像进行分组,请把它们放置在一个无序列表中,且每个列表项向左浮动。
<div class="container"><!-- 第一个缩略图 --><div class="col-md-3"><div class="thumbnail"><img src="img/timg.jpg" alt="..."><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 class="col-md-3"><div class="thumbnail"><img src="img/timg.jpg" alt="..."><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 class="col-md-3"><div class="thumbnail"><img src="img/timg.jpg" alt="..."><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>
6.4、面板
- 面板组件用于把 DOM 组件插入到一个盒子中
- 创建一个基本的面板,只需要向
<div>
元素添加class="panel panel-default"
即可
<div class="panel panel-default"><div class="panel-body">这是一个基本的面板</div>
</div>
默认的 .panel
组件所做的只是设置基本的边框 border 和 內补 padding 来包含内容
6.4.1、面板
- 给盒子添加
class="panel-heading"
可以很简单地向面板添加标题。 - 给盒子添加
class="panel-body"
可以向面板添加主题内容
<div class="panel panel-warning"><div class="panel-heading"><h2>明星合集</h2></div><div class="panel-body"><div class="col-md-3"><div class="thumbnail"><img src="img/timg.jpg" alt="..."><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>
7、导航元素
7.1、标签式的导航菜单
- 给一个无序列表添加
class="nav nav-tabs"
- 给任意一个 li 添加
class="active"
(表示选中这个导航)
<body><div class="container"><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></div>
</body>
7.2、胶囊式的导航菜单
- 给一个无序列表添加
class="nav nav-pills"
- 给任意一个 li 添加
class="active"
(表示选中这个导航)
<div class="container"><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>
</div>
①垂直的胶囊式导航菜单
- 给一个无序列表添加
class="nav nav-pills"
的同时添加class="nav-stacked"
- 给任意一个 li 添加
class="active"
(表示选中这个导航)
<div class="container"><p>基本的垂直的胶囊式导航菜单</p><ul class="nav nav-pills nav-stacked"><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>
</div>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B9j5medT-1649905697522)(C:\Users\ACER\AppData\Roaming\Typora\typora-user-images\image-20220327160143584.png)]
7.3、两端对齐导航
- 让标签式导航两端对齐:给一个无序列表添加
class="nav nav-tabs nav-justified"
- 让胶囊式导航两端对齐:给一个无序列表添加
class="nav nav-pills nav-justified"
<div class="container"><p>两端对齐的标签导航元素</p><ul class="nav nav-pills nav-justified"><li class="active"><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><a href="#">Java</a></li><li><a href="#">PHP</a></li></ul><br><br><br><hr><p>两端对齐的胶囊导航元素</p><ul class="nav nav-tabs nav-justified"><li class="active"><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><a href="#">Java</a></li><li><a href="#">PHP</a></li></ul>
</div>
7.4、总结
类 | 描述 |
---|---|
.nav nav-tabs | 标签页 |
.nav nav-pills | 胶囊式标签页 |
.nav nav-pills nav-stacked | 胶囊式标签页以垂直方向堆叠排列的 |
.nav-justified | 两端对齐的标签页 |
8、分页
8.1、默认的分页
- 给一个无序列表添加
class="pagination"
- 给任意一个 li 添加
class="active"
(表示选中这一页)
<div class="container"><p>分页导航</p><ul class="pagination"><li><a href="#">«</a></li><li class="active"><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#">»</a></li></ul>
</div>
8.2、翻页
- 给一个无序列表添加
class="pager"
<div class="container"><p>翻页导航</p><ul class="pager"><li><a href="#">Previous</a></li><li><a href="#">Next</a></li></ul>
</div>
9、插件
我们在使用 Bootstrap 插件时
- 引入 Bootstrap 的核心 CSS 文件
- 引入 jquery 的核心 js 文件,需要在 bootstrap 的 js 之前引入
- 引入 Bootstrap 的核心 js 文件
<head><meta charset="utf-8" /><title>Document</title><!-- 引入Bootstrap 的核心CSS文件 --><link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"><!-- 引入jquery的核心js文件,需要在bootstrap的js之前引入 --><script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script><!-- 引入Bootstrap 的核心js文件 --><script src="bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
9.1、下拉菜单
使用一个 class=“dropdown” 的div 包裹整个下拉框
使用一个 class=“dropdown-toggle” data-toggle=“dropdown” 的按钮作为父菜单
- 给父菜单后设置一个下拉箭头
使用一个 class=“dropdown-menu” 的 ul 列表作为下拉菜单项
- 使用 class=“dropdown-header” 的 li 作为分组的标题
- 使用 class=“driver” 的 li 作为下拉分割线
<body><!-- 1.使用一个类名为dropdown 或 btn-group 的div包裹整个下拉框<div class="dropdown"></div>默认下拉框向上为 dropup ,向下为 dropdown--><div class="dropdown"><!-- 使用 button 作为父菜单,使用类名: dropdown-toggle 和自定义 data-toggle属性--><button class="btn btn-default dropdown-toggle" data-toggle="dropdown">喜欢的频道<!-- 设置下拉箭头 --><span class="caret"></span></button><!-- 下拉菜单项使用一个 ul 列表,并且定义一个类名为 dropdown-menu --><ul class="dropdown-menu"><!-- 分组标题: li 添加类名 dropdown-header 来实现分组的功能--><li class="dropdown-header">科普</li><li><a href="#">人与自然</a></li><!-- 分割线: li 添加类名 driver 来实现下拉分割线的功能 --><li class="driver"></li><li class="dropdown-header">影视</li><li class="active"><a href="#">快乐大本营</a></li><li class="disabled"><a href="#">暴走大事件</a></li><li><a href="#">木鱼水心</a></li></ul></div>
</body>
9.2、模态框
- 使用方式一:通过 data 属性:在控制器元素(比如按钮或者链接)上设置属性data-toggle=“modal” ,同时设置 data-target="#identifier" 或href="#identifier" 来指定要切换的特定的模态框(带有 id =“identifier” )
- 使用方式二:通过 JavaScript:使用这种技术,可以通过简单的一行 JavaScript 来调用带有 id=“identifier” 的模态框:
9.2.1、方式一
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
<!-- 模态框(Modal) -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h4 class="modal-title" id="myModalLabel">模态框(Modal)标题</h4></div><div class="modal-body">在这里添加一些文本</div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button><button type="button" class="btn btn-primary">提交更改</button></div></div><!-- /.modal-content --></div><!-- /.modal -->
</div>
9.2.2、方式二
调用带有 id="identifier"
的模态框:
- 打开模态框:
$('#identifier').modal('show')
- 关闭模态框:
$('#identifier').modal('hide')
</body>
<button class="btn btn-primary btn-lg" id="btn">开始演示模态框</button>
<!-- 模态框(Modal) -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h4 class="modal-title" id="myModalLabel">模态框(Modal)标题</h4></div><div class="modal-body">在这里添加一些文本</div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button><button type="button" class="btn btn-primary" id="submit_btn">提交更改</button></div></div></div>
</div><script>// 绑定按钮的点击事件$("#btn").click(function() {//手动打开模态框$('#myModal').modal('show');})//关闭模态框$("#submit_btn").click(function() {//手动关闭模态框$('#myModal').modal('hide');})
</script>
9.3、模态框常用改法
提供一个模态框的常用改法模板:以添加用户为例(直接复制修改即可)
</body>
<button class="btn btn-primary btn-lg" id="btn">开始演示模态框</button>
<!-- 模态框(Modal) -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h4 class="modal-title" id="myModalLabel">添加用户</h4></div><div class="modal-body"><form class="form-horizontal" role="form"><div class="form-group"><label for="uname" class="control-label col-md-2">姓名</label><div class="col-md-8"><input type="text" id="uname" class="form-control" placeholder="请输入姓名" /></div></div><div class="form-group"><label for="upwd" class="control-label col-md-2">密码</label><div class="col-md-8"><input type="text" id="upwd" class="form-control" placeholder="请输入密码" /></div></div></form></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button><button type="button" class="btn btn-primary" id="submit_btn">提交更改</button></div></div><!-- /.modal-content --></div><!-- /.modal -->
</div><script>// 绑定按钮的点击事件$("#btn").click(function() {//手动打开模态框$('#myModal').modal('show');})//关闭模态框$("#submit_btn").click(function() {//手动关闭模态框$('#myModal').modal('hide');})
</script>
Bootstrap(ui框架)相关推荐
- bootstrap 新闻列表_kuapingUI 2.2 版本发布,跨屏 UI-bootstrap 大组件 UI 框架
kuapingUI 2.2 版本发布,增加了一个比较实用的工具栏web组件,是由分享按钮组 + 联系按钮组构成,分享按钮组包含了 QQ空间.朋友圈.QQ.微信.微博等分享:联系按钮组包含了 微信.QQ ...
- 基于Bootstrap简洁的后台UI框架
基于Bootstrap简洁的后台UI框架.页面左侧导航菜单为蓝色风格,可响应式.页面简洁,代码更简洁,可快速嵌入程序开发中 以下是效果图: 资源下载地址:http://download.csdn.ne ...
- 推荐几个bootstrap 后端UI框架
工欲善其事,必先利其器 对于从事软件开发的您也一样,有一套熟悉的bootstrap后台ui框架,bootstrap 后端模板让您的开发速度大幅度提升 这是本人经常使用到的一些bootstrap后台框架 ...
- 前端UI框架-Bootstrap 框架
设计前端页面或者组件的时候,原生的html组件,比较难看,自己设计那些css样式,非常麻烦,工作量很大,还不一定会.但是其实,网上有很多开源的组件库,拿来使用就可以了,例如:Bootstrap,Eas ...
- Web前端快速开发 Bootstrap 响应式UI框架
文章目录 前言 Bootstrap介绍 Bootstrap3 Bootstrap 响应式UI框架 使用 布局容器 栅格系统 响应式工具类 bootstrap4 bootstrap5 变化的内容 前言 ...
- 前端框架之bootstrap框架基本介绍及常用UI框架
前端框架之:bootstrap框架基本使用 下载地址:https://v3.bootcss.com/getting-started/ Bootstrap框架版本: 2.x 3.x 4.x // 推荐使 ...
- 前端Js框架 UI框架汇总 特性 适用范围 选择
身为一个资深后端工程师,面对层出不穷的前端框架,总让人眼花缭乱,做一个综合解析贴,从全局着眼,让我们明白各种前端框架的应用范围,为如何选择前端框架,从不同的维度提供一些线索,做为一个长期优化贴,欢迎指 ...
- 前端ui框架_跨屏建站发布同名响应式前端ui框架
跨屏建站发布同名响应式前端ui框架,它是跨屏建站关于前端页面构建上的积累的结晶,现已开源,我们将持续的用开源的方式做好ui框架产品,用心做好建站产品. 关于 跨屏UI框架是基于Bootstrap的扩展 ...
- 几款流行的HTML5 UI 框架比较
手机HTML5开发,大部分都使用现有的框架,这里简单比较几个流行的UI 框架.作者(启明星工作室 http://www.dotnetcms.org) 比较一下几款流行的HTML5框架,个人意见,仅供参 ...
- 关于 SAP Spartacus UI 框架选型问题
原文 目前我们选择的 UI 框架已经污染了所有的 UI 组件.这对不使用或不能使用引导程序的客户来说是不利的.我们希望我们的 UI 层独立于特定的 UI 框架.此外,我们应该避免像 bootstrap ...
最新文章
- 容器云原生DevOps学习笔记——第二期:如何快速高质量的应用容器化迁移
- C++const关键字作用
- 从Web2.0到Enterprise 2.0(三)Enterprise 2.0的三个方向
- 杰奇数据库mysql_杰奇模板出现Unable to save result set in…可尝试修复数据库
- 前端Yslow的23个优化原则
- 怎样才有资格被称为开源软件
- 三菱st编程手册_通过示例学习三菱ST编程(ALT指令和条件语句的使用)
- mysql从5.1.63升级到5.6.20出现的问题
- 抠图为什么要用绿布_逆天抠图,Photoshop 2020天神下凡
- 伙伴系统二叉树可视化笔记
- 通俗易懂理解Attention机制
- Java算法——回溯法
- iOS App之间的通信方式
- RNN LSTM GRU Attention transformer公式整理总结(超详细图文公式)
- 深入机械制造业供应链关键节点,SCM供应链管理系统全面防控企业供应链风险
- Python获取地理数据 匹配中文城市所属省份
- 程序员坐牢了,会被安排写代码吗?
- gradient设置上下渐变_CSS3 线性渐变(linear-gradient)
- IE无法打开internet站点已终止操作的解决办法
- Office2016 64位安装包+只安装3件套