bootstrap3精华
1.输入框写法
class="input-group" 输入框组 使用input-group， 占屏幕的一小半
轻松在输入框前后添加文本或者按钮元素
class="form-control" 添加样式
-
宽度为100%
-
设置边框为浅灰色
-
控件具有4px的圆角
-
设置阴影效果，元素得到焦点时，阴影和边框效果会发生变化
-
设置placeholder的颜色为#999
<div>
<p>这个是第一个页面，hello world！</p>
<span>请输入姓名:</span>
<input id="name" name="name" placeholder="输入姓名">
</div>
<div>
<p>导入bootstrap 3 之后发生的变化</p>
<div class="input-group">
<span>请输入姓名:</span>
<input class="form-control" id="name2" name="name2" placeholder="输入姓名">
</div>
</div>
2.容器
class="container" 两边留空白
class="container-fluid" 两边不留空白
<div class="container">
这是一个容器
<a href="ke1_1.html">这是链接</a>
</div>
<div class="container-fluid">
左右两边不留空白
</div>
3.栅格系统
class="col-xs- 手机
class="col-sm- 平板
class="col-md- 电脑
class="col-lg- 大桌面显示器
分布12列
清楚浮动
<div class="clearfix visible-sm-block visible-md-block visible-lg-block"></div>
<div class=“row">
<div class="col-sm-4 col-md-4 col-lg-4">第一列</div>
<div class="col-sm-4 col-md-4 col-lg-4">好好好你好好你好好好你好好你好好好你好好你好好好你好好你好好好你好好你好好好你好好你好好好你好好你好好好你好好你好好好你好好你好好好你好好你好好你好好你好</div>
<div class="col-sm-4 col-md-4 col-lg-4">第二列</div>
<div class="col-sm-4 col-md-4 col-lg-4">第三列</div>
</div>
清楚浮动
<div class="clearfix visible-sm-block visible-md-block visible-lg-block"></div>
<div class=“row">
<div class="col-sm-4 col-md-4 col-lg-4">第一列</div>
<div class="col-sm-4 col-md-4 col-lg-4">好好好你好好你好好好你好好你好好好你好好你好好好你好好你好好好你好好你好好好你好好你好好好你好好你好好好你好好你好好好你好好你好好好你好好你好好你好好你好</div>
<div class="col-sm-4 col-md-4 col-lg-4">第二列</div>
<div class="clearfix visible-sm-block visible-md-block visible-lg-block"></div>
<div class="col-sm-4 col-md-4 col-lg-4">第三列</div>
</div>
4. 表格
.table 自动生成自适配表格
.table-striped 增加斑马条纹样式
.table-bordered 为表格和其中的每个单元格增加边框
.table-hover 鼠标移过会有悬停效果
.table-condensed 表格紧凑
按钮
Glyphicons 字体图标 https://v3.bootcss.com/components/
<div class="container">
<div id="toolbar" class="btn-group">
<button type="button" class="btn btn-success">
<span class="glyphicon glyphicon-plus"></span>新增
</button>
<button type="button" class="btn btn-info">
<span class="glyphicon glyphicon-pencil"></span>修改
</button>
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-remove"></span>删除
</button>
</div>
定义id
<table id="table" class="table-striped"> </table>
js
<script>
// table 表格需要加载的数据
data = {
"total": 3,
"rows": [
{"id": 1, "name":"张三", "address": "上海市 徐汇区", "email": "222@qq.com"},
{"id": 2, "name":"张三", "address": "上海市 闵行区", "email": "222@qq.com"},
{"id": 3, "name":"李四", "address": "上海市 松江区", "email": "222@qq.com"},
]
}
// 定义所以的列显示
columns = [
{
checkbox: true,
visible: true
},
{
field: "id",
title: "ID"
},
{
field: "name",
title: "姓名"
},
{
field: "address",
title: "地址"
},
{
title: "操作按钮",
formatter: function () {
return '<button class="btn btn-default">btn-default</button>'
}
},
{
title: "操作按钮",
formatter: function () {
return '<div>' +
'<button class=\"btn btn-default\">删除</button>' +
'<button class="btn btn-default">修改</button> ' +
'<div>'
}},
]
$("#table").bootstrapTable({
toolbar: "#toolbar",
{#data: data,#}
url: "/api/table/",
method: "get",
columns: columns,
pagination: true, // 是否分页
pageNumber: 1, //初始化加载第一页，默认第一页
pageSize: 10, //每页的记录行数（*）
sidePagination: "client", //分页方式：client客户端分页，server服务端分页（*）
pageList: [1, 2, 50, 100, 'All'], //可供选择的每页的行数（*）
search: true, //是否显示表格搜索
showSearchButton: true, //搜索确定按钮
})
</script>
data可以写在视图函数中
在url上
path('/api/table/', views.table_data),
写视图函数
def table_data(): data = { "total": 3, "rows": [ {"id": 0, "name": "张三", "tel": "15002222111"}, {"id": 0, "name": "张三", "tel": "15002222111"}, {"id": 0, "name": "张三", "tel": "15002222111"}, ] } return JsonResponse(data) |
5.form表单
class="form-group" 撑满整个屏幕
内联表单
form-inline
水平表单 form-horizontal
Label 右对齐 Control-label
label和input关联
Form 标签定义
method 提交请求类型 get/post
action 提交地址
<form method="post" action="/api/login/">
<div class="container">
<form class="form-horizontal" action="/api/login" method="post" >
<div class="form-group">
<label for="name" class="control-label col-sm-2 col-md-2 col-lg-2">用户名:</label>
<div class="col-sm-10 col-md-10 col-lg-10">
<input id="name" name="username" class="form-control" placeholder="输入用户名">
</div>
</div>
<div class="form-group">
<label for="password" class="control-label col-sm-2 col-md-2 col-lg-2">密码:</label>
<div class="col-sm-10 col-md-10 col-lg-10">
<input type="password" id="password" name="password" class="form-control" placeholder="输入密码">
</div>
</div>
<div class="form-group">
{# <button type="submit" class="btn btn-info">提交</button>#}
<div class="col-sm-offset-2 col-sm-10 col-md-offset-2 col-md-10 col-lg-offset-2 col-lg-10">
<input type="submit" class="btn btn-info" value="提交按钮">
</div>
</div>
</form>
</div>
<script>
// 监听input 输入框，按回车的事件，取消提交动作
$('input').keydown(function (event) {
if (event.keyCode === 13){
return false;
}
})
</script>
6.select下拉框
class="selectpicker" 下拉框组件
multiple="multiple" 多选属性
data-max-options="3" 最多可以选多少
title="请选择" 最多可以选择多少
class="show-tick" 选中时有勾选效果
data-live-search="true" 可以进行筛选
data-size="8" 最多展示多少
<div class="container">
<form class="form-horizontal">
<div class="form-group">
<label for="project" class="col-md-2 col-ms-2 col-xs-2 control-label">选择项目</label>
<div class="col-md-8 col-ms-8 col-xs-8">
<select id="project" multiple="multiple" data-max-options="3" title="请选择" data-live-search="true" data-size="8" name="project_name" class="form-control show-tick">
<option data-tokens="web ui" value="1">selenium</option>
<option data-tokens="web ui" value="2">pytest</option>
<option data-tokens="web ui" value="3">cypress</option>
<option data-tokens="python" value="4">python</option>
<option data-tokens="java" value="5">java</option>
</select>
</div>
</div>
</form>
</div>
7.下拉菜单
需要同时满足以下三项
class="dropdown"
data-toggle="dropdown" 下拉作用
class="dropdown-menu" 隐藏下拉列表
<div class="container">
<h1>111</h1>
<h2>3333</h2>
<div id='me' 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">分组1</li>
<li><a href="#a1">这是第一个</a></li>
<li><a href="#a2">这是第2个</a></li>
<li><a href="#a3">这是第3个</a></li>
<li class="divider"></li>
<li class="dropdown-header">分组2</li>
<li class="disabled"><a href="#">这是第3个</a></li>
</ul>
</div>
<div id="a1" style="height: 600px" class="bg-warning">
第一屏
</div>
<div id="a2" style="height: 600px" class="bg-info">
第二屏
</div>
<div id="a3" style="height: 600px" class="bg-danger">
第三屏
</div>
</div>
8.bootbox插件-模态框
bootbox.alert 弹出框
bootbox.confirm 确认框
bootbox.prompt 警告框
size 设置框的大小
title 标题
message 内容
callback 点ok后回调代码
onEscape: true,false true是点击关闭按钮，弹窗关闭，反之不关闭
按钮
confirm是js表示确认
cancel是关闭
buttons{
confirm: {
label: "确定",
className: "btn-success"
},
cancel: {
label: "取消",
className: "btn-danger"
}
}
<div class="container">
<button class="btn btn-info">alert 效果</button>
<button class="btn btn-primary">confirm 效果</button>
<button class="btn btn-danger">prompt 效果</button>
</div>
</body>
<script>
$('.btn-primary').click(function () {
bootbox.confirm({
size: "small",
title: "<b>弹出alert 标题</b>",
message: "提示语",
callback: function (result){
if (result){
alert("点确定按钮 do something !")
}
else {
alert("点取消按钮 do something !")
}
},
buttons: {
confirm: {
label: "确定",
className: "btn-success"
},
cancel: {
label: "取消",
className: "btn-danger"
}
}
})
})
</script>
<div class="container">
<button class="btn btn-info">alert 效果</button>
<button class="btn btn-primary">confirm 效果</button>
<button class="btn btn-danger">prompt 效果</button>
<button class="btn btn-success">dialog 自定义对话框</button>
</div>
</body>
<script>
$('.btn-success').click(function () {
// 自定义对话框
bootbox.dialog({
title: "<b>弹出alert 标题</b>",
message: '<form class="form-horizontal">\n' +
' <div class="form-group">\n' +
' <label for="project" class="col-md-3 control-label">项目名称:</label>\n' +
' <div class="col-md-8">\n' +
' <input type="text" class="form-control" name="project" id="project" placeholder="请输入项目名称">\n' +
' </div>\n' +
' </div>\n' +
' <div class="form-group">\n' +
' <label for="desc" class="col-md-3 control-label">项目描述:</label>\n' +
' <div class="col-md-8">\n' +
' <textarea class="form-control" name="desc" id="desc" placeholder="请输入项目名称"></textarea>\n' +
' </div>\n' +
' </div>\n' +
' </form>',
onEscape: true,
buttons: {
btn1: {
label: "按钮1",
className: "btn-info",
callback: function () {
alert("点 btn1 do something! ")
}
},
btn2: {
label: "按钮2",
className: "btn-success",
callback: function () {
alert("点 btn2 do something! ")
}
},
btn3: {
label: "按钮3",
className: "btn-danger",
callback: function () {
alert("点 btn3 do something! ")
}
},
}
})
})
9.
toastr 信息
<div class="container">
<button class="btn btn-info">info 按钮</button>
<button class="btn btn-success">success 按钮</button>
<button class="btn btn-warning">warning 按钮</button>
<button class="btn btn-danger">info 按钮</button>
</div>
</body>
<script>
$('.btn-info').click(function () {
toastr.info("删除成功！")
})
$('.btn-success').click(function () {
toastr.success("新增成功！")
})
$('.btn-warning').click(function () {
toastr.warning("操作警告！")
})
$('.btn-danger').click(function () {
toastr.error("操作失败！")
})
</script>
