JavaEE中级.20190601.Bootstrap(Bootstrap介绍.Bootstrap 特点.下载与使用.布局容器.栅格网格系统.排版)
一.Bootstrap介绍
1.官网:http://getbootstrap.com/
中文网:http://www.bootcss.com/
Bootstrap是一套现成的CSS样式集合(做得还是很友好的)。是两个推特的员工干出来的。。。
二、Bootstrap 特点
1.简洁、直观、强悍的前端开发框架,html、css、javascript工具集,让web开发更迅速、简单。
2.基于html5、css3的bootstrap,具有大量的诱人特性:友好的学习曲线,卓越的兼容性,响应式设计,12列格网,
样式向导文档。
3.自定义JQuery插件,完整的类库,bootstrap3基于Less,bootstrap4基于Sass的CSS预处理技术
4.Bootstrap 响应式布局设计,让一个网站可以兼容不同分辨率的设备。Bootstrap响应式布局设计,给用户提供更好的视
觉使用体验。
5.丰富的组件
三、下载与使用
1.下载:
①下载: http://v3.bootcss.com/getting-started/
②下载完成后,
拷贝dist/css 中的bootstrap.min.css 到项目css中
拷贝dist/js bootstrap.min.js 到项目的js中
③下载jquery.js
http://jquery.com/
2.说明:
①ViewPort <meta>标记用于指定用户是否可以缩放Web页面
②width和height指令分别指定视区的逻辑宽度和高度。他们的值要么是以像素为单位的数字,要么是一个特殊的标
记符号。
③width指令使用device-width标记可以指示视区宽度应为设备的屏幕宽度。
④height指令使用device-height标记指示视区高度为设备的屏幕高度。
⑤initial-scale指令用于设置Web页面的初始缩放比例。默认的初始缩放比例值因智能手机浏览器的不同而有所差异。
通常情况下设备会在浏览器中呈现出整个Web页面,设为1.0则将显示未经缩放的Web文档。
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><!--使用 X-UA-Compatible 来设置 IE 浏览器兼容模式 最新的渲染模式--><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Bootstrap 的 HTML 标准模板</title><!--引入BootStrap的核心css文件--><link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" /></head><body><h1>Hello, world!</h1></body><!--注:如果需要使用Bootstrap的组件或插件,则需要引入Jquery和bootstrap的js文件,且
jquery必须在bootstrap之前引入--><!--引入Jquery的核心js文件--><script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script><!--引入BootStrap的核心js文件--><script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script></html>
四.布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意,由于 padding
等属性的原因,这两种 容器类不能互相嵌套。
1、.container 类用于固定宽度并支持响应式布局的容器。
<div class="container">
...
</div>
2、.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。
<div class="container-fluid">
...
<!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"><title>布局容器</title><!--引入BootStrap的核心css文件--><link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" /></head><body><!--默认的DIV--><div style="background-color: pink;height: 30px;"></div><!--1、.container 类用于固定宽度并支持响应式布局的容器。 --><div class="container" style="background-color: cyan;height: 30px;"> </div><!--2、 .container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。--><div class="container-fluid" style="background-color: cyan;height: 30px;"> </div></body></html>
五.栅格网格系统
注意: 网格系统必须使用到 css
container、row 、xs (xsmall phones), sm (small tablets), md (middle desktops) lg (larger desktops) 即: 超小屏(自
动),小屏(750px),中屏(970px)和大屏(1170px)
数据行(.row)必须包含在容器(.container)中,以便为其赋予合适的对齐方式和内距(padding)。
在行(.row)中可以添加列(.column), 只有列(column)才可以作为行容器(.row)的直接子元素,但列数之和不能超过
平分的总列数,比如 12。如果大于 12,则自动换到下一行。
具体内容应当放置在列容器(column)之内
1.列组合
列组合简单理解就是更改数字来合并列(原则:列总和数不能超 12,大于12,则自动换到下一行。),有点类似于
表格的 colspan 属性。
2.列偏移、列排序
1)列偏移
如果我们不希望相邻的两个列紧靠在一起,但又不想使用 margin 或者其他的技术手段来。这个时候就可以使用列
偏移(offset)功能来实现。使用列偏
移也非常简单,只需要在列元素上添加类名“col-md-offset-*”(其中星号代表要偏移的列组合数),那么具有这个类名
的列就会向右偏移。例如,你在列元素上添加“col-md-offset-8”,表示该列向右移动 8 个列的宽度(要保证列与偏移列的
总数不超过 12,不然会致列断行|换行显示)。
2)列排序
列排序其实就是改变列的方向,就是改变左右浮动,并且设置浮动的距离。
在 Bootstrap 框架的网格系统中是通过添加类名 ”col-md-push-*” 和“col-md-pull-*” (其中星号代表移动的列组合数)。
往前 pull,往后 push。
3.列嵌套
Bootstrap 框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行(row)容器,然后在这个行
容器中插入列.
<!DOCTYPE html>
<html><head><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>栅格网格系统</title><!--引入BootStrap的核心css文件--><link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" /></head><body><!--容器布局--><div class="container" ><!--列组合--><!--定义数据行 row--><div class="row"><!--设置栅格网格系统--><div class="col-md-1 col-sm-1 col-xs-1" style="background-color: rosybrown;">1</div><div class="col-md-2 col-sm-2 col-xs-2" style="background-color: azure;">2</div><div class="col-md-8 col-sm-8 col-xs-8" style="background-color: tomato;">8</div><div class="col-md-2 col-sm-2 col-xs-2" style="background-color: brown;">2</div></div><div class="row"><!--设置栅格网格系统--><div class="col-md-1 col-sm-1 col-xs-1" style="background-color: blanchedalmond;">1</div><div class="col-md-2 col-sm-2 col-xs-2" style="background-color: cornflowerblue;">2</div><div class="col-md-8 col-sm-8 col-xs-8" style="background-color: khaki;">8</div><div class="col-md-1 col-sm-1 col-xs-1" style="background-color: lawngreen;">2</div></div><!--列组合--><div style="height: 20px;"></div><!--列偏移--><div class="row"><div class="col-md-4" style="background-color: blanchedalmond;">4</div><div class="col-md-2 col-md-offset-1" style="background-color: cornflowerblue;">2</div><div class="col-md-1" style="background-color: blueviolet;">1</div></div><div class="row"><div class="col-md-4" style="background-color: burlywood;">4</div><div class="col-md-2 col-md-offset-10" style="background-color: cadetblue;">2</div><div class="col-md-1" style="background-color: indianred;">1</div></div><!--列偏移--><div style="height: 20px;"></div><!--列排序--><div class="row"><div class="col-md-4" style="background-color: blanchedalmond;">4</div><div class="col-md-2" style="background-color: cornflowerblue;">2</div><div class="col-md-1 col-md-pull-3" style="background-color: blueviolet;">1</div></div><div class="row"><div class="col-md-4" style="background-color: rosybrown;">4</div><div class="col-md-2 col-md-push-3" style="background-color: bisque;">2</div><div class="col-md-1" style="background-color: tomato;">1</div></div><!--列排序--><div style="height: 20px;"></div><!--列嵌套--><div class="row"><div class="col-md-6" style="background-color: rosybrown;">6<div class="row"><div class="col-md-4" style="background-color: burlywood;">4</div><div class="col-md-4" style="background-color: sandybrown;">4</div><div class="col-md-4" >4</div></div></div><div class="col-md-6" style="background-color: thistle;">6</div></div><!--列嵌套--></div></body>
</html>
六.排版
1.标签
h1-h6:bootstrap定义了样式覆盖了原来的标题效果;
其他 标签使用.h1-.h6样式,也可以有h1-h6的效果;
<small></small>:小号字体,或者设置.small属性;;
2.段落
段落是排版中另一个重要元素之一。通过.lead 来突出强调内容(其作用就是增大文本字号,加粗文本,而且对行
高和 margin 也做相应的处理。可以使用
以下标签给文本做突出样式处理:
<small>:小号字
<b><strong>:加粗
<i><em>:斜体
3.引用
<blockquote>:标签定义摘自另一个源的块引用,
使用.blockquote-reverse,实现右对齐。
<footer>:脚注
<cite>:表示对某个参考文献的引用
<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>排版</title><!--引入BootStrap的核心css文件--><link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" /></head><body><!--标题--><h1>标题1<small>副标题</small></h1><h2>标题2<span class="small">副标题</span></h2><h3>标题3</h3><h4>标题4</h4><h5>标题5</h5><h6>标题6</h6><p class="h2">标签</p><hr /><!--段落--><p>以后的你会感谢现在的自己</p><p class="lead">以后的你会感谢现在的自己</p><p class="lead"><b>以后</b><em>的</em><small>你</small>会<i>感谢</i>现在的<strong>自己</strong></p><hr /><blockquote class="blockquote">好好学习 Java!<footer>本文出自大师之手</footer> <cite>thinking in java</cite> </blockquote></body>
</html>
4.强调
.text-muted:提示,使用浅灰色(#999)
.text-primary:主要,使用蓝色(#428bca)
.text-success:成功,使用浅绿色(#3c763d)
.text-info:通知信息,使用浅蓝色(#31708f)
.text-warning:警告,使用黄色(#8a6d3b)
.text-danger:危险,使用褐色(#a94442)
5.文本对齐
使用 text-align 来实现文本的对齐风格的设置。
其中主要有四种风格:
左对齐,取值 left ;
居中对齐,取值 center;
右对齐,取值 right ;
两端对齐,取值 justify。
为了简化操作,方便使用,Bootstrap 通过定义四个类名来控制文本的对齐
风格: .text-left:左对齐
.text-center:居中对齐
.text-right:右对齐
.text-justify:两端对齐。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>排版</title><!--引入BootStrap的核心css文件--><link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" /></head><body><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 /><div>Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于:HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。 [1] 国内一些移动开发者较为熟悉的框架,如WeX5前端开源框架等,也是基于Bootstrap源码进行性能优化而来。</div><div style="text-align: center;">Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于:HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。 [1] 国内一些移动开发者较为熟悉的框架,如WeX5前端开源框架等,也是基于Bootstrap源码进行性能优化而来。</div><hr /><div style="text-align: justify;">Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于:HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。 [1] 国内一些移动开发者较为熟悉的框架,如WeX5前端开源框架等,也是基于Bootstrap源码进行性能优化而来。</div><hr /><div class="text-justify">Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于:HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。 [1] 国内一些移动开发者较为熟悉的框架,如WeX5前端开源框架等,也是基于Bootstrap源码进行性能优化而来。</div></body>
</html>
6.列表
在 HTML 文档中,列表结构主要有三种:
无序列表(<ul><li>…</li></ul>)、
有序列表(<ol><li>…</li></ol>)、
定义列表(<dl><dt>…</dt><dd>…</dd></dl>)。
bootstrap 根据平时的使用情形提供了六种形式的列表:( 普通列表、有序列表、去点列表、内联列表、描述列表、
水平描述列表)。在样式方面 Bootstrap
只是在原有的基础上做了一些细微的优化(margin 调整),其他差别不大,加入了一些样式:
1)去点列表:
class="list-unstyled"
2)内联列表:
class=” list-inline” 简单点说就是把垂直列表换成水平列表,而且去掉项目符号(编号),保持水平显示。
也可以说内联列表就是为制作水平导航而生。
3)定义列表:
在原有的基础加入了一些样式,使用样式 class=“.dl-horizontal”制作;
水平定义列表 : 当标题宽度超过160px时,将会显示三个省略号 bootstrap4;
貌似有问题,看样子还是不稳定,bootstrap3 中的 css 没有问题;
7.代码:
主要提供了三种代码风格:
1)使用<code></code>来显示单行内联代码
2) 使 用 <pre></pre> 来 显 示 多 行 块 代 码 , 样 式 : pre-scrollable
(height,max-height 高度固定,为 340px,超过存在滚动条)
3)使用<kbd></kbd>来显示用户输入代码,如快捷键
不管使用哪种代码风格,在代码中碰到小于号(<)要使用硬编码“<”来替代,大于号(>)使用“>”来替代。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>排版</title><!--引入BootStrap的核心css文件--><link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" /></head><body><ul><li>等你下课</li><li>我不配</li></ul><ul class="list-unstyled"><li>等你下课</li><li>我不配</li></ul><ul class="list-inline"><li>等你下课</li><li>我不配</li></ul><br /><dl><dt>尚学堂</dt><dd>中国最有良心的培训机构</dd><dd>中国最有良心的培训机构</dd><dt>速学堂</dt><dd>o2o 在线学习平台</dd><dd>o2o 在线学习平台</dd></dl><dl ><dt>尚学堂 使用 bootstrap3 的 css 哦</dt><dd>中国最有良心的一站式的 o2o 培训机构</dd> <dt>测试标题不能超过 160px 的宽度,否则 2 个点</dt><dd>我在写一个水平定义列表的效果,我在写一个水平定义列表的效果</dd></dl><dl class="dl-horizontal"><dt>尚学堂 使用 bootstrap3 的 css 哦</dt><dd>中国最有良心的一站式的 o2o 培训机构</dd> <dt>测试标题不能超过 160px 的宽度,否则 2 个点</dt><dd>我在写一个水平定义列表的效果,我在写一个水平定义列表的效果</dd></dl> <br /><hr /> <code>private void test() {System.out.println("Hello");}</code>
<pre>private void test() {System.out.println("Hello"); }
</pre><pre class="pre-scrollable">private void test() {System.out.println("Hello"); }private void test() {System.out.println("Hello"); }private void test() {System.out.println("Hello"); }private void test() {System.out.println("Hello"); }private void test() {System.out.println("Hello"); }private void test() {System.out.println("Hello"); }<h2>NIHAO</h2>
</pre>
<div>使用<kbd>ctrl</kbd> + <kbd>s</kbd> 快捷键保存</div>
<div style="height: 100px;"></div> </body>
</html>
8.表格
1)样式:
Bootstrap 为表格提供了 1 种基础样式和 4 种附加样式以及 1 个支持响应式
的表格。在使用 Bootstrap 的表格过程中,只需要添加对应的类名就可以得到
不同的表格风格:
基础样式
2).table:基础表格
附加样式
.table-striped:斑马线表格
.table-bordered:带边框的表格
.table-hover:鼠标悬停高亮的表格
. table-condensed:紧凑型表格,单元格没内距或者内距较其他表格的内距更小
3)<tr>提供了五种不同的类名,每种类名控制了行的不同背景颜色
<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>表格</title><!--引入BootStrap的核心css文件--><link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" /></head><body><table style="width: 800px;" class="table table-striped table-hover table-bordered table-condensed" ><tr ><th>分类ID</th><th>分类名称</th><th>分类描述</th><th>操作</th></tr><tr class="active"><td>1</td><td>手机数码</td><td>手机数码类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr class="info"><td>1</td><td>手机数码</td><td>手机数码类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr class="danger"><td>2</td><td>电脑办公</td><td>电脑办公类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr class="success"><td>3</td><td>鞋靴箱包</td><td>鞋靴箱包类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr class="warning"><td>4</td><td>家居饰品</td><td>家居饰品类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr></table><div style="height: 100px;"></div> </body>
</html>
9.表单控件
.form-control .input-lg(较大) .input-sm(较小)
(1)输入框
.form-control
(2)下拉选择框 select
多行选择设置:multiple="multiple"
(3)文本域 textarea
<textarea class="form-control" rows="3"></textarea>
(4)复选框 checkbox
.checkbox,水平显示:.checkbox-inline
(5)单选择按钮
.radio, 水平显示:.radio-inline
(6)按钮
1)使用 button 实现
基础样式: btn
附加样式:btn-primary btn-info btn-success btn-warning
btn-danger btn-link btn-default
2)多标签支持:使用 a div 等制作按钮
3)按钮大小
使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮
4)按钮禁用
方法 1:在标签中添加 disabled 属性
方法 2:在元素标签中添加类名“disabled”
在 class 属性中添加 disabled 只是样式上禁用了,并不是真正的禁用了此按钮!
<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>表单</title><!--引入BootStrap的核心css文件--><link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" /></head><body><!--布局容器--><div class="container"><!--文本框--><div class="row"><div class="col-md-4"><label for="uname">姓名:</label> <input type="text" id="uname" /></div></div><div class="row"><div class="col-md-4"><label for="uname">姓名:</label> <input type="text" id="uname" class="form-control" /></div></div><div class="row"><div class="col-md-4"><label for="uname">姓名:</label> <input type="text" id="uname" class="form-control input-lg" /></div></div><div class="row"><div class="col-md-4"><label for="uname">姓名:</label> <input type="text" id="uname" class="form-control input-sm" /></div></div><hr /><!--下拉框--><div class="row"><div class="col-md-4"><label for="uname">城市:</label> <select><option>-请选择-</option> <option>北京</option> <option>上海</option> </select></div></div><div class="row"><div class="col-md-4"><label for="uname">城市:</label> <select class="form-control"><option>-请选择-</option> <option>北京</option> <option>上海</option> </select></div></div><hr /><!--文本域--><div class="row"><div class="col-md-4"><label for="uname">简介:</label> <textarea rows="5" cols="40"></textarea></div></div><div class="row"><div class="col-md-4"><label for="uname">简介:</label> <textarea class="form-control" rows="5" cols="40"></textarea></div></div><hr /><!--复选框--><div class="row"><div class="col-md-4"><label for="uname">爱好:</label> <input type="checkbox" name="hobby" /> 唱歌<input type="checkbox" name="hobby" /> 跳舞<input type="checkbox" name="hobby" /> Rap</div></div><div class="row"><div class="col-md-4"><label for="uname">爱好:</label> <div class="checkbox"><label><input type="checkbox" >游戏1</label><label><input type="checkbox" >游戏2</label></div><div><label class="checkbox-inline"><input type="checkbox" >游戏1</label><label class="checkbox-inline"><input type="checkbox" >游戏2</label></div></div></div><hr /><!--单选框--><div class="row"><div class="col-md-4"><label for="usex">性别:</label> <input type="radio" name="usex" /> 男<input type="radio" name="usex" /> 女</div></div><div class="row"><div class="col-md-4"><label for="uname">性别:</label> <div class="radio"><label><input type="radio" >男</label><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><hr /><!--按钮--><div class="row"><div class="col-md-4"><input type="button" value="按钮1" /><button>按钮2</button></div></div><div class="row"><div class="col-md-4"><input type="button" value="按钮1" class="btn" /><button class="btn">按钮2</button></div></div><div class="row"><div class="col-md-4"><input type="button" value="按钮1" class="btn btn-default" /><button class="btn btn-primary">按钮2</button></div></div><div class="row"><div class="col-md-4"><input type="button" value="按钮1" class="btn btn-default btn-xs" /><button class="btn btn-primary btn-lg">按钮2</button><button class="btn btn-danger btn-sm">按钮2</button><button class="btn btn-success btn-sm">按钮2</button><button class="btn btn-info btn-sm">按钮2</button><button class="btn btn-warning btn-sm">按钮2</button><button class="btn btn-link btn-sm">按钮2</button></div></div><div class="row"><div class="col-md-4"><div class="btn btn-info">按钮</div></div></div><div class="row"><div class="col-md-4"><button class="btn btn-danger" onclick="alert(1);" disabled="disabled">按钮</button><button class="btn btn-warning disabled" onclick="alert(1);" >按钮</button></div></div></div><div style="height: 100px;"></div> </body>
</html>
(1)水平表单:
同一行显示 form-horizontal
配合 Bootstrap 框架的网格系统
(2)内联表单:将表单的控件都在一行内显示 form-inline
注意 label 不会显示,存在的意义: 如果没有为输入控件设置 label 标签,屏幕阅读器将无法正确识别。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>表单</title><!--引入BootStrap的核心css文件--><link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" /></head><body><!--水平表单--><form class="form-horizontal"><div class="form-group"><label for="email" class="control-label col-sm-2">邮箱</label><div class="col-sm-2"><input type="email" class="form-control" placeholder="请输入邮箱" /></div></div><div class="form-group"><label for="password" class="control-label col-sm-2">密码</label><div class="col-sm-2"><input type="password" 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-4"><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="password">密码</label><input type="password" 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></body>
</html>
10.下拉菜单
1)使用一个类名为 dropdown 或 btn-group 的 div 包裹整个下拉框:
<div class="dropdown"></div>
2) 默认向下 dropdown,向上弹起加入 . dropup 即可
3)使用 button 作为父菜单,使用类名: dropdown-toggle 和自定义 data-toggle 属性
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
4)在 button 中 使用 font 制作下拉箭头
<span class="caret"></span>
5)下拉菜单项使用一个 ul 列表,并且定义一个类名为“dropdown-menu
6)分组分割线: <li>添加类名“divider”来实现添加下拉分隔线的功能
7)分组标题: li 添加类名 “dropdown-header” 来实现分组的功能
8)对齐方式:
①dropdown-menu-left 左对齐 默认样式
②dropdown-menu-right 右对齐
9)激活状态(.active)和禁用状态(.disabled)
<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>下拉菜单</title><!--引入BootStrap的核心css文件--><link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" /><!--引入Jquery的核心js文件--><script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script><!--引入BootStrap的核心js文件--><script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script></head><body><!--1、 使用一个类名为 dropdown 或 btn-group 的 div 包裹整个下拉框--><div class="dropdown"><!--2、 使用 button 作为父菜单,使用类名: dropdown-toggle 和自定义 data-toggle 属性--><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">歌曲<!--3、在 button 中 使用 font 制作下拉箭头--><font class="caret"></font></button><!--4、下拉菜单项使用一个 ul 列表,并且定义一个类名为“dropdown-menu”--><ul class="dropdown-menu"><!--分组标题: li 添加类名 “dropdown-header” 来实现分组的功能--><li class="dropdown-header">----周杰伦----</li><li class="active"><a href="#">等你下课</a></li><li><a href="#">龙卷风</a></li><li><a href="#">夜曲</a></li><!--分组分割线: <li>添加类名“divider”来实现添加下拉分隔线的功能--><li class="divider"></li><li class="dropdown-header">----林俊杰----</li><li><a href="#">江南</a></li><li><a href="#">可惜没如果</a></li><li><a href="#">醉赤壁</a></li><!--分组分割线: <li>添加类名“divider”来实现添加下拉分隔线的功能--><li class="divider"></li><li class="dropdown-header">----陈奕迅----</li><li><a href="#">十年</a></li><li><a href="#">好久不见</a></li><li class="disabled"><a href="#">你的背包</a></li></ul></div></body>
</html>
11.按钮组
1)使用一个类名为 btn-group 的 div 包裹整个按钮组
2)使用标签 button 、a、span 制作按钮,需要指定类名.btn
3)使用 span 制作图标
4)大小分类: btn-group-lg btn-group btn-group-sm btn-group-xs
5)等分按钮: 自适应分组按钮 btn-group-justified
6)默认为水平,使用 btn-group-vertical 制作垂直按钮组
7)按钮工具栏: 在外层套用 .btn-toolbar 即可
8)注意:btn-group-lg 仅仅是放大按钮,不能将所有的按钮作为连接在一起的按钮组
<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>按钮组</title><!--引入BootStrap的核心css文件--><link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" /><!--引入Jquery的核心js文件--><script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script><!--引入BootStrap的核心js文件--><script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script></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> </body>
</html>
12.导航
1)基本样式: .nav 与 “nav-tabs”、“nav-pills”组合制作导航
2)分类:
①标签型 (nav-tabs)导航
②胶囊形(nav-pills)导航
③堆栈(nav-stacked)导航
④自适应(nav-justified)导航
⑤面包屑式(breadcrumb)导航 ,单独使用样式,不与 nav 一起使用,直接加入到 ol、ul 中即可,一般用于导航,
主要是起的作用是告诉用户现在所处页面的位置(当前位置)
3)状态:
①选中状态 active 样式
②禁用状态: disable
4)二级菜单
面包屑式导航
分页导航
页码导航:ul 标签上加 pagination [pagination-lg | pagination-sm]
翻页导航: ul 标签上加 pager
<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>导航</title><!--引入BootStrap的核心css文件--><link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" /><!--引入Jquery的核心js文件--><script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script><!--引入BootStrap的核心js文件--><script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script></head><body><p>标签式的导航菜单</p><ul class="nav nav-tabs"><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><hr /><p>基本的胶囊式导航菜单</p><ul class="nav nav-pills"><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><hr /><p>垂直的胶囊式导航菜单</p><ul class="nav nav-pills nav-stacked"><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><hr /><p>面包屑式导航</p><ul class="breadcrumb"><li><a href="#">Home</a></li><li><a href="#">2013</a></li><li class="active">十一月</li></ul><hr /><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><hr /><p>翻页导航</p><ul class="pager"><li><a href="#">Previous</a></li><li><a href="#">Next</a></li></ul></body>
</html>
13.缩略图
<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>缩略图</title><!--引入BootStrap的核心css文件--><link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" /><!--引入Jquery的核心js文件--><script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script><!--引入BootStrap的核心js文件--><script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script></head><body><div class="container"><div class="row"><div class="col-md-3"><div class="thumbnail"><img src="img/gyy.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/gyy.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/gyy.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/gyy.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></body>
</html>
14.面板
默认的 .panel 组件所做的只是设置基本的边框(border)和内补 (padding)来包含内容。
.panel-default:默认样式
.panel-heading:面板头
.panel-body:面板主体内容
<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>面板</title><!--引入BootStrap的核心css文件--><link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" /></head><body><div class="panel panel-warning"><div class="panel-heading"><h3 class="panel-title">带有 title 的面板标题</h3></div><div class="panel-body"><div style="height: 300px;">我是内容<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></div></div></div></body>
</html>
JavaEE中级.20190601.Bootstrap(Bootstrap介绍.Bootstrap 特点.下载与使用.布局容器.栅格网格系统.排版)相关推荐
- 【Bootstrap】<前端框架>Bootstrap布局容器栅格网格系统
目录 一.Bootstrap概述: 二.Bootstrap HTML模板: 三.布局容器和栅格网格系统: 1.布局容器: 2.栅格网格系统: 2.1 媒体查询: 2.2 栅格参数: 2.3 列组合: ...
- Spring Cloud(02)——bootstrap文件介绍
bootstrap文件介绍 bootstrap的中文翻译是"引导程序"的意思.Spring中的ApplicationContext是会有父子关系的.Spring Cloud初始化的 ...
- 前端三件套系例之BootStrap——BootStrap基础、 BootStrap布局
文章目录 1 BootStrap基础 1 什么是BootStrap 2 BootStrap的版本 3 BootStrap 下载 4 CDN服务 5 目录结构 6 基本模板 7 浏览器支持 8 浏览器兼 ...
- BootStrap的介绍与案例使用
BootStrap的介绍与案例使用 1.案例一:使用Bootstrap重写网站首页 1.1案例介绍 本案例使用Boot ...
- python 全栈开发,Day57(响应式页面-@media介绍,jQuery补充,移动端单位介绍,Bootstrap学习)...
昨日内容回顾 ajax //get post 两种方式 做 请求get 主要是获取数据 post 提交数据同一个路由地址 既可以是get请求也可以是post请求 一个路由对应一个函数get请求acce ...
- Bootstrap简要介绍
目录 文章目录 目录 1 Bootstrap介绍 2 Bootstrap的使用 2.1 引入bootstrap 2.2 布局容器 3 栅格系统 4 常用样式 1 Bootstrap介绍 Bootstr ...
- Bootstrap基本介绍
Bootstrap 一.Bootstrap是什么 Bootstrap诞生于2011年,来自Twitter公司,是目前最受欢迎的前端框架 是一个用于快速开发Web应用程序和网站的前端框架 Bootstr ...
- Bootstrap基本介绍及运用
一,Bootstrap是什么? 1.1,Bootstrap诞生于2011年,来自Twitter公司,是目前最受前端框架 1.2,是一个用于快速开发Web应用程序和网站的前端框架 1.3,Bootstr ...
- bootstrap课程1 bootstrap为什么这么火
bootstrap课程1 bootstrap为什么这么火 一.总结 一句话总结:响应式,样式多,功能多. 1.bootstrap通过什么药实现响应式? 响应式web布局是让用户通过不同尺寸的浏览器都可 ...
最新文章
- 关于Jquery中ajax方法data参数用法
- 修改element中v-loading的自定义图片
- PHP中call user func()和call_user_func_array()调用自定义函数小结
- 属于服务器操作系统的是,属于服务器操作系统的是
- python中int input_python中的input是什么
- 解决opensips NAT 问题和ACK不能正常转发问题
- 笔记11:GDI 制作数字验证码
- sql 获取一个周的周一和周日
- android 程序必须有界面,Android开发之开机启动没有界面的应用程序
- Ubuntu下设置root用户
- Oracle修改字段长度
- 傻瓜攻略(十九)——MATLAB实现SVM多分类
- Silverlight 4 Tools for Visual Studio 2010手动一步一步安装
- php获取客户端的真实IP的方法
- java web简答题_javaweb简答题
- healthd log 解读
- QT QChartView显示坐标值
- [Neo4j] CQL命令
- C/C++新手入门教程:傻瓜都会的VS2013使用教程,成为程序员的第一步
- 计算机权限删除文件win10,win10系统使用管理员权限无法删除部分文件的详细步骤...
热门文章
- python例子高考志愿填报系统入口_2019年湖北高考志愿填报系统入口网址登录入口(最新)...
- Linux 字符设备驱动的编写
- ABAP初学者如何系统地学习ABAP编程?
- 凡客2011年或亏损6亿元 销售仍快速增长
- 一款功能强大的代理检查和IP地址轮转工具
- 【Linux - 操作技术】七 常用基本命令
- 个人前端学习笔记 html5+css(保持更新)
- buuuctf-Check_1n
- LoRa开发常见问题
- 计算机自动化技术论文,自动化技术_计算机技术87884.pdf