发表于: 2019-04-11 21:26:18

1 638


今天完成的事情:

1.为css任务8首页页面添加轮播图

   html

   

   效果

2.继续学习使用bootstrap栅格系统

明天计划的事情:

1.继续css任务8

2.继续学习bootstrap

遇到的问题:

暂无

收获:

1.bootstrap文字排版

.font-weight-bold加粗文本

.font-weight-normal普通文本

.font-weight-light更细的文本

.font-italic斜体文本

.lead让段落更突出

.small指定更小文本 (为父元素的 85% )

.text-left左对齐

.text-center居中

.text-right右对齐

.text-justify设定文本对齐,段落中超出屏幕部分文字自动换行

.text-nowrap段落中超出屏幕部分不换行

.text-lowercase设定文本小写

.text-uppercase设定文本大写

.text-capitalize设定单词首字母大写

.initialism显示在 <abbr> 元素中的文本以小号字体展示,且可以将小写字母转换为大写字母

.list-unstyled移除默认的列表样式,列表项中左对齐 ( <ul> 和 <ol> 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项,你需要在嵌套的列表中使用该样式)

.list-inline将所有列表项放置同一行

.pre-scrollable使 <pre> 元素可滚动,代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条

2.Bootstrap栅格实现5等分

   .col-xs-1-5,.col-sm-1-5,.col-md-1-5,.col-lg-1-5 {

                                                                             min-height: 1px;

                                                                             padding-left: 15px;

                                                                             padding-right: 15px;

                                                                             position: relative;

                                                                            }

   .col-xs-1-5 {

                       width: 20%;

                       float: left;

                     }

    @media (min-width: 768px) {

                                                  .col-sm-1-5 {

                                                                       width: 20%;

                                                                       float: left;

                                                                     }

                                                                     }

    @media (min-width: 992px) {

                                                   .col-md-1-5 {

                                                                        width: 20%;

                                                                        float: left;

                                                                       }

                                                  }

      @media (min-width: 1200px) {

                                                       .col-lg-1-5 {

                                                                          width: 20%;

                                                                          float: left;

                                                                         }

                                                      }







返回列表 返回列表
评论

    分享到