BootStrap基础之常用样式总结
文章目录
- BootStrap基础之常用样式总结
- 前言
- 一、什么是bootstrap
- 二、Bootstrap中css样式库使用
- 三、Bootstrap中具体css样式
- 总结
前言
由于bootstrap 3.3.7是当前最稳定的版本，所以本文使用的是bootstrap 3.3.7，
一、什么是bootstrap
1.1 一个前端开发的框架，bootstrap，来自Twitter，是目前很受欢迎的前端框架。基于HTML、CSS、JavaScript的，简洁灵活，使得Web开发更加快捷。
1.2 优点
1.2.1 标准化的html+css编码规范
1.2.2 提供了一套简洁、直观、强悍的组件
1.2.3 有自己的生态圈，不断的更新迭代
1.2.4 让开发更简单，提高了开发的效率
1.3 版本
1.3.1 2.x.x：停止维护,兼容性好,代码不够简洁，功能不够完善。
1.3.2 3.x.x：目前使用最多,稳定,但是放弃了 IE6-IE7。对 IE8 支持但是界面效果不好,偏向用于开发响应式布局、移动设备优先的 WEB 项目
1.3.3 4.x.x ：最新版，目前还不是很流行
二、Bootstrap中css样式库使用
2.1 引入相关样式文件
<!-- Bootstrap,两种方法其中一种 -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> -->
三、Bootstrap中具体css样式
3.1 布局容器
3.1.1 .container-fluid
流式布局容器，百分百宽度
占据全部视口的容器
3.1.2 .container
响应式布局容器，固定宽度
具体的固定宽度由设备宽度决定，参考下图
3.2 栅格系统grid systems
3.2.1 简介
它是指将布局容器划分为等宽的列（rem布局是划分屏幕），然后通过定义一定数量的列来模块化页面布局。
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口尺寸的增加，系统会自动分为最多12列
3.2.2 栅格选项参数
row必须放在container布局容器里面,row可以去除父容器作用15px的边距，而且高度和父级一样高
当设置的column大于12，多余的column所在的元素将被作为一个整体另起一行排列
当设置的column小于12,则占不满整个container 的宽度，会有空白。
可以同时为一列指定多个设备的类名，以便在不同设备下占有不同份数 例如 class=“col-md-4 col-sm-6”
3.2.3 初始写法
<... class="container">
<... class="row">
<... class="col-lg-3 col-md-4 col-sm-6 col-xs-12">...</...>
<... class="col-lg-3 col-md-4 col-sm-6 col-xs-12">...</...>
<... class="col-lg-3 col-md-4 col-sm-6 col-xs-12">...</...>
<... class="col-lg-3 col-md-4 col-sm-6 col-xs-12">...</...>
</...>
</...>
3.2.4 列嵌套 栅格系统再次嵌套一个内置的栅格系统，这个内置的栅格系统作为该列的内容
最好添加row来去除父级的padding
<!-- 列嵌套 -->
<... class="col-sm-4">
<... class="row">
<... class="col-sm-6">...</...>
<... class="col-sm-6">...</...>
</...>
</...>
3.2.5 列偏移 .col-*-offset-* 可以将列向右侧偏移，实际是为当前元素增加了左侧的边距。
<... class="row">
<... class="col-lg-4"></...>
<!--给右侧添加左边距-->
<... class="col-lg-4 col-lg-offset-4"></...>
</...>
3.2.6 列排序 .col-*-push-* 和 .col-*-pull-* ，第一个向后推，第二个向前拉
<... class="row">
<!-- 占4位，向后推8位 -->
<... class="col-lg-4 col-lg-push-8"></...>
<!-- 占8位，向前拉4位 -->
<... class="col-lg-8 col-lg-pull-4"></...>
</...>
3.2.7 响应式工具 针对不同设备展示或隐藏页面内容
与之相反的是hidden改为visible，显示某个内容
3.3 表格
3.3.1 普通表格
<table class="table">
...
</table>
3.3.2 反转颜色表格
<table class="table table-dark">
...
</table>
3.3.3 含有表头样式表格
<thead class="thead-dark">
...
</thead>
<thead class="thead-light">
...
</thead>
3.3.4 条纹状表格
<table class="table table-striped">
...
</table>
3.3.5 是否有边框的表格
<table class="table table-bordered">
...
</table>
<table class="table table-borderless">
...
</table>
3.3.6 有鼠标悬停样式的表格
<table class="table table-hover">
...
</table>
3.3.7 紧缩表格的表格
<table class="table table-sm">
...
</table>
3.3.6 含有状态类的子项的表格
<!-- On rows -->
<tr class="table-active">...</tr>
<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="table-active">...</td>
<td class="table-primary">...</td>
<td class="table-secondary">...</td>
<td class="table-success">...</td>
<td class="table-danger">...</td>
<td class="table-warning">...</td>
<td class="table-info">...</td>
<td class="table-light">...</td>
<td class="table-dark">...</td>
</tr>
3.4 表单
3.4.1 表单布局
-
基本布局
.form-group 将 label 元素和控件包裹在 .form-group 中可以获得最好的排列。<div class="form-group"> ... </div>
-
栅格布局
.form-row .col-设备-格数<div class="form-row"> <div class="form-group col-设备-格数"> ... </div> </div>
-
水平布局
.col-form-label，<label>使它们与相关的表单控件垂直居中<div class="form-group row"> <label class="col-设备-格数 col-form-label"></label> <div class="col-设备-格数"> <input class="form-control" > </div> </div>
3.4.2 基本表单
.form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;
<input class="form-control">
<select class="form-control">
<textarea class="form-control"></textarea>
<-- 特殊例子文件输入 -->
<input type="file" class="form-control-file" >
.form-control-lg 和 .form-control-sm设置高度
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
.form-control-plaintext 和 readonly 删除默认的表单字段样式，并保留正确的边距和填充。读取固定内容
<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
3.4.3 复选框和单选框
-
垂直堆叠
.form-check 有适当间隔的垂直排列。<div class="form-check"> ... </div>
-
水平堆叠
.form-check-inline 同一水平行来对它们进行分组<div class="form-check form-check-inline"> ... </div>
3.4.4 内联表单
<form class="form-inline">
...
</form>
3.4.5 帮助文字
.form-text 块级帮助文本
.text-muted 内联帮助文本
<small class="form-text text-muted">
...
</small>
3.4.6 验证
novalidate属性添加到<form>。禁用浏览器的默认反馈工具提示，但仍提供对JavaScript中的表单验证API的访问。
<form class="needs-validation" novalidate>
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="validationCustom01">First name</label>
<input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
</form>
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
3.5 按钮
3.5.1 普通按钮
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
3.5.2 轮廓按钮
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
3.5.3 尺寸
//大尺寸
<button type="button" class="btn btn-primary btn-lg">Large button</button>
//小尺寸
<button type="button" class="btn btn-primary btn-sm">Small button</button>
//块级按钮
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
3.5.4 活跃状态
处于活动状态时，按钮将显示为按下状态（背景变暗，边框变暗和阴影变暗）
<button class="active">
...
</button>
3.5.5 禁用状态
使按钮看起来不活动
<button disabled>
...
</button>
3.5.6 切换状态（在bootstrap4中貌似无效，需要引入bootstrap3）
需要引入<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
添加属性 data-toggle="button"，以切换按钮地active状态。
<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
Single toggle
</button>
3.6 下拉菜单
3.6.1 单键菜单
先后引入顺序
css
jquery
js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<style>
.container {
width: 500px;
font-size: 12px;
height: 500px;
border: 1px solid #dbdbdb;
margin: 50px auto;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="true">
点击有惊喜
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="https://www.baidu.com">百度一下</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>
</div>
</body>
</html>
3.6.2 分割菜单
.dropdown-toggle-split以便在下拉式插入符周围保持适当的间距。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="../bootstrap-4.3.1/dist/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
</head>
<body>
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</body>
</html>
3.7 输入组
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">...</span>
</div>
<input type="text" class="form-control">
...
</div>
3.8 按钮组
<div class="btn-group" role="group">
<button type="button" class="btn btn-...">...</button>
<button type="button" class="btn btn-...">...</button>
...
</div>
837
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
