bootStarp4.5学习笔记day01

1、bootstarp容器（容纳填充一些内容）

        （1）.container类

                根据屏幕宽度不同，利用媒体查询设置固定的宽度，当浏览器窗口大小改变时，页面效果也会随之发生改变。

        （2）.container-fluid类（例：通栏内容使用）

                在不同设备下始终保持宽度为100%，若要一个元素需要占据全部视口时可以使用.container-fluid类。

 2、栅格系统

        基于12列布局，利用行列来创建页面布局。将内容放入创建好的布局中。

(1)类前缀：

<576px: container最大容器宽度: 100%；类前缀：.col-数字（栅格的数量1-12）;这个列占数字/12

>=576px: container最大容器宽度: 540px；类前缀：.col-sm-;

>=768px: container最大容器宽度: 720px；类前缀：.col-md-;

>=992px: container最大容器宽度: 960px；类前缀：.col-lg-;

>=1200px: container最大容器宽度: 1140px；类前缀：.col-xl-;

offset表示向右偏移多少个栅格。

offset-栅格数量

offset-sm-栅格数量

offset-md-栅格数量

offset-lg-栅格数量

offset-xl-栅格数量

 

未定义屏幕就近显示。

只定义大屏幕未定义小屏幕，默认一列占一行

 

 

 （2）栅格系统基本使用。

        每一行row必须包含在布局容器.container类或.container-fluid类中，方便为其自动设置外边距margin和内边距padding。

        只有列column可以作为row的直接子元素

        内容只能在列内，列大于12，另起一列。

3、响应式布局工具（bootstrap3中用hidden-*类和visible-*类控制内容的显示和隐藏； bootstrap4.5中使用实用工具来响应式地切换display属性的值，结合栅格系统和组件来显示和隐藏；）

        （1）元素隐藏的工具类

                .d-none：在所有屏幕下都隐藏；.d-none .d-sm-block：只在xs（超小屏幕）上隐藏；

.d-sm-none .d-md-block（若无则只在超小屏幕显示）：仅在sm（小屏幕）上隐藏；.d-md-none .d-lg-block：只在md（）上隐藏；

.d-lg-none .d-xl-block：只在lg上隐藏； .d-xl-none：只在xl上隐藏；

        （2）元素显示把none替换成block。

超小屏幕显示，小屏幕隐藏

 

 

4、flex弹性布局

        .d-flex类和.d-inline-flex类来将任意一个容器指定为Flex布局；

        .d-flex类将元素设置为块级弹性盒子；

        .d-inline-flex类将元素设置为内联块级弹性盒子（flex项目显示在同一行上）； 

（1）排列方向

        默认使用.flex-row类来设置flex项目水平方向（从左到右）显示；

        .flex-row-reverse 设置水平反方向（右到左）排列；

        .flex-column类设置项目垂直方向显示；

        .flex-column-reverse类设置垂直方向翻面显示。

（2）内容排列方式

        .justify-content-*类设置项目在主轴的对齐方式（默认以x轴开始；如果设置flex-direction:column,则以y轴开始）；

        *的取值：start（默认值位于容器开头）、end（位于容器结尾）、center（位于容器中间）、between（两端对齐，项目之间的间隔相等）和around（每个项目两侧的间隔相等）。

        若使用.justify-content-around方式，则项目之间的间隔比项目与边框的间隔大一倍。

 

 

 

  css3新标准中的弹性盒子