毕设系列之基于IDEA2019.01的Bootstrap3快速入门

上一篇推荐一些IDEA的常用插件，本篇就快速入门一个前端框架，为后面的毕设做准备。后端是SSM框架（Spring+SpringMVC+Mybatis）,前端采用Bootstrap框架修饰。

前置条件：耐性100%；IDEA2019.01；知道div是干嘛的；Bootstrap3.3.7

文章目录

Bootstrap3介绍
Bootstrap3的引用
栅格系统
表单
按钮
表格
图片
分页条
导航条
轮播图
模态框
结尾

Bootstrap3介绍

（可以跳过）其实没什么好介绍的，快速入门，主要是基于HTML、CSS、JavaScript（所以这些都要略懂）开发的强悍的前端框架，使web开发更加便捷，核心是栅格系统（敲黑板，下面会介绍）响应式布局。再快速说说Bootstrap3和4的区别，Bootstrap3栅格系统有4类（屏幕分辨率），Bootstrap4多了一类（支持更大的）；Bootstrap3采用float布局，4采用flex布局；4不支持IE8；4重写了JavaScript插件，css文件减少了很多。当然，作为后端开发人员，Bootstrap3已经够用且强悍了，而4还需要再完善几个版本（主要是本人用3的，4还没仔细研究，咳）

Bootstrap3	Bootstrap4
Less	Sass语言编写
4种栅格类	5种栅格类
使用px为单位	使用rem和em为单位（除部分margin和padding使用px）
使用push和pull向左右移动	偏移列通过offset-类设置
使用float的布局方式	选择弹性盒模型（flexbox）

Bootstrap3的引用

两种方式：

1.下载，本地引用
在这里插入图片描述

顺便收藏一下网站，以后会经常翻的

在这里插入图片描述
下载jquery文件放入js文件夹下
链接：https://pan.baidu.com/s/1NmmHlRnG8ddZUsmkROLRzw
提取码：d3vo

springMVC.xml配置过滤静态资源

<!--    过滤静态资源-->
    <mvc:resources mapping="/css/**" location="/css/"></mvc:resources><!--样式-->
    <mvc:resources mapping="/image/**" location="/images/"></mvc:resources><!--图片-->
    <mvc:resources mapping="/js/**" location="/js/"></mvc:resources><!--javascript-->
    <mvc:resources mapping="/fonts/**" location="/fonts/"></mvc:resources><!--fonts-->

jsp文件引用

<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>index</title>
    <link rel="stylesheet" href="../css/bootstrap.css" type="text/css">
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
</head>
<body>
...
</body>
</html>

直接引用

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>

栅格系统

将页面平均分成12个格子，根据组件占多少个格子进行布局（一行总和超过12个格子则到下一行）

	超小屏幕手机 (<768px)	小屏幕平板 (≥768px)	中等屏幕桌面显示器 (≥992px)	大屏幕大桌面显示器 (≥1200px)
栅格系统行为	总是水平排列	开始是堆叠在一起的，当大于这些阈值时将变为水平排列	~	~
.container 最大宽度	None （自动）	750px	970px	1170px
类前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列（column）数	12	~	~	~
最大列（column）宽	自动	~62px	~81px	~97px
槽（gutter）宽	30px （每列左右均有 15px）	~	~	~
可嵌套	是	~	~	~
偏移（Offsets）	是	~	~	~
列排序	是	~	~	~

基本格式：(’/'为可选择)

<div class="container/container-fluid">
    <div class="row">
        <div class="col-lg-*/col-md-*/col-sm-*/col-xs-*">
        ...
        </div>
    </div>
    <div class="row">
        <div class="col-lg-*/col-md-*/col-sm-*/col-xs-*">
        ...
        </div>
    </div>
</div>

.container会在两个留固定距离
在这里插入图片描述

.container-fluid为100%宽度，两侧铺满

col-xs- 兼容 col-sm- 兼容 col-md-,向上兼容;
col-sm-offset- 为偏移多少格（计算一行总格数不超12时，偏移格数也要算）;
col-xs- 对应 col-xs- ;
同个组件可以设置不同分辨率的布局；

举例:

<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<html lang="zh-CN">
<header>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
    <style>
        .border{
            border:1px solid red;
            text-align: center;
        }
    </style>
</header>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-8 col-md-5 border">one</div>
        <div class="col-sm-4 col-md-7 border">two</div>
    </div>
    <div class="row">
        <div class="col-sm-8 col-md-6 border">three</div>
        <div class="col-sm-4 col-md-5  col-md-offset-1 border">four</div>
    </div>
</div>
</body>
</html>

col-md-/col-lg-
在这里插入图片描述
col-sm-

col-xs-

表单

设置了 .form-control 的 input、textarea 和 select 元素都将被默认设置宽度属性为 width: 100%;
在这里插入图片描述

<form>
    <div class="form-group">
        <label for="Name">姓名</label>
        <input type="email" class="form-control" id="Name" placeholder="请输入姓名">
    </div>
    <div class="form-group">
        <label for="Password">密码</label>
        <input type="password" class="form-control" id="Password" placeholder="请输入密码">
    </div>
     <div class="form-group">
         <label for="Other">备注</label>
        <textarea class="form-control" id="Other" placeholder="请输入备注"></textarea>
     </div>
    <div class="form-group">
        <label for="Sex">性别</label>
        <select class="form-control" id="Sex">
            <option value='男'>男</option>
            <option value='女'>女</option>
        </select>
    </div>
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox"> 确认密码
        </label>
    </div>
    <button type="submit" class="btn btn-info">Submit</button>
</form>

按钮

更多样式参考官方文档
在这里插入图片描述

<a href="#" class="btn btn-default">btn-default</a>

<input type="button" class="btn btn-primary" value="btn-primary">

<button type="button" class="btn btn-success">btn-success</button>

<button type="button" class="btn btn-info">btn-info</button>

<button type="button" class="btn btn-warning">btn-warning</button>

<button type="button" class="btn btn-danger">btn-danger</button>

<button type="button" class="btn btn-link">btn-link</button>

表格

.table-striped 可以给 tbody标签之内的每一行增加斑马条纹样式；
.table-bordered 为表格和其中的每个单元格增加边框；
.table-hover 可以让 tbody标签中的每一行对鼠标悬停状态作出响应;
更多样式参考官方文档；

<table class="table table-bordered table-hover table-striped">
    <thead>
    <tr>
        <td>heada</td><td>headb</td><td>headc</td><td>headd</td>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>body1</td><td>body2</td><td>body3</td><td>body4</td>
    </tr>
    <tr>
        <td>body1</td><td>body2</td><td>body3</td><td>body4</td>
    </tr>
    </tbody>
</table>

图片

通过为图片添加 .img-responsive 类可以让图片支持响应式布局
在这里插入图片描述

<div class="container">
    <div class="row">
        <div class="col-md-4 border"><img src="..." class="img-rounded img-responsive"></div>
        <div class="col-md-4 border"><img src="..." class="img-circle img-responsive"></div>
        <div class="col-md-4 border"><img src="..." class="img-thumbnail img-responsive"></div>
    </div>
</div>

分页条

给不能点击的链接添加 .disabled ，给当前页添加 .active
在这里插入图片描述

<nav aria-label="Page navigation">
    <ul class="pagination">
        <li class="disabled">
            <a href="#" aria-label="Previous" >
                <span aria-hidden="true">&laquo;</span>
            </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="#" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
            </a>
        </li>
    </ul>
</nav>

导航条

.navbar-fixed-top 可以让导航条固定在顶部；
.navbar-fixed-bottom 可以让导航条固定在底部；
.navbar-inverse 可以改变导航条的外观（反色）；

在这里插入图片描述

<header>
...
    <style>
        .nav{
            background-color: #777e83;
        }
        .nav button{
            background-color: whitesmoke;
        }
     </style>
</header>
<body>
<nav class="navbar nav">
    <div class="container-fluid">
        <div class="navbar-header">
<%--            汉堡按钮--%>
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a  class="navbar-brand" href="#" >NAVBAR</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#" >退出</a></li>
            </ul>
            <form class="navbar-form navbar-right">
                <input type="text" class="form-control" placeholder="暂未开通">
            </form>
        </div>
    </div>
</nav>
...
</body>

轮播图

在这里插入图片描述

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        <li data-target="#carousel-example-generic" data-slide-to="3"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
<%--        选中 active--%>
        <div class="item active">
            <img src="http://attach.bbs.miui.com/forum/201105/17/113554rnu40q7nbgnn3lgq.jpg">
            <div class="carousel-caption">
                文字描述
            </div>
        </div>
        <div class="item">
            <img src="http://pic1.win4000.com/wallpaper/b/55597435bb036.jpg">
            <div class="carousel-caption">
                文字描述
            </div>
        </div>
        <div class="item">
            <img src="http://attach.bbs.miui.com/forum/201111/21/205700txzuacubbcy91u99.jpg">
            <div class="carousel-caption">
                文字描述
        </div>
    </div>
    </div>
    <!-- 左右控制 -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

模态框

快速了解怎么激活模态框，更详细的功能查阅官方文档（功能很丰富）

.bs-example-modal-lg 大模态框；
.bs-example-modal-sm 小模态框；

<header>
...
    <script>
        $('#myModal').on('shown.bs.modal', function () {
            $('#myInput').focus()
        })
    </script>
</header>
<body>
...
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">模态框</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">标题</h4>
            </div>
            <div class="modal-body">
                内容
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary">确认</button>
            </div>
        </div>
    </div>
</div>
</body>

结尾

简单入门了比较常用的组件及栅格系统，掌握了本篇内容就已经能设计一个比（jian）较(ren)好(jian)看(zhi)的系统页面了,当然还有更酷炫、更强大的功能还需要详细阅读官方文档。

下一篇记录一下基于SSM+Mysql的登录功能实现（没错，我登录页面没用Bootstrap，咳~）

K.wuean

发布了5 篇原创文章 · 获赞 4 · 访问量 145

私信关注