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.字体图标
格式：
<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.下拉菜单
<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.列表
未定义样式列表
<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.代码
<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.表单
<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.按钮
<!-- 标准的按钮 -->
<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 自适应按钮
下拉菜单按钮
<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
四、模态框+轮播图
<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">×</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>
