BootStrap（day02）

最新推荐文章于 2024-06-22 19:05:40 发布

September_MOTH

最新推荐文章于 2024-06-22 19:05:40 发布

阅读量102

点赞数

分类专栏： web前端入门文章标签： bootstrap css css3

本文链接：https://blog.csdn.net/weixin_51341201/article/details/121185126

版权

web前端入门专栏收录该内容

38 篇文章 2 订阅

订阅专栏

二、BootStrap

如何使用 Boot
全局样式
组件+Js插件
定制 Sass

https://www.bootcss.com/

库与框架的概念:
库: 是一个工具
框架: 框架是一个半成品的项目

Boot 的使用:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <link rel="stylesheet" href="../bootstrap-3.3.7/source/bootstrap.css">
    <script src="../bootstrap-3.3.7/source/jquery.min.js"></script>
    <script src="../bootstrap-3.3.7/source/popper.min.js"></script>
    <script src="../bootstrap-3.3.7/source/bootstrap.min.js"></script>
</head>
<body>
<div class="container">

</div>
</body>
</html>

全局 css 样式
container: 定宽容器, 每种不同的分辨率下定义了写死的 max-width, 同时左右 15px 内边距, 水平居中

container-fluid: 变宽容器, 根据不同分辨率的屏幕宽度永远是屏幕的 100%

boot 支持 4 种屏幕 xl(超大屏)/lg(大屏)/md(中屏)/sm(小屏) 不支持 xs(超小屏)
boot 中 1 个 rem 是 16px. boot 的 css reset 使用的是 normalize.css

① 按钮相关的 class
.btn: 基本类定义了行内块, 字号, 文本对齐, 边框过渡等
按钮颜色
.btn-danger: 红色
.btn-success: 绿色
.btn-warning: 黄色
.btn-info: 青色
.btn-primary: 蓝色
.btn-secondary: 灰色
.btn-dark: 深色
.btn-light: 浅色
不同边框的按钮:
.btn-outline-danger/success/warning/dark/info...
不同的按钮
.btn-lg: 大按钮
.btn-sm: 小按钮
.btn-block: 块级按钮
.btn-link: 连接

② 图片相关
.rounded : 添加圆角
.rounded-circle : 圆形
.img-thumbnail : 添加内边距和边框
.img-fluid : 响应式图片，图片可以缩放但是最大不能超过原始大小

③ 文字相关 class
.text-danger/warning/info..: 文本颜色
.h1~.h6: 文本字号和加粗
.text-uppercase/lowercase/capitalize: 文本大小写转换（大、小、首字母）
.text-left/right/center: 文本对齐
.text-*-left/right/center *:sm/md/lg 媒体查询
.text-justify: 两端对齐，注意，没有媒体查询

④ 列表相关
ul .list-unstyled: 去点, 左内边距清 0
.list-group: 列表组
li .list-group-item: 列表项，边框，首元素和尾元素的圆角
颜色 .list-group-item-danger/info/warning...
激活项: .active
禁用项: .disable

⑤ table 相关
.table 对 table 本身和 table 的后代布局
.table-bordered 为 table 本身和后代添加边框
.table-danger/warning/info...: 表格的背景色
.table-hover: 悬停效果的表格
.table-striped: 隔行变色
.table-responsive-*: *: sm/md/lg 响应式布局, 写在table 的父元素上

辅助类
① 边框
.border-0: 去除边框

.border-top/right/bottom/left-0: 去掉某一个方向的边框

基本类 .border: 灰色实线边框
.border-top/right/bottom/left: 单边的设置

边框颜色 .border-danger/warning/success/info....

② 浮动
.float-left/right/none

.float-*-left/right/none *: sm/md/lg/xl

.clearfix: 解决高度坍塌，写在父元素上

③ 显示
.visible: 是 css 中的: visibility: visible;

invisible: 是 css 中的: visibility: hidden;

④ 背景颜色
.bg-danger/warning/success...

⑤ 圆角
.rounded/.rounded-0
.rounded-top/right/bottom/left

⑥ 尺寸
w-25/50/75/100: width: 25%/50%/75%/100%; 其他自定义

h-25/50/75/100: 同上

mw-100/mh-100 max-width:100%; max-height: 100%;

⑦ 内外边距
m / mt / mr / mb / ml / mx / my-*-auto / 0 / 1 / 2 / 3 / 4 / 5 外边距
0: 0rem
1: 0.25rem
2: 0.5rem
3: 1rem
4: 1.5rem
5: 3rem

p / pt / pr / pb / pl / px / py-*-auto / 0 / 1 / 2 / 3 / 4 / 5 内边距
*: sm / md / lg / xl
__ 栅格布局 __

September_MOTH

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BootStrap（day02）

二、BootStrap如何使用 Boot全局样式组件+Js插件定制 Sasshttps://www.bootcss.com/库与框架的概念:库: 是一个工具框架: 框架是一个半成品的项目Boot 的使用:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev
复制链接

扫一扫