成都网站建设设计

将想法与焦点和您一起共享

bootstrap删格系统的作用是什么-创新互联

本篇文章为大家展示了bootstrap删格系统的作用是什么,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

创新互联-专业网站定制、快速模板网站建设、高性价比武川网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式武川网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖武川地区。费用合理售后完善,10年实体公司更值得信赖。

(1)第一步:创建栅格系统的容器

      ...  

解释:为了寄予栅格系统合适的排列和padding,要把每一行“row”包含在一个容器中,而这个容器我们用class名为“container”或者“container-fluid”,这两个class是Bootstrap为我们事先设计好的。

.container是固定宽度,居中显示:下面是Bootstrap中.container类的代码

.container-fluid是 100% 宽度:下面是Bootstrap中.container-fluid类的代码

(2)第二步:创建合适的栅格系统

  .col-md-1
  .col-md-1
  .col-md-1
  .col-md-1  .col-md-1  .col-md-1  .col-md-1  .col-md-1  .col-md-1  .col-md-1  .col-md-1  .col-md-1  .col-md-8  .col-md-4  .col-md-4  .col-md-4  .col-md-4  .col-md-6  .col-md-6

解释:上面这段是我从Bootstrap官网复制下来的,每一个“row”代表一行,而内部的“col-md-数字”代表一个单元格;

Bootstrap把每一行分成12等份,“col-md-数字”中的“数字”从1-12中取,数字等于几,就占几份;

合理的选择单元格的数字配置,再往单元格中添加我们想要的内容,这样一个栅格系统就完成了!

相关推荐:《bootstrap入门教程》

(3)进阶:单元格的类还有其他选择 ,一共有四种:

.c0l-xs-  无论屏幕宽度如何,单元格都在一行,宽度按照百分比设置;试用于手机;

.col-sm-  屏幕大于768px时,单元格在一行显示;屏幕小于768px时,独占一行;试用于平板;

.col-md-  屏幕大于992px时,单元格在一行显示;屏幕小于992px时,独占一行;试用于桌面显示器;

.col-lg-  屏幕大于1200px时,单元格在一行显示;屏幕小于1200px时,独占一行;适用于大型桌面显示器;

以上的情况可以通过下面的代码清晰的理解:   

      .col-xs-12 .col-sm-6 .col-md-8    .col-xs-6 .col-md-4        .col-xs-6 .col-sm-4    .col-xs-6 .col-sm-4    .col-xs-6 .col-sm-4  

上述内容就是bootstrap删格系统的作用是什么,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注创新互联行业资讯频道。


标题名称:bootstrap删格系统的作用是什么-创新互联
当前路径:http://chengdu.cdxwcx.cn/article/coegie.html