bootstrap 框架
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
文章目录
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 2</div>
<div class="span3">Level 2</div>
</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 6</div>
<div class="span6">Fluid 6</div>
</div>
</div>
<div class="span6">Fluid 6</div>
</div>
</div>
</div>
<!-- 流式布局 -->
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
</div>
<div class="span10">
<!--Body content-->
</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;
}
}
/* 宽高比为43的时候满足800*600的时候是43 */
@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;
}
}
页面布局 引入 cssbootstrap.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>
<!-- 设置等宽列平分宽度通过.col的class去设置 -->
<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>
<!-- 设置多行等宽列在希望断开的地方添加一个.w-100的class能够让后面的列换行 -->
<div class="row mt-5">
<div class="col">等宽列1</div>
<div class="col">等宽列2</div>
<div class="w-100" style="height: auto;border: none;"></div>
<div class="col">等宽列3</div>
<div class="col">等宽列4</div>
</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>
<!-- 设置根据内容调整列的宽度使用.col-{breakpoint}-auto -->
<div class="row mt-5">
<div class="col-md-auto">在中等屏幕下由内容撑开宽度</div>
<div class="col">自动平分剩余的宽度</div>
<div class="col-lg-2">在大屏下占2列</div>
</div>
<!-- 设置所有尺寸下都占同样的列数。使用.col-* -->
<div class="row mt-5">
<div class="col-8">所有尺寸下都占8列</div>
<div class="col-4">所有尺寸下都占4列</div>
</div>
<!--
混合排列或者组合模式
1、超大屏幕下一行显示6个div,一个div应该占2列
2、大屏幕下一行显示4个div,一个div应该占3列
3、中等屏幕下一行显示3个div,一个div应该占4列
4、小屏幕下一行显示2个div,一个div应该占6列
5、超小屏幕下一行显示1个div,一个div应该占12列
-->
<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>
<!-- 对齐 -->
<!--
垂直对齐
1、行的对齐方式
align-items-start 顶对齐
align-items-center 中间对齐
align-items-end 底对齐
2、列的单独对齐方式
align-self-start 顶对齐
align-self-center 中间对齐
align-self-end 底对齐
-->
<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>
<!--
水平对齐
1、justify-content-start 左对齐
2、justify-content-center 居中对齐
3、justify-content-end 右对齐
4、justify-content-around 分散居中对齐每个元素两侧的间距是相等的
5、justify-content-between 左右两端对齐元素之间的间距是自动平分的
-->
<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>
<!--
列排序使用.order-{breakpoint}-*
3.x的版本使用的是.col-{breakpoint}-push-* .col-{breakpoint}-pull-*来排序
-->
<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>
<!-- 只有当屏幕尺寸>=1200的时候才会进行排序 -->
<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>
<!-- order-first代表排在第1位order-last代表排在最后一位 -->
<div class="col order-last">第3列</div>
<div class="col">第4列</div>
</div>
<!-- 列偏移使用offset-{breakpoint}-* -->
<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>
<!--
间距 使用margin工具可以让列之间产生间距
mr-{breakpoint}-auto 使右侧的列远离到最右边
ml-{breakpoint}-auto 使左侧的列远离到最左边
-->
<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>
<!--
嵌套 每一个列里面可以再继续放行那嵌套里面的元素就会以父级的宽度为基准再分12个列
-->
<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>
警告框、徽章、面包屑导航、按钮、按钮组
卡片
轮播图
折叠面板
折叠面板
···