11.2 冯娜

学习日志

今天是收获满满的一天。

做了6个页面,每一个页面都有对应需要联系的知识点,晚上学习练习了栅格布局,明白了栅格布局的优点。也开始学着分割页面,逐渐模块化。

一、页面总结:

(一)页面一:

1、导航栏:

                                                           关于

                    

Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
                        Soluta necessitatibus porro officia distinctio sunt dignissimos facere incidunt 
                        perferendis hic praesentium? Id alias eius accusamus corporis minus illo recusandae rerum esse.

                

                                     联系我们

   
                    

                        Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                        Excepturi fugiat molestias eligendi similique recusandae? 
                    

        
                

            

        

    

                          
                Album
            
                             aria-controls=”navbarHeader” aria-expanded=”false” aria-label=”Toggle navigation”>
                
            
        

    

2、卡片组的使用(响应式)

(二)页面二:

1、导航栏:

2、卡片组的使用:使用卡片写页面非常方便。

(三)页面三:

1、登录界面,使用卡片完成。

(四)页面四:

1、导航栏:

页面1、页面2、页面4的导航栏各有特色,在不同情况下使用不同导航栏。

(五)页面五:

1、使用了带控件的轮播图。

2、圆形的图片的实现。

3、卧式卡片的使用。

(六)页面六:

1、使用了Bootstrap的图标。

2、使用了栅格系统完成主体页面布局及响应式。

一、栅格系统:

1、gridsystems:是指页面划分为等宽的列,通过列数的定义来模块化页面布局。

2、.container容器。

3、.row(行)

div class="container"{

​ div class="row"{

​ div class="col-lg-3" 1(列)

​ div class="col-lg-3" 2

​ div class="col-lg-3" 3

​ div class="col-lg-3" 4

}

若孩子的分数相加,小于12 ,则站不满整个屏幕。

div class="row"{

​ div class="col-lg-3" 第1列(列)

​ div class="col-lg-3" 第2列(列)

​ div class="col-lg-3" 第3列(列)

​ div class="col-lg-3" 第4列(列)

}

若孩子的分数相加,大于12 ,多余的一列会另起一行显示。

div class="row"{

​ div class="col-lg-4" col-md-4(中屏下) col-sm-6(小屏下) col-xs-12(超小屏下) 第1列(列)

​ div class="col-lg-3" col-md-4(中屏下) col-sm-6(小屏下) col-xs-12(超小屏下) 第2列(列)

​ div class="col-lg-3" col-md-4(中屏下) col-sm-6(小屏下) col-xs-12(超小屏下) 第3列(列)

​ div class="col-lg-3" col-md-4(中屏下) col-sm-6(小屏下) col-xs-12(超小屏下) 第4列(列)

}

}

标签

IT特种兵 云创动力前端开发工程师 云创集训 开发喵 成都云创动力 教育生态服务商

评论

this is is footer