bootstrap学习笔记
bootstrap学习笔记
安装和使用
官网 https://getbootstrap.com
中文网 https://www.bootcss.com
v3 组件 https://v3.bootcss.com/components/
布局容器和栅格网格系统
- 定义布局container
- 页面分为12格子,列总和数不能超12，大于12则自动换到下一行
<div class="container">
<div class="row">
<div class="col-md-4" style="background-color: #2b669a">4div>
<div class="col-md-8" style="background-color: #3c763d">8div>
div>
div>
- 列偏移 col-md-offset-*
- 列浮动 col-md-push-* 和 col-md-pull-*
常用样式
标题
- 标题使用标签
~
- 为了让非标题元素和标题使用相同的样式，还特意定义了 .h1 ~ .h6 六个类名。同时后面可以紧跟着一行小的标题 或使用 .small
段落
<p>以后的你会感谢现在努力的你p>
<p class="lead">以后的你会感谢现在努力的你p>
<p class="lead">
<small>以后的small>
<b>你b>会
<i>感谢i>现在
<em>努力em>的
<strong>你strong>
p>
强调
<div class="container">
<div class="text-muted">提示效果div>
<div class="text-primary">主要效果div>
<div class="text-success">成功效果div>
<div class="text-info">信息效果div>
<div class="text-warning">警告效果div>
<div class="text-danger">危险效果div>
div>
对齐
<div class="container">
<p class="text-left">我居左p>
<p class="text-center">我居中p>
<p class="text-right">我居右p>
<p class="text-justify">网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份
p>
div>
列表
- 无序列表ul
- 有序列表ol
- 自定义列表dl/dt/dd
- 水平定义列表class=“dl-horizontal”
- 去点列表class=“list-unstyled”
- 内联列表class=“list-inline”
代码
- 单行内联代码
sh xxx.sh - 多行块代码
sql
- 用户输入代码ctrl+s
表格
- 基础表格class = “table”
- 斑马线表格table-striped/带边框的表格table-bordered /鼠标悬停高亮的表格table-hover /紧凑型表格，单元格没内距或者内距较其他表格的内距小table-condensed
- 行列样式active/success/info/warning/danger
表单
- 文本输入框
<div class="container">
<div class="row">
<div class="col-sm-3">
<input type="text" name="" id="" />
<input type="text" name="" id="" class="form-control" />
<input type="text" name="" id="" class="form-control input-lg" />
<input type="text" name="" id="" class="form-control input-sm" />
div>
div>
div>
- 下拉选择框
<body>
<div class="container">
<select>
<option>北京option>
<option>上海option>
<option>深圳option>
select>
<hr>
<hr>
<hr>
<select class="form-control">
<option>北京option>
<option>上海option>
<option>深圳option>
select>
<hr>
<hr>
<hr>
<select class="form-control" multiple="multuple">
<option >北京option>
<option>上海option>
<option>深圳option>
select>
div>
body>
- 单选按钮
<div class="container">
<div class="row">
<div>
<div class="radio">
<label><input type="radio" >男label>
div>
<div class="radio">
<label><input type="radio" >女label>
div>
div>
<div>
<label class="radio-inline">
<input type="radio" >男
label>
<label class="radio-inline">
<input type="radio" >女
label>
div>
div>
div>
- 复选按钮
<div class="container">
<div>
<div class="checkbox">
<label><input type="checkbox" >游戏label>
div>
<div class="checkbox">
<label><input type="checkbox" >学习label>
div>
div>
<div>
<label class="checkbox-inline">
<input type="checkbox" >游戏
label>
<label class="checkbox-inline">
<input type="checkbox" >学习
label>
div>
div>
- 文本域
<div class="container">
<div class="row">
<div class="col-sm-3">
<textarea rows="3">textarea>
div>
<div class="col-sm-6">
<textarea class="form-control" rows="3">textarea>
div>
div>
div>
- 按钮
<div class="container">
<button type="button" class="btn btn-default">（默认样式）Defaultbutton>
<button type="button" class="btn btn-primary">（首选项）Primarybutton>
<button type="button" class="btn btn-success">（成功）Successbutton>
<button type="button" class="btn btn-info">（一般信息）Infobutton>
<button type="button" class="btn btn-warning">（警告）Warningbutton>
<button type="button" class="btn btn-danger">（危险）Dangerbutton>
<button type="button" class="btn btn-link">（链接）Linkbutton>
div>
<div class="container">
<a class="btn btn-default" href="#" role="button">Linka>
<button class="btn btn-default" type="submit">Buttonbutton>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
div>
<div class="container">
<p>
<button type="button" class="btn btn-primary btn-lg">（大按钮）Large buttonbutton>
<button type="button" class="btn btn-default btn-lg">（大按钮）Large buttonbutton>
p>
<p>
<button type="button" class="btn btn-primary">（默认尺寸）Default buttonbutton>
<button type="button" class="btn btn-default">（默认尺寸）Default buttonbutton>
p>
<p>
<button type="button" class="btn btn-primary btn-sm">（小按钮）Small buttonbutton>
<button type="button" class="btn btn-default btn-sm">（小按钮）Small buttonbutton>
p>
<p>
<button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small buttonbutton>
<button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small buttonbutton>
p>
div>
<div class="container">
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary buttonbutton>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Buttonbutton>
div>
缩略图
字体图标
- fonts文件带有 字体图标 ,具体类名查看 https://www.runoob.com/try/demo_source/bootstrap3-glyph-icons.htm
面板
<div class="panel panel-warning">
<div class="panel-heading">
<h2>明星合集h2>
div>
<div class="panel-body">
<div class="col-md-3">
<div class="thumbnail">
<img src="img/timg.jpg" alt="...">
<h3>高圆圆h3>
<p>出生于北京市，中国内地影视女演员、模特。p>
<button class="btn btn-default">
<span class="glyphicon glyphicon-heart">span>喜欢button>
<button class="btn btn-info">
<span class="glyphicon glyphicon-pencil">span>评论
button>
div>
div>
div>
div>
导航元素
标签式的导航菜单
<body>
<div class="container">
<p>标签式的导航菜单p>
<ul class="nav nav-tabs">
<li> <a href="#">Homea>li>
<li><a href="#">SVNa>li>
<li><a href="#">iOSa>li>
<li><a href="#">VB.Neta>li>
<li class="active"><a href="#">Javaa>li>
<li><a href="#">PHPa>li>
ul>
div>
body>
胶囊式的导航菜单
<div class="container">
<p>基本的胶囊式导航菜单p>
<ul class="nav nav-pills">
<li><a href="#">Homea>li>
<li><a href="#">SVNa>li>
<li><a href="#">iOSa>li>
<li><a href="#">VB.Neta>li>
<li class="active"><a href="#">Javaa>li>
<li><a href="#">PHPa>li>
ul>
div>
- 两端对齐nav-justified
分页
- 默认分页,给一个无序列表添加class=“pagination”,给任意一个li添加class=“active”,表示选中这一页
- 翻页,给一个无序列表添加爱class=“pager”
插件
- 引入 Bootstrap 的核心 CSS 文件
- 引入 jquery 的核心 js 文件,需要在 bootstrap 的 js 之前引入
- 引入 Bootstrap 的核心 js 文件
<head>
<meta charset="utf-8" />
<title>Documenttitle>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8">script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8">script>
head>
下拉菜单
<body>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
喜欢的频道
<span class="caret">span>
button>
<ul class="dropdown-menu">
<li class="dropdown-header">科普li>
<li><a href="#">人与自然a>li>
<li class="driver">li>
<li class="dropdown-header">影视li>
<li class="active"><a href="#">快乐大本营a>li>
<li class="disabled"><a href="#">暴走大事件a>li>
<li><a href="#">木鱼水心a>li>
ul>
div>
body>
模态框
- 使用方式一：通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性data-toggle=“modal” ，同时设置 data-target=“#identifier” 或href=“#identifier” 来指定要切换的特定的模态框(带有 id =“identifier” )
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×button>
<h4 class="modal-title" id="myModalLabel">模态框（Modal）标题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>
- 使用方式二：通过 JavaScript：使用这种技术，可以通过简单的一行 JavaScript 来调用带有 id=“identifier” 的模态框
body>
<button class="btn btn-primary btn-lg" id="btn">开始演示模态框button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×button>
<h4 class="modal-title" id="myModalLabel">模态框（Modal）标题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" id="submit_btn">提交更改button>
div>
div>
div>
div>
<script>
// 绑定按钮的点击事件
$("#btn").click(function() {
//手动打开模态框
$('#myModal').modal('show');
})
//关闭模态框
$("#submit_btn").click(function() {
//手动关闭模态框
$('#myModal').modal('hide');
})
script>
- 添加用户示例
body>
<button class="btn btn-primary btn-lg" id="btn">开始演示模态框button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×button>
<h4 class="modal-title" id="myModalLabel">添加用户h4>
div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="uname" class="control-label col-md-2">姓名label>
<div class="col-md-8">
<input type="text" id="uname" class="form-control" placeholder="请输入姓名" />
div>
div>
<div class="form-group">
<label for="upwd" class="control-label col-md-2">密码label>
<div class="col-md-8">
<input type="text" id="upwd" class="form-control" placeholder="请输入密码" />
div>
div>
form>
div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭button>
<button type="button" class="btn btn-primary" id="submit_btn">提交更改button>
div>
div>
div>
div>
<script>
// 绑定按钮的点击事件
$("#btn").click(function() {
//手动打开模态框
$('#myModal').modal('show');
})
//关闭模态框
$("#submit_btn").click(function() {
//手动关闭模态框
$('#myModal').modal('hide');
})
script>
bootstrap-table
https://examples.bootstrap-table.com/
处理json格式
gf封装的json嵌套了两层,需要处理
https://examples.bootstrap-table.com/index.html#options/response-handler.html#view-source
<script>
$(function() {
$('#table').bootstrapTable({
url: '/v1/asset/list',
columns: [{
field: 'id',
title: 'Id',
sortable: true
}, {
field: 'name',
title: 'Name',
sortable: true
}, {
field: 'type',
title: 'Type',
sortable: true
}],
responseHandler: function (res) {
return res.data
}
})
})
</script>