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">4</div>
<div class="col-md-8" style="background-color: #3c763d">8</div>
</div>
</div>
- 列偏移 col-md-offset-*
- 列浮动 col-md-push-* 和 col-md-pull-*
常用样式
标题
- 标题使用标签
<h1> ~ <h6>,样式覆盖 - 为了让非标题元素和标题使用相同的样式，还特意定义了 .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">
<!-- 占3列的原格式文本域 -->
<div class="row">
<div class="col-sm-3">
<textarea rows="3"></textarea>
</div>
<!-- 占6列的文本域 -->
<div class="col-sm-6">
<textarea class="form-control" rows="3"></textarea>
</div>
</div>
</div>
- 按钮
<button class="btn">按钮</button>
<div class="container">
<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>
</div>
<div class="container">
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<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 button</button>
<button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">（默认尺寸）Default button</button>
<button type="button" class="btn btn-default">（默认尺寸）Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>
<button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
<button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
</p>
</div>
<div class="container">
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>
</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="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li class="active"><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>
</div>
</body>
胶囊式的导航菜单
<div class="container">
<p>基本的胶囊式导航菜单</p>
<ul class="nav nav-pills">
<li><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li class="active"><a href="#">Java</a></li>
<li><a href="#">PHP</a></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>Document</title>
<!-- 引入Bootstrap 的核心CSS文件 -->
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<!-- 引入jquery的核心js文件,需要在bootstrap的js之前引入 -->
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入Bootstrap 的核心js文件 -->
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
下拉菜单
<body>
<!-- 1.使用一个类名为dropdown 或 btn-group 的div包裹整个下拉框
<div class="dropdown"></div>
默认下拉框向上为 dropup ,向下为 dropdown
-->
<div class="dropdown">
<!--
使用 button 作为父菜单,使用类名: dropdown-toggle 和自定义 data-toggle属性
-->
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
喜欢的频道
<!-- 设置下拉箭头 -->
<span class="caret"></span>
</button>
<!-- 下拉菜单项使用一个 ul 列表,并且定义一个类名为 dropdown-menu -->
<ul class="dropdown-menu">
<!-- 分组标题: li 添加类名 dropdown-header 来实现分组的功能-->
<li class="dropdown-header">科普</li>
<li><a href="#">人与自然</a></li>
<!-- 分割线: li 添加类名 driver 来实现下拉分割线的功能 -->
<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>
<!-- 模态框（Modal） -->
<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><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
- 使用方式二：通过 JavaScript：使用这种技术，可以通过简单的一行 JavaScript 来调用带有 id=“identifier” 的模态框
</body>
<button class="btn btn-primary btn-lg" id="btn">开始演示模态框</button>
<!-- 模态框（Modal） -->
<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>
<!-- 模态框（Modal） -->
<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>
<!-- /.modal-content -->
</div>
<!-- /.modal -->
</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>
1322
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
