bootstrap样式记录

本文主要参考菜鸟教程等。

一、栅格化

1.响应式布局

container
2.栅格化布局col-md
左右两栏
默认一个row分为12个单位
col-md-4
col-md-8
默认宽度小于992时,不再左右。

3.栅格化col-sm
宽度小于768时,不再左右。

4.栅格化col-xs
永远左右两侧

5.混合使用

<div class="col-sm-4 col-sm-4">

6.pull栅格的位置推拉
col-md-push-8
col-md-pull-4
7.嵌套栅格
可以通过嵌套row实现

8.清除

<div class="clearfix"></div>

9.偏移
col-md-offset-4

10.隐藏和显示
hidden-xs
visible-xs

11.重点显示
alert-info

二、布局组件

1.字体图标
格式:

1
2
3
<button type="button" class="btn btn-primary btn-lg" style="text-shadow: black 5px 3px 3px;">
<span class="glyphicon glyphicon-user"></span> User
</button>

具体图标参考:http://www.runoob.com/bootstrap/bootstrap-glyphicons.html
2.下拉菜单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">
主题<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation">
<a href="#" role="menuitem" tabindex="-1">JAVA</a>
</li>
<li role="presentation">
<a href="#" role="menuitem" tabindex="-1">大数据</a>
</li>
<li role="presentation">
<a href="#" role="menuitem" tabindex="-1">云计算</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation">
<a href="#" role="menuitem" tabindex="-1">全栈工程师</a>
</li>
</ul>

在ul的class中使用 pull-right可以向界面右端对齐下拉菜单,也可以直接使用 .dropdown-menu-right。
新建li标签class=”dropdown-header”可以定义下拉菜单标题
外层div定义 .dropup可以向上弹出下拉菜单

.divider 下拉菜单中的分割线
.disabled 下拉菜单中的禁用
.dropdown 指定下拉菜单,下拉菜单都包过在.dropdown中
.dropdown 创建下拉菜单

<span class="caret"></span> 来指示按钮作为下拉菜单。

3.输入框

向 .form-control 添加前缀或后缀元素的步骤如下:

  • 把前缀或后缀元素放在一个带有 class .input-group 的<div> 中。
  • 接着,在相同的 <div> 内,在 class 为 .input-group-addon 的 <span> 内放置额外的内容。
  • 把该 <span>放置在<input> 元素的前面或者后面。
  • <span>内还可以放单选和复选框。同样可以添加<button>
  • 把按钮作为输入框组的前缀或者后缀元素,这时不用.input-group-addon,而用class .input-group-btn,同样可以添加<button>或下拉菜单。

可以通过向 .input-group 添加相对表单大小的 class(比如 .input-group-lg、input-group-sm)来改变输入框组的大小。输入框中的内容会自动调整大小。

三、基本样式

1.标题
<h1>内可以嵌套<small>来定义一个颜色浅的文本。
2.强调文本

<small>为父文本的百分之85
<strong> 更粗的文本
<em>斜体
<p class="text-left">向左对齐文本
<p class="text-center">居中
<p class="text-right">向右对齐
<p class="text-muted">内容减弱

  • .text-muted:提示,浅灰色
  • .text-primary:主要,蓝色
  • .text-success:成功,浅绿色
  • .text-info:通知信息,浅蓝色
  • .text-warning:警告,黄色
  • .text-danger:危险,红色

3.缩写

<abbr title="Real Simple Sydication">RSS</abbr>
4.引用

blockquote
5.列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
未定义样式列表
<ul class="list-unstyled">
<li></li>
<li></li>
<li></li>
</ul>
内联列表
<ul class="inline">
<li></li>
<li></li>
<li></li>
</ul>
定义列表
<dl>
<dt>学号</dt>
<dd>20150</dd>
<dt>姓名</dt>
<dd>王泽</dd>
</dl>

6.代码

1
2
3
4
<p><code>String</code></p>
<pre>
String name = "wangze"
</pre>

按键提示
<kbd>F10</kbd>进入全屏预览
代码滚动条

<pre class="pre-scrollable"></pre>
7.表格

只有水平分割线的表格样式
<table class="table">
条纹表格
<table class="table table-striped">
边框表格
<table class="table table-bordered">
悬停表格
<table class="table table-hover">
精简表格,padding切半
<table class="table table-condensed">
上下文,改变表格行或单个单元格的背景颜色
.active 对某一行或单元格应用悬停颜色
.success
.warning
.danger
响应式表格
<div class="table-responsive">

8.表单

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
<form role="form">
<div class="form-group">
内联:标签并排
<form class="form-inline" role="form">
水平表单,把标签和控件放在一个带有class.form-group的<div>
<form class="form-horizontal" role="form">
输入框
<input type="text" class="form-control" placeholder="文本输入">
文本框
<textarea class="form-control" rows="3"></textarea>
单选
<div class="checkbox">
<label><input type="checkbox" value="">选项 1</label>
</div>
复选
<div class="radio">
<label><input type="radio" value="">选项 1</label>
</div>
选择框
<select class="form-control">
静态控件
<p class="form-control-static">
表单控件大小
分别使用 class .input-lg 和 .col-lg-* 来设置表单的高度和宽度
表单帮助文档
<span class="help-block">

9.按钮

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- 标准的按钮 --> 
<button type="button" class="btn btn-default">默认按钮</button>
<!-- 提供额外的视觉效果,标识一组按钮中的原始动作 -->
<button type="button" class="btn btn-primary">原始按钮</button>
<!-- 表示一个成功的或积极的动作 -->
<button type="button" class="btn btn-success">成功按钮</button>
<!-- 信息警告消息的上下文按钮 -->
<button type="button" class="btn btn-info">信息按钮</button>
<!-- 表示应谨慎采取的动作 -->
<button type="button" class="btn btn-warning">警告按钮</button>
<!-- 表示一个危险的或潜在的负面动作 -->
<button type="button" class="btn btn-danger">危险按钮</button>
<!-- 并不强调是一个按钮,看起来像一个链接,但同时保持按钮的行为 -->
<button type="button" class="btn btn-link">链接按钮</button>

.btn-lg 大按钮
.btn-sm 较小按钮
.btn-xs 小按钮
.btn-block 块级按钮,会横跨父元素的全部宽度
.active 激活按钮
.disabled 禁用按钮
按钮样式适用于a标签,button标签,input标签
.btn-group 可在外层div定义,创建按钮组 .btn-gtoup-lg|sm|xs来控制大小
.bth-group-vertical 设置垂直方向
.btn-group-justified 自适应按钮
下拉菜单按钮

1
2
3
4
5
6
7
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> 
Sony <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Tablet</a></li>
<li><a href="#">Smartphone</a></li>
</ul>

.caret显示下拉式功能

10.图片

.img-rounded 为图片添加圆角
.img-circle 将图片变为圆形
.img-thumbnail 缩略图功能
.img-responsive 图片响应式

11.文本

展示不同颜色
.text-muted
.text-primary
.text-success
.text-info
.text-warning
.text-danger
12.文本背景颜色

.bg-primary
.bg-success
.bg-info
.bg-warning
.bg-danger
13.内容居中
.center-block

四、模态框+轮播图

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

<style>
/* 定义大小位置 */
.center-carousel {
width: 33%;
margin-left: auto;
margin-right: auto;
}
</style>

<div class="">
<!-- 模态框 -->
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">

<!-- 模态框头部 -->
<div class="modal-header">
<h4 class="modal-title">项目必读:相关技术、技术、测试数据、版本更新</h4>
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>

<!-- 模态框主体 -->
<div class="modal-body">
<!-- 我这里用模态框包含一个jsp页面,也可以其他内容或标签 -->
<jsp:include page="Introduction.jsp" />
</div>

<!-- 模态框底部 -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-dismiss="modal">关闭</button>
</div>

</div>
</div>
</div>
</div>


<div class="center-carousel">
<div id="demo" class="carousel slide" data-ride="carousel">

<!-- 指示符 -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
<li data-target="#demo" data-slide-to="4"></li>
</ul>

<!-- 轮播图片 -->
<div class="carousel-inner">
<div class="carousel-item active">
<!-- 模态框点击图片(超链接)显示 -->
<a data-toggle="modal" data-target="#myModal" href=""><img
src="https://fuzui.oss-cn-shenzhen.aliyuncs.com/img/img001.png"></a>
</div>
<div class="carousel-item">
<a href="https://github.com/fuzui/" target="_blank"><img
src="https://fuzui.oss-cn-shenzhen.aliyuncs.com/img/github.jpg"></a>
</div>
<div class="carousel-item">
<a href="https://fuzui.net" target="_blank"><img
src="https://fuzui.oss-cn-shenzhen.aliyuncs.com/img/myblog.jpg"></a>
</div>
<div class="carousel-item">
<a href="https://blog.csdn.net/qq_39329616" target="_blank"><img
src="https://fuzui.oss-cn-shenzhen.aliyuncs.com/img/myinfo.jpg"></a>
</div>
</div>

<!-- 左右切换按钮 -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a> <a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>

</div>
</div>
-------------本文结束感谢您的阅读-------------
王泽 wechat
扫一扫添加微信好友
0%