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">&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>

一、栅格化

二、布局组件

三、基本样式

四、模态框+轮播图

猜你喜欢