11.4 冯娜
学习日志
工具类:
一、边框:
1、border 四周边框、 -top上 、-right右、-bottom下、-left左
2、border-0 无边框、-top-0无上 、-right-0无右、-bottom-0无下、-left-0无左
3、border-primary 边框颜色 (9种)
4、边框圆角:rounded、 -top上 、-right右、-bottom下、-left左、-circle圆、-pill椭圆、-0无边框圆角
5、边框圆角大小:rounded-sm小、rounded-lg大
二、关闭图标:
1、 使用通用的关闭图标来解除模态框(modal)和警告框(alert)等内容 。
2、
<button type="button" class="close" aria-label="关闭">
<span aria-hidden="true">×</span>
</button>
三、颜色
1、文本颜色:text-primary(13种)
2、链接文本颜色:Primary link(10种)
3、背景颜色:bg-primary(10种)注意:bg-transparent(透明)、bg-white(白色)
4、背景渐变: 当$enable-gradients
设置为时true
(默认为false
) , 使用.bg-gradient-
primary(8种)
四、Display属性
1、显示属性
2、属性:none:不会被显示、block:显示为块级元素,该元素前后有换行符、inline:默认,显示为行内元素,该元素前后没有换行符、inline-block:行内块元素、list-item:元素作为列表显示、table: 此元素会作为块级表格来显示(类似
和 | ) 、 inherit : 从父元素继承 display 属性的值。
五、内嵌1、通过创建在任何设备上缩放的固有比率,根据父对象的宽度创建自适应视频或网页等嵌入。 2、 用 3、长宽比: 21:9: embed-responsive-21by9; 16:9:embed-responsive-16by9; 4:3:embed-responsive-4by3; 1:1:embed-responsive-1by1 六、浮动1、实现块级元素在同一行显示。float-left(左浮动)、float-right(右浮动)、float-none(无浮动) 2、浮动原理: 使当前元素脱离普通流,相当于浮动起来一样,浮动的框可以左右移动,直至它的外边缘遇到包含框或者另一个浮动框的边缘 。 3、浮动的影响: 因为浮动元素脱离了普通流,会出现一种高度坍塌的现象:原来的父容器高度是当前元素A撑开的,但是当A元素浮动后,脱离普通流浮动起来,那父容器的高度就坍塌(前提是父容器高度小于A元素高度) 。 、响应式变化:float-sm-left、float-md-left、float-lg-left、float-xl-left 七、清除浮动:1、 通过添加 clearfix 工具类,可以快速轻松地清除容器中浮动的内容 ,不会清除浮动本身。 2、
1234
4567
八、交互1、 更改用户与之交互时选择内容的方式 。 2、 当用户单击该段时,将完全选中该段:user-select-all; 本段具有默认的选择行为:user-select-auto; 用户单击时无法选择该段落:user-select-none 九、溢出1、是内容溢出元素框时发生的事情。 2、overflow-auto: 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 3、overflow-hidden: 内容会被修剪,并且其余内容是不可见的 。 十、定位1、position-static:默认值,元素处于正常的文档流中, 会忽略left、top、right、bottom和z-index属性。 2、position:relative:相对定位, 是指给元素设置相对于原本位置的定位,元素并不脱离文档流,因此元素原本的位置会被保留,其他的元素位置不会受到影响 。 3、position:absolute:绝对定位,指给元素设置绝对的定位,相对定位的对象可以分为两种情况: 1) 设置了absolute的元素如果存在有祖先元素设置了position属性为relative或者absolute,则这时元素的定位对象为此已设置position属性的祖先元素。 2) 如果并没有设置了position属性的祖先元素,则此时相对于body进行定位。 4、position:fixed:固定定位,相对于body定位的。将元素固定在页面的某个位置,不会随着页面滚动条发生位置变化,一直固定在可视区域,脱离文档流,不占据页面空间,会变为块级元素,永远都是相对于浏览器实现位置初始化。 5、position:sticky:设置了sticky的元素,在屏幕范围(viewport)时该元素的位置并不受到定位影响(设置是top、left等属性无效),当该元素的位置将要移出偏移范围时,定位又会变成fixed,根据设置的left、top等属性成固定位置的效果。 6、fixed-top:固定在浏览器页面顶部。 7、fixed-bottom:固定在浏览器页面底部。 8、sticky-top:固定在浏览器页面的顶部。 十、阴影1、shadow-none:无阴影 2、shadow-sm:小阴影 3、shadow:一般阴影 4、shadow-lg:大阴影 十一、尺寸1、w- 宽度 、p-内边距、w-auto:宽度自动 2、h-高度、d-inline-block:行内块元素、h-auto:高度自动 3、mh-最大高度 4、相对于视口:min-vw- 、min-vh、vw-、vh- 十二、间距1、m-:margin 2、p-:padding 3、t-:margin-top/padding-top 4、b-:margin-bottom/margin-bottom 5、l-:margin-left/padding-left 6、r-:margin-right/padding-right 7、x-:-left/-right 8、y-:-top/-bottom 9、0-:消除margin/padding 10、间距有1-5的取值范围 11、auto:设置margin为自动类 12、 13、负边距: 十三、拉伸链接1、 添加 2、卡片中添加:stretched-link 3、
十四、文本1、文本对齐:text-left、text-center、text-right 2、文字换行:text-wrap、text-nowrap 3、文字溢出: 4、单词中断: 可以防止长字符串破坏布局。 5、文本转换:text-lowercase:转为小写的文本;text-uppercase:转为大写的文本;text-capitalize:转为首字母大写的文本。 6、字体粗细和斜体:font-weight-bold 粗体、font-weight-bolder 粗体粗体文本(相对于父元素)、font-weight-normal 普通重量文本、font-weight-light 重量轻的文本、font-weight-lighter较轻的文本(相对于父元素) 、font-italic斜体文字 7、等宽字体: 8、重置颜色: 9、文字装饰: 十五、垂直对齐1、align-baseline 基线 、align-top 顶部 、align-middle 中部 、align-bottom 底部 、align-text-top 文本顶部 、align-text-bottom 文本底部 2、还可以在表格中使用。 十六、可见性:1、 visible :可见 2、 invisible :不可见 十七、flex布局:1、d-flex:flexbox容器;d-inline-flex:嵌入式flexbox容器 2、d-flex有响应式变化,d-sm-flex... 3、方向:flex-row 水平左对齐、flex-row-reverse水平右对齐 flex-column 垂直对齐、 flex-column-reverse 开始从相对侧上的垂直方向 。 也存在的响应式变体 4、内容水平对齐方式:justify-content-start 左对齐、justify-content-end 右对齐、justify-content-center 居中对齐、justify-content-between 两端对齐、justify-content-around 两端留白对齐,具有响应式。 5、内容垂直对齐方式:align-items-start 上对齐、align-items-end 下对齐、align-items-center 居中对齐、align-items-baseline 上对齐、align-items-stretch 占满整个父元素的高度上对齐,具有响应式。 6、布局:具有响应式
7、使内容填充满整个容器:flex-fill。具有响应式。 8、撑开:flex-grow-1: 9、收缩: flex-shrink-1: 10、自动边距:mr-auto 右边、ml-auto左边 11、对齐项目:mb-auto下边、mt-auto上边 12、换行: flex-wrap 、不换行: flex-nowrap 、对侧换行:flex-wrap-reverse。具有响应式。 13、order:响应式下显示模块的顺序。例如:order-2 、order-1、order-3。顺序为:中、左、右。在布局页面时很方便。 14、对齐内容(混合使用):align-content-start flex-wrap 上对齐换行、align-content-end flex-wrap下对齐换行、align-content-center flex-wrap居中对齐换行、align-content-between flex-wrap 上下对齐换行、align-content-around flex-wrap 上下留白居中对齐、align-content-stretch flex-wrap 占满父元素上下对齐。 评论 |
---|
近期评论