bootstrap 框架
文章目录
- bootstrap
-
-
-
- 必须使用 HTML5 文档类型
- 排版和链接
- 默认栅格系统
- 带有基本栅格的 HTML 代码
- 媒体类型
- 媒体类型
- 逻辑运算符 用来做条件判断
- 页面布局： 引入 css（bootstrap.min.css） + 类名
- 03-面包屑导航
- 警告框、徽章、面包屑导航、按钮、按钮组
- 卡片
- 轮播图
- 折叠面板
- 折叠面板
-
-
bootstrap
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
响应式所具有的特点
1、网页的宽度自动调整
2、尽量少用绝对宽度
3、字体要使用 rem、em 做为单位
4、布局要使用浮动、弹性布局
@规则
@chartset 定义编码
@import 引入css文件（css模块化）
@font-face 自定义字体
@keyframes animation里的关键帧
@media 媒体查询
媒体查询 根据一个或多个基于设备类型、具体特点和环境来应用样式
1、媒体类型
2、媒体特性
3、逻辑运算符
必须使用 HTML5 文档类型
每个页面的开始部分
DOCTYPE html>
<html lang="en">
...
html>
排版和链接
移除了body的 margin
设置了 body 的背景颜色 background-color: white;
使用 @baseFontFamily、@baseFontSize 和@baseLineHeight 属性作为我们排版的基础
通过 @linkColor 设置全局链接颜色，并且，当链接处于 :hover 状态时才会带有下划线
默认栅格系统
栅格系统为12列 ，形成一个940px宽的容器，默认没有启用 响应式布局特性 。如果加入响应式布局CSS文件，栅格系统会自动根据可视窗口的宽度从724px到1170px进行动态调整。在可视窗口低于767px宽的情况下，列将不再固定并且会在垂直方向堆叠。
带有基本栅格的 HTML 代码
<div class="row">
<div class="span4">...div>
<div class="span8">...div>
div>
<div class="row">
<div class="span4">...div>
<div class="span3 offset2">...div>
div>
<div class="row">
<div class="span9">
Level 1 column
<div class="row">
<div class="span6">Level 2div>
<div class="span3">Level 2div>
div>
div>
div>
<div class="row-fluid">
<div class="span4">...div>
<div class="span8">...div>
div>
<div class="row-fluid">
<div class="span4">...div>
<div class="span4 offset2">...div>
div>
<div class="row-fluid">
<div class="span12">
Fluid 12
<div class="row-fluid">
<div class="span6">
Fluid 6
<div class="row-fluid">
<div class="span6">Fluid 6div>
<div class="span6">Fluid 6div>
div>
div>
<div class="span6">Fluid 6div>
div>
div>
div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
div>
<div class="span10">
div>
div>
div>
媒体类型
all 所有设备
print 打印机设备
screen 彩色的电脑屏幕
speech 听觉设备（针对有视力障碍的人士，可以把页面的内容以语音的方式呈现的设备）
注意：tty、tv、projection、handheld、braille、embossed、aural等几种类型在媒体查询4中已经废弃
媒体类型
width 宽度
min-width 最小宽度，宽度只能比这个大
max-width 最大的宽度，宽度只能比这个小
height 高度
min-width 最小高度，高度只能比这个大
max-width 最大的高度，高度只能比这个小
orientation 方向
landscape 横屏（宽度大于高度）
portrait 竖屏（高度大于宽度）
aspect-ratio 宽度比
-webkit-device-pixel-ratio 像素比（webkit 内核的私有属性）
逻辑运算符 用来做条件判断
and 合并多个媒体查询（并且的意思）
, 匹配某个媒体查询（或者的意思）
not 对媒体查询结果取反
only 仅在媒体查询匹配成功后应用样式（防范老旧浏览器）
/* 屏幕尺寸大于500的时候满足 */
@media (min-width:500px){
div{
background: green;
}
}
/* 屏幕尺寸小于400的时候满足 */
@media (max-width:400px){
div{
background: blue;
}
}
/* 横屏的时候满足 */
@media (orientation:landscape){
div{
width: 400px;
height: 100px;
}
}
/* 竖屏的时候满足 */
@media (orientation:portrait){
div{
width: 100px;
height: 400px;
}
}
/* 宽高比为4：3的时候满足，800*600的时候是4：3 */
@media (aspect-ratio:4/3){
div{
border: 10px solid #000;
}
}
/* 当像素比为2的时候，满足 */
@media (-webkit-device-pixel-ratio:2){
div:after{
content: '陈学辉';
font-size: 50px;
}
/* 屏幕的尺寸比700大的时候以及横屏的时候满足 */
@media all and (min-width:700px) and (orientation: landscape){
div{
background: green;
}
}
/* 屏幕尺寸比800小，或者屏幕为横屏的时候满足 */
@media (max-width:800px),(orientation: landscape){
div{
background: pink;
}
}
/* 屏幕的尺寸要大于800的时候，整个才满足 */
@media not all and (max-width:800px){
div{
background: blue;
}
}
@media only screen and (min-width:1000px){
div{
background: grey;
}
}
页面布局： 引入 css（bootstrap.min.css） + 类名
<div class="container">
<div class="row">
<div class="col-xl-3">
xl为超大屏。屏幕宽度>=1200，容器的宽度固定为1140px，一行可以设置12个列。屏幕尺寸
<1200的时候，一行只能设置1列
div>
<div class="col-xl-3">div>
<div class="col-xl-3">div>
<div class="col-xl-3">div>
div>
<div class="row mt-5">
<div class="col-lg-4">
lg为大屏。屏幕宽度>=992px，容器的宽度固定为960px，一行可以设置12个列。屏幕尺寸<992的时候，一行只能设置1列
div>
<div class="col-lg-4">div>
<div class="col-lg-4">div>
div>
<div class="row mt-5">
<div class="col-md-6">
md为中等屏。屏幕宽度>=768px，容器的宽度固定为720px，一行可以设置12个列。屏幕尺寸<768的时候，一行只能设置1列
div>
<div class="col-md-6">div>
div>
<div class="row mt-5">
<div class="col-sm-3">
sm为小屏。屏幕宽度>=576px，容器的宽度固定为540px，一行可以设置12个列。屏幕尺寸<576的时候，一行只能设置1列
div>
<div class="col-sm-3">div>
<div class="col-sm-3">div>
<div class="col-sm-3">div>
div>
<div class="row mt-5">
<div class="col-4">
col为超小屏。屏幕宽度<576px，容器的宽度为auto，一行永远可以设置12列
div>
<div class="col-4">div>
<div class="col-4">div>
div>
<div class="row mt-5">
<div class="col">等宽列div>
<div class="col">等宽列div>
<div class="col">等宽列div>
<div class="col">等宽列div>
<div class="col">等宽列div>
<div class="col">等宽列div>
<div class="col">等宽列div>
div>
<div class="row mt-5">
<div class="col">等宽列1div>
<div class="col">等宽列2div>
<div class="w-100" style="height: auto;border: none;">div>
<div class="col">等宽列3div>
<div class="col">等宽列4div>
div>
<div class="row mt-5">
<div class="col-sm-7">在小屏幕下占7列div>
<div class="col">自动平分剩余的宽度div>
<div class="col">自动平分剩余的宽度div>
<div class="col">自动平分剩余的宽度div>
div>
<div class="row mt-5">
<div class="col-md-auto">在中等屏幕下由内容撑开宽度div>
<div class="col">自动平分剩余的宽度div>
<div class="col-lg-2">在大屏下占2列div>
div>
<div class="row mt-5">
<div class="col-8">所有尺寸下都占8列div>
<div class="col-4">所有尺寸下都占4列div>
div>
<div class="row mt-5">
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">
超大屏6个，大屏4个，中等屏3个，小屏2个，超小屏1个
div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">
超大屏6个，大屏4个，中等屏3个，小屏2个，超小屏1个
div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">
超大屏6个，大屏4个，中等屏3个，小屏2个，超小屏1个
div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">
超大屏6个，大屏4个，中等屏3个，小屏2个，超小屏1个
div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">
超大屏6个，大屏4个，中等屏3个，小屏2个，超小屏1个
div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">
超大屏6个，大屏4个，中等屏3个，小屏2个，超小屏1个
div>
div>
<div class="row v-align align-items-start">
<div class="col">垂直对齐-顶部对齐-行的对齐方式div>
<div class="col">垂直对齐-顶部对齐-行的对齐方式div>
<div class="col">垂直对齐-顶部对齐-行的对齐方式div>
div>
<div class="row v-align align-items-center">
<div class="col">垂直对齐-中间对齐-行的对齐方式div>
<div class="col">垂直对齐-中间对齐-行的对齐方式div>
<div class="col">垂直对齐-中间对齐-行的对齐方式div>
div>
<div class="row v-align align-items-end">
<div class="col">垂直对齐-底对齐-行的对齐方式div>
<div class="col">垂直对齐-底对齐-行的对齐方式div>
<div class="col">垂直对齐-底对齐-行的对齐方式div>
div>
<div class="row v-align">
<div class="col align-self-start">垂直对齐-顶对齐-列的对齐方式div>
<div class="col align-self-center">垂直对齐-中间对齐-列的对齐方式div>
<div class="col align-self-end">垂直对齐-底对齐-列的对齐方式div>
div>
<div class="row v-align justify-content-start">
<div class="col-4">水平对齐-左对齐div>
<div class="col-4">水平对齐-左对齐div>
div>
<div class="row v-align justify-content-center">
<div class="col-4">水平对齐-居中对齐div>
<div class="col-4">水平对齐-居中对齐div>
div>
<div class="row v-align justify-content-end">
<div class="col-4">水平对齐-右对齐div>
<div class="col-4">水平对齐-右对齐div>
div>
<div class="row v-align justify-content-around">
<div class="col-4">水平对齐-分散居中对齐div>
<div class="col-4">水平对齐-分散居中对齐div>
div>
<div class="row v-align justify-content-between">
<div class="col-4">水平对齐-左右两端对齐div>
<div class="col-4">水平对齐-左右两端对齐div>
div>
<div class="row mt-5">
<div class="col">第1列div>
<div class="col order-5">第2列div>
<div class="col order-6">第3列div>
div>
<div class="row mt-5">
<div class="col">第1列div>
<div class="col order-xl-5">第2列div>
<div class="col order-xl-2">第3列div>
div>
<div class="row mt-5">
<div class="col">第1列div>
<div class="col order-first">第2列div>
<div class="col order-last">第3列div>
<div class="col">第4列div>
div>
<div class="row mt-5">
<div class="col-md-4">第1列div>
<div class="col-md-4 offset-md-4">往右偏移4列div>
div>
<div class="row mt-5">
<div class="col-3 offset-md-3">第1列div>
<div class="col-3 offset-md-3">第2列div>
div>
<div class="row mt-5">
<div class="col-sm-5 col-md-6">小屏占5列，中屏占6列div>
<div class="col-sm-5 offset-sm-3 col-md-6 offset-md-5">
小屏偏移3列，中屏偏移5列
div>
div>
<div class="row mt-5">
<div class="col-md-4">第1列div>
<div class="col-md-4 ml-auto">第2列，跑到最右边div>
div>
<div class="row mt-5">
<div class="col-md-3 ml-md-auto">在中屏下，离左边距离自动计算div>
<div class="col-md-3 ml-md-auto">在中屏下，离左边距离自动计算div>
div>
<div class="row mt-5">
<div class="col-auto mr-auto">宽度由内容撑开div>
<div class="col-auto">宽度由内容撑开div>
div>
<div class="row mt-5">
<div class="col-sm-9" style="height: 150px;background: grey;">
父级的第1列
<div class="row">
<div class="col-sm-8 col-6">
子级的第1列，小屏下占8列，超小屏下占6列
div>
<div class="col-sm-4 col-6">
子级的第2列，小屏下占4列，超小屏下占6列
div>
div>
div>
<div class="col-sm-3" style="height: 150px;background: pink;">
父级的第2列
div>
div>
div>
<div class="alert alert-success">
<h4 class="alert-heading">这是一个标题h4>
<p>这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容p>
<hr>
<p>下面还可以添加一个说明p>
div>
<div class="alert alert-warning alert-dismissible fade show">
这是一个可以关闭的警告框，但是需要想入jquery与bottstar.js
<button class="close" data-dismiss='alert'>×button>
div>
<div class="alert alert-danger fade show myAlert">
通过按钮关闭警告框
div>
<button class="closeBtn">关闭警告框button>
div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">script>
<script>
//方法
$('.closeBtn').click(function(){
$('.myAlert').alert('close');
});
//事件
$('.myAlert').on('close.bs.alert',function(){
alert('close方法被调用了');
});
$('.myAlert').on('closed.bs.alert',function(){
alert('警告框关闭了');
});
script>
03-面包屑导航
<div class="row d-block">
<nav>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">首页a>li>
<li class="breadcrumb-item"><a href="#">关于我们a>li>
<li class="breadcrumb-item active">联系我们li>
ol>
nav>
div>
警告框、徽章、面包屑导航、按钮、按钮组
卡片
轮播图
折叠面板
折叠面板
···