BootStrap基础之常用样式总结


文章目录

前言

由于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>

总结


Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐