Bootstrap栅格系统与常用组件
Bootstrap栅格系统与常用组件
目录
-
- Bootstrap栅格系统与常用组件
- 一、Bootstrap栅格系统
-
- （一）栅格系统基本描述
- （二）Bootstrap布局容器
- （三）栅格系统的基本使用
- （四）栅格系统的屏幕适配
- （五）栅格系统中列的操作
- 二、BootStrap常用组件
-
- （一）Bootstrap
- （二）Bootstrap的全局CSS样式概述
- （三）Bootstrap的全局CSS样式——排版
一、Bootstrap栅格系统
1、BootStrap框架
使用方式
A、下载编译包,在页面中导入其核心的css文件和JavaScript文件
<link href="bootstrap.min.css" ref="stylesheet"/>
<script src="../js/jquery-3.4.1.js"></script>
<script src="bootstrap.min.js" type="text/javascript></script>
B、使用CDN提供的文件地址(必须联网)
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
（一）栅格系统基本描述
1、栅格系统（Grid Systems）
即网格系统，它是一种清晰、工整的设计风格，用固定的格子进行网页布局。栅格系统最早应用于印刷媒体上，一个印刷版面上划分了若干个格子，非常方便排版，后来，栅格系统被应用于网页布局中，使用响应式栅格系统进行页面布局时，可以让一个网页在不同大小的屏幕上，呈现出不同的结构。例如，在小屏幕设备上有某些模块将按照不同的方式排列或者被隐藏
2、简单版栅格系统
代码如下
编写HTML结构
<body>
<div class="row"><header>页头</header></div>
<div class="row">
<nav class="col1">导航</nav>
<div class="col2">主要内容</div>
<aside class="col1">侧边栏</aside>
</div>
<div class="row"><footer>页尾</footer></div>
</body>
编写CSS样式代码
<style>
.row { width: 100%; }
.row :after { /* 通过伪元素:after清除浮动 */
clear: left; /* 清除左浮动 */
content: '';
display: table; /* 该元素会作为块级表格来显示（类似 ） */
}
[class^="col"] { float: left; background-color: #e0e0e0; }
.col1 { width: 25%; }
.col2 { width: 50%; }
</style>
编写CSS媒体查询代码
@media (max-width: 768px) {
.row {
width: 100%;
[class^="col"] {
float: none;
width: 100%;
}
}
（二）Bootstrap布局容器
1、布局容器
容器是Bootstrap中最基本的布局元素，容器用于在其中容纳、填充一些内容，以及有时需要使内容居中
在实现Bootstrap页面布局容器之前，需要了解设备屏幕的尺寸
在Bootstrap中，我们不需要编写媒体查询的代码，而是使用一些内置的类名，用来检测不同的设备的宽度
Bootstrap带有3个不同的容器，具体如下
①.container容器：它在每个响应断点处设置了一个max-width最大宽度
②.container-fluid容器：它在每个响应断点处设置布局容器的宽度为100%
③.container-{breakpoint}容器：它在每个响应断点处设置布局容器的宽度为100%，直到达到指定的断点为止
每个容器中的.container-fluid和.container等类，以及每个断点之间的比较
2、.container-fluid类
Bootstrap 4中的.container-fluid类是一种占据全部视口的容器，响应式布局的容器是固定宽度，当改变浏览器窗口大小时，即在特大宽屏设备(≥1200px)、大屏设备(≥992px)、中屏设备(≥768px)、小屏设备(≥576px)和超小屏设备（<576px），页面中的div元素的宽度始终为页面宽度的100%
3、.container类
Bootstrap 4中的.container类用于固定宽度并支持响应式布局的容器。
.container类的最大宽度根据移动端设备屏幕自动设置成100%、540px、720px、960px和1140px
（三）栅格系统的基本使用
1、栅格系统的行和列
Bootstrap栅格系统是指将页面布局划分为等宽的列。随着屏幕或视口尺寸的增加，系统会自动分为1~12列
- 栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局
- 开发者可以将内容放入这些创建好的布局中，然后通过列数的定义来模块化页面布局
- 栅格系统页面的内容可以放入这些创建好的布局容器中，并且会根据父元素盒子（布局容器）尺寸的大小进行适当地调节，从而达到响应式页面布局的效果
2、Bootstrap栅格系统的基本使用方式
①Bootstrap栅格系统为不同屏幕宽度定义了不同的类，直接为元素添加类名即可。
②行必须包含在布局容器中，以便为其赋予合适的排列和内补。
③通过行可以在水平方向创建一组列并且只有列可以作为行的直接子元素。
④行使用样式.row，列使用样式.col--，内容应当放置于列内，列大于12时，将会另起一行排列
案例：学生信息表格
编写HTML结构
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<style></style>
</head>
<body>
<div class="container">
<div class="row"></div>
<div class="row"></div>
</div>
</body>
编写CSS样式代码
<style>
.row {
background-color: #eee;
font-size: 30px;
}
</style>
在原来的CSS代码后，编写如下代码来定义表格的列
<style>
/ * 原代码 */
.col-md-4 {
border: 1px solid #fff;
text-align: center;
}
</style>
在原来的HTML代码中，编写如下代码来定义表格的列
<!-- 在第1行中添加 -->
<div class="col-md-4">姓名</div>
<div class="col-md-4">年龄</div>
<div class="col-md-4">性别</div>
<!-- 在第2行中添加 -->
<div class="col-md-4">张三</div>
<div class="col-md-4">29</div>
<div class="col-md-4">男</div>
（四）栅格系统的屏幕适配
1、栅格系统的类前缀
栅格系统提供了基本的前缀，用于在不同宽度的屏幕中实现不同的排列方式，列的类名可以写多个，也就是可以同时设置.col-、.col-sm-、.col-md-*、.col-lg-*和.col-xl-*类名。当同时使用这些类的时候，它会根据当前屏幕的大小来使相应的类生效，实现在不同屏幕下展示不同的页面结构
2、使用类前缀设置列的宽度
由于栅格系统就是默认将父元素分成12等份，所以可根据占据的份数来设置子元素的宽度，在设置列的宽度时，只需要在不同的类前缀后面加上栅格数量即可
- col-栅格的数量(设置超小设备);
- col-sm-栅格的数量(设置平板);
- col-md-栅格的数量(设置桌面显示器);
- col-lg-栅格的数量(设置大桌面显示器);
- col-xl-栅格的数量(设置超大桌面显示器);
案例：利用栅格系统实现导航栏效果
编写HTML结构
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<ul class="row">
<li class="col-md-3 col-sm-12">首页</li>
<!-- 省略其他3个<li>标签 -->
</ul>
</div>
</body>
编写CSS样式代码
<style>
- { margin: 0;padding: 0; }
li { list-style: none; }
.row { margin-bottom: 0; }
.container { background-color: #eee; }
.col-sm-12 { text-align: center;padding: 10px;font-size: 30px; }
li:hover { background-color: #fff ;}
</style>
（五）栅格系统中列的操作
1、 栅格系统中的列嵌套
栅格系统中内置的栅格系统可以将内容再次嵌套
实现的主要思路：
我们在现有的div.col-md-*元素的内部，再去添加一个新的div.row元素和一系列的div.col-md-*元素
2、栅格系统中的列偏移
栅格系统：使用.offset-md-*类将列向右侧偏移
主要是通过使用.offset-md-*获取到当前元素并且增加了当前元素左侧的边距（margin）来实现的。
md可以使用sm、xl和lg等替代，分别表示在不同屏幕下设置列的偏移
二、BootStrap常用组件
（一）Bootstrap
1、概念：Bootstrap 是由 Twitter 的 Mark Otto(马克·奥托) 和 Jacob Thornton（雅各布·桑顿） 两位设计师开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品
2、特点
- Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架
- Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的
- Bootstrap简洁灵活，使得 Web 开发更加快捷
- Bootstrap可以构建出非常优雅的前端界面，而且占用资源非常小
3、使用原因
- 移动设备优先。框架包含了贯穿于整个库的移动设备优先的样式。
- 浏览器支持。所有的主流浏览器都支持。
- 容易上手。只要你具备HTML、CSS、JS基础知识，就可以开始学习。
- 响应式设计。Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机
4、环境安装
下载的中文地址：http://v3.bootcss.com/
环境配置
（1）使用本地文件：
①bootstrap.css(bootstrap.min.css)：必须的样式文件
②bootstrap.js(bootstrap.min.js):必须的js文件
③jquery.js(jquery.min.js):根据实际情况，若要使用，必须在bootstrap.js文件之前引入
（2）使用CDN加速器：项目在运行时必须联网
（二）Bootstrap的全局CSS样式概述
1、HTML5文档类型
Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。在你项目中的每个页面都要参照下面的格式进行设置
2、移动设备优先
Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。为了确保适当的绘制和触屏缩放，需要在 之中添加 viewport 元数据标签
3、禁用移动设备上的缩放功能
在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉
4、布局容器
- Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding等属性的原因，这两种 容器类不能互相嵌套
- .container 类用于固定宽度并支持响应式布局的容器
- .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器
（三）Bootstrap的全局CSS样式——排版
1、标题
- HTML 中的所有标题标签，
到
均可使用。另外，还提供了 .h1 到 .h6
类，为的是给内联（inline）属性的文本赋予标题的样式
- 在标题内还可以包含 标签或赋予 .small 类的元素，可以用来标记副标题
2、页面主题(body)
Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。
这 些属性直接赋予 元素和所有段落元素。另外， （段落）
元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）
3、表格（table）
- .table：表格的基本样式
- .table-striped：斑马线效果(隔行变色)
- .table-bordered：边框
- .table-hover：鼠标悬停效果(对鼠标悬停做出响应)
- .table-condensed：表格紧缩样式
状态类样式：设置行或单元格的样式
通过这些状态类可以为行或单元格设置颜色
- .active 鼠标悬停在行或单元格上时所设置的颜色
- .success 标识成功或积极的动作
- .info 标识普通的提示信息或动作
- .warning 标识警告或需要用户注意
- .danger 标识危险或潜在的带来负面影响的动作
4、表单(form)
- .form-group：可以让表单控件之间有更好的位置排列
- .form-control：可以让使用该样式的input、textarea、select的宽度为100%
5、按钮(button)
①按钮的样式
<button type="button" class="btn btn-primary">邮电大学</button>
<button type="button" class="btn btn-success">邮电大学</button>
<button type="button" class="btn btn-warning">邮电大学</button>
<button type="button" class="btn btn-danger">邮电大学</button>
<button type="button" class="btn btn-info">邮电大学</button>
②按钮的尺寸
- .btn-lg：大按钮
- .btn-sm：小按钮
- .btn-xs：超小按钮
- .btn-block：按钮的宽度为父容器的100%
6、图片样式
- .img-rounded：圆角图片
- .img-circle：圆形图片
- .img-thumbnail：边框圆角
- .img-responsive：响应式图片
- .center-block：图片水平居中
7、辅助类
（1）文本颜色
- .text-success
- .text-primary
- .text-warning
- .text-info
- .text-danger
（2）背景颜色
- .bg-success
- .bg-primary
- .bg-warning
- .bg-info
- .bg-danger
（3）三角符号
<span class="caret"></span>
（4）清除浮动
<div class="clearfix"></div>
（5）显示和隐藏内容
<div class="hidden"></div>
<div class="show"></div>
你可能感兴趣的:(bootstrap)