BootStrap
2021年8月10日
1.响应式所具有的特点
(1)网页的宽度自动调整
(2)尽量少用绝对宽度
(3)字体要使用rem、em做为单位
(4)布局要使用浮动、弹性布局
2.规则
@chartset 定义编码
@import 引入css文件(css模块化)
@font-face 自定义字体
@keyframes animation里的关键帧
@media 媒体查询
媒体查询是根据一个或者多个基于设备类型、具体特点和环境来应用的样式@media
3.媒体类型
all 所有设备
print 打印机设备
screen 彩色的电脑屏幕
speech 听觉设备(针对有视力障碍的人士,可以把页面的内容以语音的方式呈现的设备)
4.媒体特性
width 宽度
min-width 最小宽度,宽度只能比这个打
max-width 最大宽度,宽度只能比这个小
height 高度
min-width 最小高度,高度只能比这个大
max-width 最大的高度,高度只能比这个小
orientation 方向
landscape 横屏(宽度大于高度)
portrait 竖屏(高度大于宽度)
aspect-ratio 宽度比
-webkit-device-pixel-ratio 像素比(webkit内核的私有属性)
5.逻辑运算符 用来做条件判断
and 合并多个媒体查询(并且的意思)
, 匹配某个媒体查询(或者的意思)
not 对媒体查询的结果取反
only 仅在媒体查询匹配成功后应用的样式(防范老旧游览器)
2021年8月11日
1.bs4.ntp.org.cn 是BootStrap4的中文文档
2.BootStrap的html内容需要写在<div class="container-fluid">是将屏幕尺寸设置为100%</div>或<div class="container">当用户屏幕大则class设置的屏幕大,用户屏幕小则class设置的屏幕小</div>中
3.BootStrap中栅格系统中的行<div class="row"></div>
4.BootStrap中的栅格系统中的列<div class="col-xl-1",当class的名字后的数字是几就代表占几列,最多12列
5.col-xl-3;x1为超大屏,屏幕宽度>=1200,容器的宽度固定为1140px,一行可以设置12列。屏幕尺寸<1200的时候,一行只能设置一列
6.col-lg-3;lg为大屏,屏幕宽度>=992px,容器的宽度固定为960px;一行可设置12列
2021年8月12日
1.col-md-3;md为中等屏,屏幕宽度>=768px,容器的宽度固定为720px;一行可设置12列
2021年8月13日
1.col-sm-3;sm为小屏,屏幕宽度>=576px,容器的宽度固定为540px,一行可以设置12列。屏幕尺寸<576的时候,一行只能设置1列
2.col-4;col为超小屏,屏幕宽度<576px,容器的宽度为auto,一行永远可以设置12列
3.设置等宽列,在class中加入名称col,有几个列就将父级的行分成相等的几份,断开等宽需要在断开的col元素后面加上一个元素并且class设置为w-100;
4.设置根据内容调整列的宽度,使用.col-{xl/lg/md/sm}-auto当满足大括号中的要求自动撑成一行
5.2021年8月14日
1.垂直对齐
(1)行的对齐方式
align-items-start 顶对齐
align-items-center 中间对齐
align-items-end 底部对齐
(2)列的单独对齐方式
align-self-start 顶对齐
align-self-center 中间对齐
align-self-end 底对齐
2.水平对齐
(1)justify-content-start 左对齐
(2)justify-content-center 居中对齐
(3)justify-content-end 右对齐
(4)justify-content-around 分散居中对齐(每个元素两侧的间距是相等的)
(5)justify-content-between 左右两端对齐(元素之间的间距是自动平分的)
3.列排序,使用col order-数字,其中数字是几就表示在12列中的第几位,数字越大越靠后,order-first设置第一位,order-last设置最后一位
4.元素偏移.col-{xl/lg/md/sm}-5;相关屏幕中偏移5列
5.mr--{xl/lg/md/sm}-auto使右侧的列远离到最右边
ml--{xl/lg/md/sm}-auto使左侧的列远离到最左侧
6.col-auto宽度由内容撑开,
2021年8月15日
1.Bootstrap框架默认会有清除样式,如table表格想要重置样式需要在加入class="table"
2.<pre></pre>设置带格式的标签
3.副标题标签small,在p标签的class中加上名称h1/h2……h6,将P标签设置成标题样式
4.给标题设置比h1更大的字体,在class中加入名称display-1到4
5.引言在class中加入名字lead用来突出段落
6.给文字加重样式用mark标签,表现删除文字用del标签,表现插入文本用ins标签,表现文字小一点用small标签,表现文本加粗用strong标签,斜体文本用em标签,可以用class名称.mark代替mark,用.small代替small标签
7.缩写标签,用abbr标签,里面有一个属性title=“全称”,class中填入.initialism可以让字体变得小一点
8.引用跟署名使用blockquote标签包裹在并且class中加入.blockquote,引用的人名加上footer标签,并且class中加入.blockquote-footer
9.文字内容对齐在class中加入.text-left/.text-center/.text-right让文字左/居中/右对齐
10.无特效列表,在ul的class中加入.list-unstyled,清除ul.li标签中的默认样式
11.让超出的内容变成省略号,class中加入text-truncate
12.给文字添加颜色code标签
13.代码放在code里,再放到pre标签里,给pre标签上来一个pre-scrollable的class,就会显示一个340px高的框,超过之后就会出现滚动条
14.按钮标签在按钮两个字上加上<kbd></kbd>文字就会出现按钮的形状
15.响应式图片,给图片class添加一个img-fluid
16.给图片设置成缩略图(响应式),给class添加img-thumbnail
17.给图片设置圆角给图片的class加上rounded
18.给元素设置浮动,左浮动在class中加入.float-left,右浮动在class中加入.float-right
2021年8月16日
1.根据不同的尺寸加载不同的图片运用picture标签,主要结构如下
<picture>
<source media="(min-width:1200px)" srcset="images/1140.jpg">
<source media="(min-width:992px)" srcset="image/960px.jpg">
<sorce media="(min-width:768px)" srcset="image/720px.jpg">
<img src="image/img_01.jpg" alt=""><!--当尺寸小于576的时候会显示这个图片-->
</picture>
2.webp格式的图片,体积比jpg小很多倍但是是高清图片;
3.table表格进行颜色添加,隔行换色在table中的class中加入table-strped
4.去除table表格边框.table-borderless;给table添加鼠标高亮显示.table-hover,更小的表格.table-sm
2021年8月17日
1.变成响应式的弹性盒模型 d-{breakpoint}-flex/inline-flex
2.响应式弹性盒模型的子元素排列方向
(1)flex-row 正序水平排列
(2)flex-row-reverse 倒叙水平排列
(3)flex-column 正序垂直排列
(4)flex-column-reverse 倒叙垂直排列
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库
· SQL Server 2025 AI相关能力初探
· 为什么 退出登录 或 修改密码 无法使 token 失效
2018-10-05 django
2018-10-05 mysql5.5被django抛弃,安装mysql5.7记录
2018-10-05 建议使用nginx配合uwsgi,