原创

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>
正文到此结束
本文目录