《HYLI5教程课件》_《HYLI5教程课件》_第九章 跨平台响应式技术.pptxVIP

;;;;linkrel=“stylesheet”media=“媒体类型and|not|only（媒体特性）”href=“链入的样式表路径”;;;【案例引入】;;1.条件表达式;2.布局流程;9.2.2响应式导航;9.2.3响应式图像;2、背景图片的处理;;9.3.1Bootstrap框架简介;9.3.2Bootstrap栅格系统;【案例引入】;;媒介分类

Bootstrap将屏幕大小分为4类

/*屏幕大小小于768px*/

@media(max-width:767px){...}

/*屏幕最小宽度为768px*/

@media(min-width:768px){...}

/*屏幕最小宽度为992px*/

@media(min-width:992px){...}

/*屏幕最小宽度为1200px*/

@media(min-width:1200px){...}

代表屏幕大小的几个缩写形式：

xs：extrasmall特别窄屏幕，默认指浏览器像素宽度小于768px；

sm：small窄屏幕，默认指浏览器像素宽度大于等于768px，通常是平板宽度；

md：middle中等宽度屏幕，默认值指浏览器像素宽度大于等于992px，通常是桌面显示器，略缩小的情况；

lg：large大屏幕，默认值指浏览器像素宽度大于等于1200px。;预期结果：

（1）container≥1200px(lg):4列布局1：2：8：1；

（2）container≥992pxcontainer＜1200px(md)：3:3:3:3

（3）container≥768pxcontainer＜991px(sm)：2:4:4:2

（3）container＜768px(xs)：div默认display:block;;徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要把spanclass=badge添加到链接、Bootstrap导航条等这些元素上即可。

效果如下图;9.3.5Bootstrap响应式表格;;9.3.6Bootstrap响应式导航条;;9.4.1盒子模型;元素的总宽度计算公式是这样的：;9.4.2使用弹性布局;9.4.3弹性盒子布局相关属性详解;;【案例引入】;并没有改变项目的宽，但是由于处于弹性盒中项目过多，项目在主轴上被压缩。如果需要调整为项目过多时，自动新启一行，如下图的排列效果：;前两个都理解了，第三个属性值wrap-reverse，如果需要换行的项目会排在上面，像下图这样，则需要把flex-wrap的属性值调整为：wrap-reverse。;justify-content属性验证，通过为justify-content属性设置不同的值，观察弹性项目的排版效果。具体效果如下：

flex-start：;align-items属性验证，通过为align-items属性设置不同的值，观察弹性项目的排版效果。具体效果如下：

flex-start：;align-content

align-content属性定义多根轴线的对齐方式，这个属性只有在容器有多条主轴是才有效，一条主轴无效，类似于justify-content属性，下面通过分别指定不同的值，来观察具体的效果。

flex-start：;项目属性

弹性盒布局“项目”有如下属性：

order

flex：flex-grow、flex-shrink、flex-basis

align-self

order

order允许自定义项目的排列顺序，默认为0，属性值是数字，数值越小越靠前，有点类似优先队列中的优先级。

如下部分代码：

.flex-item:nth-child(1){

......

order:99;}

.flex-item:nth-child(2){

......

order:-1;}

.flex-item:nth-child(3){

......};flex-shrink

flex-shrink定义项目的缩小比例，默认是1，就是如果空间不足，该项目将等比缩小，通过这个属性可以控制各个项目缩小的比例。

演示代码如下：

.flex-item:nth-child(1){

flex-shrink:1;}

.flex-item:nth-child(2){

flex-shrink:2;}

.flex-item:nth-child(3){

flex-shrink:3;}

最终效果如图：;flex

flex是flex-grow、flex-shrink、flex-basis的复合属性。默认值：01auto，后两个属性可选。可以写关键字：auto(11