首页 > 其他 > 详细

Bootstrap

时间:2018-06-07 20:40:02      阅读:194      评论:0      收藏:0      [点我收藏+]

注意事项: 使用Bootstrap的时候不要让自己的名字与Bootstrap的类名冲突。

 

1、viewport

手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中,通常这个虚拟的"窗口"(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。

设置viewport
一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

 

2、Bootstrap的栅格系统

栅格系统即运用固定的格子设计版面布局

 

1)、container

container容器是窗口布局的最基本元素,所有样式都定义在.container或.container-fulid容器之中-- 这是启用整个栅格系统必不可少的前置条件。

.container实现固定的宽度并居中呈现,.container-fluid实现全宽度,并和其它网格实现对齐

 

2)、row、column

栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,页面内容就可以放入这些创建好的布局中

行(.row)是列(.col-*)的横向组合和父容器

网页呈现的内容必须放置在列(.col-*)中,而且只有列可以是行的直接子元素,否则都是不可以在.col-*以上添加呈现内容

 

3)、栅格选项

Bootstrap使用ems或rems来定义大多数属性的规格大小、px用于全局层面网格断点和容器宽度(因为浏览器和设备的宽度是以像素px为单位,且不会随字体大小而变化)

总共有五个栅格等级,每个响应式分界点隔出一个等级:特小.col(<576px)、小.col-sm-*(≥576px)、中.col-md-*(≥768px)、大.col-lg-*(≥992px)、特大.col-xl-*(≥1200px)

如果只定义一个屏幕规格即可向上覆盖所有设备,向下如果没有定义则默认为12栅格占位

 

Bootstrap

原文:https://www.cnblogs.com/Python1/p/9152599.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!