本文介绍了如何利用Bootstrap进行前端页面布局，包括container与container-fluid的区别，栅格系统的使用方法，以及如何创建表格、表单、按钮、导航条、弹出框和图书馆管理系统的完整代码示例。
前端框架Bootstrap
该框架已经帮你写好了很多页面样式，你如果需要使用，只需要下载它对应的文件，之后直接cv拷贝即可
在使用Bootstrap的时候所有的页面样式都只需要你通过class调节即可
** 注意 **
bootstrap的js代码是依赖于jQuery的， 也就意味着你在使用Bootstrap动态效果的时候，一定要导入jQuery
布局容器
<div class="container c1"></div> //container 样式是网页两侧留白
''' 现在大多数网页的都有两边留白 对用户视觉体验更好'''
<br>
<div class="container-fluid c1"></div> // container-fluid 是不留白
# 后续在使用bootstrap做页面的时候 上来先写一个div class= container 之后在div内部里面做操作
栅格系统
<div class="row"></div>
写一个row就是将所在区域竖着划分12份
<div class="col-md-4 "> 划成12份以后你可以12份一起使用 也可以几份几份的用 语法就是 col-md-x
栅格参数
.col-xs- .col-sm- .col-md- .col-lg-
# 针对不同的显示器 bootstrap会自动选择对应的参数
# 如果你想兼容所有的显示器 你就全部加上即可
# 一行分为12份 如果只想要6份且居中
<div class="c1 col-md-6 col-md-offset-3"></div>
# 原理就是将6份往右移动三份 这样就是左边三份右边三份
排版
具体请看这里.
<mark></mark> 高亮显示文字
<lead></lead> 中心内容 （将内容突出显示）
<del></del> 被删除的文本
<small>xxx</small> 小标题
<abbr title="臭傻子 这是解释信息">碰我试试？</abbr> // 鼠标悬浮过去 会有提示信息
表格
==表格样式==
'''table 基本实例''' --》 table （作用于）
'''table-hover 鼠标悬停样式''' --》tbody
'''table-bordered 带边框的表格''' --》 table
'''table-striped 基本实例''' --》 tbody
==状态栏== '''以下都作用于tr上 用来改变表格行颜色'''
.active 鼠标悬停在行或单元格上时所设置的颜色
.success 标识成功或积极的动作
.info 标识普通的提示信息或动作
.warning 标识警告或需要用户注意
.danger 标识危险或潜在的带来负面影响的动作
========================================================
用bootstrap写样式 只需要修改class就行 因为它全部都帮你封装好了
表单
<div class="container">
<div class="col-md-8 col-md-offset-2">
<h1 class="text-center">登录页面</h1>
<p>username: <input type="text" class="form-control"></p>
<p>password: <input type="text" class="form-control"></p>
</div>
<div class="col-md-2 col-md-offset-2"> //上面的div占了8份 对于多选框太大 可以另起一个div 附上col-md-2 让其占两份
<p><select name="" id="" class="form-control">
<option value="">111</option>
<option value="">222</option>
<option value="">333</option>
</select></p>
<textarea name="" id="" cols="30" rows="10" class="form-control"></textarea>
<input type="submit">
</div>
</div>
# 针对表单标签 加样式就用form-control
按钮
<a href="https://www.baidu.com/">点我</a>
<button class="btn btn-danger">按我</button>
<button class="btn-default btn">按我</button>
<button class="btn btn-success">按我</button>
<button class="btn btn-info">按我</button>
<button class="btn btn-warning ">按我</button>
<button class="btn btn-warning btn-lg">按我</button> // 变大一点
<button class="btn btn-warning btn-xs">按我</button> // 缩小一点
<input type="submit" class="btn btn-primary btn-block"> // btn-primary 变为按钮
通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素
图标
<h1 class="text-center">登录页面 <span class="glyphicon glyphicon-user"></span></h1>
先找到自己想要的图标复制下来 在你想加的地方（最好是没有子标签的标签）加一个span标签 给span标签class属性 其值就是复制的内容
== 图标就是文字 可以像改文字一样改图标 ==
<style>
span{
color: orange;
}
</style>
https://fontawesome.dashgame.com/
图标若不够用可以用这个网址提供的图标 使用示例：
<i class="fa fa-weixin"></i> 你也可以用span标签 用span标签依然可以给图标改颜色 i标签则不行
导航条
<nav class="navbar navbar-default"> // 默认白色
<nav class="navbar navbar-inverse"> // 这是黑色
弹出框
https://lipis.github.io/bootstrap-sweetalert/
提供目前流行的弹出框网站
== 将下载好的文件放入到项目中 并在html文件中导入.css .js文件 成功后==
swal('are you ok?')
undefined
swal('are you ok?','i am bad')
undefined
swal('are you ok?','i am bad', 'success')
undefined
swal('are you ok?','i am bad', 'info')
undefined
swal('are you ok?','i am bad', 'error')
undefined
swal('are you ok?','i am bad', 'warning')
undefined
最多可以三个参数
图书馆管理系统页面搭建（完整代码）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <!-- pull-right 往右飘-->
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.min.css"> <!– 更多的图标–>-->
<!-- <script src="../bootstrap-sweetalert-master/dist/sweetalert.min.js"></script> <!– 丰富的提示框–>-->
<!-- <link rel="stylesheet" href="../bootstrap-sweetalert-master/dist/sweetalert.css">-->
</head>
<body>
<!-- 导航条html代码-->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">图书管理系统</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">图书<span class="sr-only">(current)</span></a></li>
<li><a href="#">作者</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">更多<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">egon</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">更多操作<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container-fluid">
<div class="row">
<!-- 左侧html代码-->
<div class="col-md-3">
<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
<a href="#" class="list-group-item">作者列表</a>
<a href="#" class="list-group-item">出版社列表</a>
<a href="#" class="list-group-item">妹子图列表</a>
<a href="#" class="list-group-item">更多列表</a>
</div>
</div>
<!-- 右侧html代码-->
<div class="col-md-9">
<!-- 面板html代码-->
<div class="panel panel-primary">
<!-- 面板条html代码-->
<div class="panel-heading">
<h3 class="panel-title">图书管理系统 <span class="glyphicon glyphicon-qrcode pull-right" style=""></span></h3>
</div>
<!-- 面板内容html代码-->
<div class="panel-body">
<!-- 搜索框代码-->
<div class="row">
<div class="col-lg-4">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<!-- 添加按钮代码-->
<div class="col-md-8">
<button class="btn btn-success pull-right">添加</button>
</div>
</div>
<!-- 表格html代码-->
<div>
<table class="table table-hover table-striped table-bordered text-center">
<thead>
<tr>
<th class="text-center">ID</th>
<th class="text-center">username</th>
<th class="text-center">password</th>
<th class="text-center">hobby</th>
<th class="text-center">price</th>
<th class="text-center">action</th>
</tr>
</thead>
<tbody>
<tr>
<td>111</td>
<td>egon</td>
<td>234343</td>
<td>dunce</td>
<td>520</td>
<td class="text-center">
<button class="btn btn-primary btn-xs">添加</button>
<button class="btn btn-danger btn-xs">删除</button>
</td>
</tr>
<tr>
<td>111</td>
<td>egon</td>
<td>234343</td>
<td>dunce</td>
<td>520</td>
<td class="text-center">
<button class="btn btn-primary btn-xs">添加</button>
<button class="btn btn-danger btn-xs">删除</button>
</td>
</tr>
<tr>
<td>111</td>
<td>egon</td>
<td>234343</td>
<td>dunce</td>
<td>520</td>
<td class="text-center">
<button class="btn btn-primary btn-xs">添加</button>
<button class="btn btn-danger btn-xs">删除</button>
</td>
</tr>
<tr>
<td>111</td>
<td>egon</td>
<td>234343</td>
<td>dunce</td>
<td>520</td>
<td class="text-center">
<button class="btn btn-primary btn-xs">添加</button>
<button class="btn btn-danger btn-xs">删除</button>
</td>
</tr>
<tr>
<td>111</td>
<td>egon</td>
<td>234343</td>
<td>dunce</td>
<td>520</td>
<td class="text-center">
<button class="btn btn-primary btn-xs">添加</button>
<button class="btn btn-danger btn-xs">删除</button>
</td>
</tr>
<tr>
<td>111</td>
<td>egon</td>
<td>234343</td>
<td>dunce</td>
<td>520</td>
<td class="text-center">
<button class="btn btn-primary btn-xs">添加</button>
<button class="btn btn-danger btn-xs">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
<!-- 分页条html代码-->
<div class="row">
<div class="text-center">
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><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">»</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div><!-- /.row -->
</div>
</div>
</div>
</div>
</div>
</body>
</html>
扫一扫
541
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
