官网 https://getbootstrap.com
中文网 https://www.bootcss.com
v3 组件 https://v3.bootcss.com/components/
<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>
~
,样式覆盖<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>
sh xxx.sh
sql
<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>
<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>
<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>
<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>
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>
https://examples.bootstrap-table.com/
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>