发表于: 2018-05-20 22:45:30

1 605


今天完成的事情

今天开始学习bootstrap,bootstrap是一种常用的前端框架。

1. 学习了bootstrap的栅格系统,一般来说,栅格系统一般由.container属性的<div>所包裹,.row必须由container包裹。

2. 所写的内容应该由.col包裹,.col是.row的直接子元素。

3. row最多可以被分成12列,使用col-md-*来表示占用的列数,以此来控制列宽,其中*为1~12的数字,除了md还有xs sm lg三个参数,这些参数可以控制栅格系统的堆叠行为

4. col可以嵌套。

明天计划的事情:

继续学习bootstrap其中排版的内容,了解bootstrap中的常用元素,还有尤其是对齐方式的问题。                    
遇到的问题:

在初次使用bootstrap栅格系统时候,对栅格内的内容的对齐方式难以把握

经过查询资料,了解到水平居中可以在.col中设置class="text-center"

垂直居中稍微复杂一点:

需要在样式表中写

.vertial-center{

  position:relative;

  top:50%;

  transform:translateY(-50%);

}                           

注意,在水平居中class添加在.col类的<div>中。

垂直居中是添加在需要垂直居中的元素中。

收获:

初步了解了bootstrap的栅格系统以及居中的问题。并且开始尝试使用bootstrap重写任务6(未完成)。

          


返回列表 返回列表
评论

    分享到