二.BootStrap

列表相关(列表组)

去除标识项
类：list-unstyled—内容list-sytle:none；padding-left: 0;

生成列表组
ul的类list-group ，定义了：弹性，y轴等
li的类list-group-item 定义了：边框—第一项和最后一项带圆角等
.list-group-item-danger/warning/info 设置列表项的颜色
.active 激活项（蓝色高亮）
.disabled 禁用项（背景透明）

<ul class="list-unstyled list-group"><li class="list-group-item list-group-item-danger active">电锯惊魂</li><li class="list-group-item list-group-item-warning">行尸走肉</li><li class="list-group-item list-group-item-info disabled">死神来了</li><li class="list-group-item list-group-item-success">下水道的美人鱼</li><li class="list-group-item list-group-item-primary ">饥饿站台</li>
</ul>

表格相关的样式
基本类： table 设置了：宽度100% th,td的上边框等
table-bordered 给table添加边框，给table下的th td添加边框
table-danger/warning.. ：表格背景色
.table-striped 给奇数行，添加一层0.05透明度的黑纱
.table-hover 给鼠标悬停的行，添加一层0.075透明度的黑纱

三.辅助类—所有元素都能用类

边框
设置边框的基本类
.border 设置4个方向边框
.border-top/right/bottom/left 单独设置某一个方向边框
清除边框
.border-0 清除4个方向边框
.border-top/right/bottom/left-0 单独清除某个方向边框
.border-info/warning/danger... 设置边框颜色（需要先设置border基本类）
浮动
float-*-left/right/none *代表:sm/md/lg/xl
父元素解决高度坍塌 .clearfix
```
.clearfix::after {display: block;clear: both;content: "";}
```
显示效果
.visible 设置：visibility:visible
.invisible 设置：visibility:hidden
背景色
bg-danger/info/warning...
圆角
rounded 设置4个角0.25rem圆角
rounded-top/right/bottom/left 设置某一个方向的两个圆角
ounded-circle 50%的圆角
rounded-0 清除圆角
内外边距
1. 外边距：
  m/mt/mr/mb/ml/mx/my-*-0/1/2/3/4/5/auto
  *:sm/md/lg/xl
  0:0
  1:0.25rem
  2:0.5rem
  3:1rem
  4:1.5rem
  5:3rem
2. 内边距：
  p/pt/pr/pb/pl/px/py-*-0/1/2/3/4/5 没有auto
尺寸
w-25/50/75/100
h-25/50/75/100

四.栅格布局grid（重点）

web页面中的布局，一般分为三种

table布局	div+css布局	Boot封装的栅格布局
简单，容易控制	语义正确，渲染效率高	简单，容易控制，语义正确，渲染效率高，支持响应式
语义错误，渲染效率低	控制起来很麻烦	复杂页面不适合使用栅格

栅格的使用
把每一个布局，都看成一行，每一行分成12份，用12份来控制子元素的宽度
div.row 弹性，x主轴，可换行左右-15px外边距
div.col-n n:1~12 左右+15px内边
响应式栅格
col-*-n *:sm/md/lg/xl n:1~12
注意：每一个col自带左右15px内边距，经常要清空
no-gutters ：可以清除row的-15px外边距和col的15px的内边距

练习
lg- 3:6:3 md- 3:9 右侧display:none 手写媒体查询 sm:12:12:12
列偏移
offset-*-1/2/3/4/5/6/7/8/9/10/11 *：sm/md/lg/xl
不带数字的col类
自动根据数量平分整个row
而且，数量可以超过12个，取决于内容大小

T-Bootstrap-day02-辅助类、栅格布局相关推荐

【Bootstrap】框架栅格布局系统设计原理
前提条件(Bootstrap 自带) 首先使用这个布局之前要定义一下代码: 这行代码如果不懂,可以搜索一下,总之大致意思就是,被定义的元素的内边距和边框不再会增加它的宽度,不加入的话排版会有问题. 不 ...
【Bootstrap】bootstrap入门之栅格布局、弹性布局、组件类_02
目录一.响应式网页二.Bootstrap 三.栅格布局 1.语法 2.源码解析 3.不带数字的col类 4.栅格的列偏移四.弹性布局五.关于input 的样式
b关于bootstrap官网https://v4.bootcss.com/docs/layout/grid/关于栅格布局的学习和实践博客
一,首先,我们来认识一下什么是bootstrap 什么是Bootstrap? 工欲善其事,必先利其器,话说在前端开发中,如何快速的搭建一个网站页面呢? 在程序的世界里,最不缺的就是轮子,凡是你能想到 ...
bootstrap 标题居中加颜色_BootStrap从基础到项目实战_第1季_03章_01_CSS样式之栅格布局...
目标目标一.理解什么是栅格布局目标二.掌握栅格布局具体应用目标三.掌握BootStrap通用CSS样式(排版.代码.代码.表单.按钮.图片.辅助类.响应式工具) 内容一.BootStrap全局 ...
Bootstrap学习笔记01【快速入门、栅格布局】
Java后端学习路线笔记汇总表[黑马程序员] Bootstrap学习笔记01[快速入门.栅格布局][day01] Bootstrap学习笔记02[全局CSS样式.组件和插件.案例_黑马旅游网][d ...
Bootstrap（二）——Grid栅格布局
文章目录一.栅格系统(布局) 1.1 基本结构示例:col-x 1.2 偏移列一.栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewp ...
Bootstrap栅格布局分析grid源码
前言此为本人自学经验和某站博主经验,与其他简书作者经验共同写出. 如有侵权请联系. 布局首选布局前,大家要明白bootstrap几种布局方式栅格&flex 这篇文章先讲解栅格,flex以 ...
Bootstrap栅格布局
1.栅格系统 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列.它包含了易于使用的预定义类,还有强大的mixin ...
Bootstrap栅格布局解析
文章目录栅格布局初始栅格栅格布局源码 grid.less mixin中的grid.less clearfix.less 栅格布局源码分析流体容器&固定容器公共样式 @grid-gutt ...
grid layout(网格布局、栅格布局、grid布局)：bootstrap，请到历史书报道！
grid布局就是表格布局(grid layout),或者称之为栅格布局也行.因为栅格布局的概念来自于bootstrap,这里使用栅格布局来与bootstrap做关联,是因为它俩是描述的同一个东西.自从 ...

T-Bootstrap-day02-辅助类、栅格布局

文章目录

二.BootStrap

三.辅助类—所有元素都能用类

四.栅格布局grid（重点）

T-Bootstrap-day02-辅助类、栅格布局相关推荐

最新文章

热门文章