Bootstrap

最新推荐文章于 2024-06-25 09:41:16 发布

青黄皂白

最新推荐文章于 2024-06-25 09:41:16 发布

阅读量260

点赞数

分类专栏：前端学习文章标签： bootstrap

本文链接：https://blog.csdn.net/qq_45902611/article/details/115858840

版权

前端学习专栏收录该内容

13 篇文章 0 订阅

订阅专栏

PART3_2

响应式布局

利用媒体查询，即media queries，可以针对不同的媒体类型定义不同的样式，从而实现响应式布局。

媒体类型

取值	含义
all	用于所有设备。
print	用于打印机和打印预览。
screen	用于电脑屏幕，平板电脑，智能手机等。
speech	应用于屏幕阅读器等发声设备。

常见选项：

媒体类型

and，not

min-width、max-width

orientation:portrait、orientation:landscape

常见修改样式：

display

float

width

注：响应式代码写到要适配的CSS后面

Bootstrap

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

特色：

响应式布局
基于flex的栅格系统
丰富的组件和工具方法
常见交互使用

官网：https://getbootstrap.com/

Box-sizing

*,
*::before,
*::after {
  box-sizing: border-box;
}

将所有盒子模型设置为border-box

Containers

content：版心

container：通栏

各种屏幕比例下的设置（源码）：

.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container, .container-sm {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container, .container-sm, .container-md {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container, .container-sm, .container-md, .container-lg {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container, .container-sm, .container-md, .container-lg, .container-xl {
    max-width: 1140px;
  }
}

Grid system

row代表行，col代表列，列写在行的标签里，写几个col就有几列。

在此基础上，有sm，md，lg，xl四个屏幕宽度，用-连接唉row或col后面，表示适配的屏幕大小，比如col-sm就是当屏幕宽度小于576px时，就不再按照rowcol的规则来排列，而会根据文档流挤到下一行。

Grid options

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-J4RkoT6M-1618798989596)(C:\Users\DSH\AppData\Roaming\Typora\typora-user-images\image-20201121170026903.png)]

Auto-layout

当直接写col的时候会平均分配
在两行之间加class="w-100"的标签，表示换行
col-6表示在12个栅格中占六个，如果一行超过12个则会换到下一行
col-auto表示根据内容自适应
col-md-4 col-lg-6 表示在md下占四格，在lg下占6个
no-gutters表示无间距

Alignment 对齐方式

align-items-start	：靠上对齐
align-items-center	：居中对齐
align-items-end		：靠下对齐

justify-content-start	：靠左对齐
justify-content-center	：居中对齐
justify-content-end		：靠右对齐
justify-content-around	：两边留白中间自适应
justify-content-between	：左右定格中间自适应

Order

按照优先级排序

order-12，order-1...

offset

offset-md-4 ：表示在左边空出四个格子的间距

m？-？

m表示margin

mr-auto : margin-right : auto;
mt-5 : margin-top : 5rem;
mt-md-5 : margin-top : 5rem; md响应式范围内添加
mx-5 : margin-left : 5rem; margin-right : 5rem;
my-5 : margin-top : 5rem; margin-bottom : 5rem;
mt-n5 : margin-top : -5rem;
py-5 : padding-top : 5rem; padding-bottom : 5rem;