【Bootstrap】自己主动去适应PC、平面、手机Bootstrap网格系统
2015-12-10 08:40
579 查看
酒吧格英语作为一门系统“grid systems”,也有人翻译成“网络格系统”。使用固定格子设计布局,其风格整齐而简洁,在二战结束后人气,流风格之中的一个。
1692年,新登基的法国国王路易十四感到法国的印刷水平差强人意。因此命令成立一个管理印刷的皇家特别委员会。
他们的首要任务是设计出科学的、合理的。 重视功能性的新字体。委员会由数学家尼古拉斯加宗(Nicolas Jaugeon)担任领导。他们以罗马体为基础,採用方格为设计根据,每一个字体方格分为64个基本方格单位,每一个方格单位再分成36个小格,这样,一个印刷版面就有2304个小格组成,在这个严谨的几何网格网络中设计字体的形状,版面的编排,试验传达功能的效能。这是世界上最早对字体和版面进行科学实验的活动,也是栅格系统最早的雏形。
我给网页栅格系统下的定义为:以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。网页栅格系统是从平面栅格系统中发展而来。
对于网页设计来说。栅格系统的使用。不仅能够让网页的信息呈现更加美观易读,更具可用性。并且。对于前端开发来说。网页将更加的灵活与规范。
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的添加。系统会自己主动分为最多12列。它包括了易于使用的提前定义类。还有强大的mixin 用于生成更具语义的布局。
也就是说Bootstrap把一个元素的宽度划分成12份。我们则在这个被划分成12份的行安排元素。
一、基本目标
制作例如以下的两行。这两行由于设备的不同里面各个单元格的宽度会改变:
在手机小屏幕上,上行A占2份B占10份。AB分享了这12份,下行A占1份B占1份C占10份,ABC分享了这12份。
在平板的中等屏幕上,上行A占8份B占4份,AB分享了这12份,下行A占10份B占1份C占1份,ABC分享了这12份。
在PC的大屏幕上,上行A占4份B占8份,AB分享了这12份。下行A占1份B占10份C占1份。ABC分享了这12份。
二、制作过程
先在网页目录中配置好Bootstrap,在官网(点击打开链接)下载组件就可以,用于生产环境的Bootstrap版本号(点击打开链接)。Bootstrap3对2并不兼容。建议直接依据其开发文档使用Bootstrap3。
将Bootstrap解压之后把得到的3个目录css,fonts,js复制到网站目录以下。
假设是Eclipse的JSP
Web Project的话就把它们放到WebRoot目录以下。
之后代码例如以下。详情请看凝视:
1692年,新登基的法国国王路易十四感到法国的印刷水平差强人意。因此命令成立一个管理印刷的皇家特别委员会。
他们的首要任务是设计出科学的、合理的。 重视功能性的新字体。委员会由数学家尼古拉斯加宗(Nicolas Jaugeon)担任领导。他们以罗马体为基础,採用方格为设计根据,每一个字体方格分为64个基本方格单位,每一个方格单位再分成36个小格,这样,一个印刷版面就有2304个小格组成,在这个严谨的几何网格网络中设计字体的形状,版面的编排,试验传达功能的效能。这是世界上最早对字体和版面进行科学实验的活动,也是栅格系统最早的雏形。
我给网页栅格系统下的定义为:以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。网页栅格系统是从平面栅格系统中发展而来。
对于网页设计来说。栅格系统的使用。不仅能够让网页的信息呈现更加美观易读,更具可用性。并且。对于前端开发来说。网页将更加的灵活与规范。
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的添加。系统会自己主动分为最多12列。它包括了易于使用的提前定义类。还有强大的mixin 用于生成更具语义的布局。
也就是说Bootstrap把一个元素的宽度划分成12份。我们则在这个被划分成12份的行安排元素。
一、基本目标
制作例如以下的两行。这两行由于设备的不同里面各个单元格的宽度会改变:
在手机小屏幕上,上行A占2份B占10份。AB分享了这12份,下行A占1份B占1份C占10份,ABC分享了这12份。
在平板的中等屏幕上,上行A占8份B占4份,AB分享了这12份,下行A占10份B占1份C占1份,ABC分享了这12份。
在PC的大屏幕上,上行A占4份B占8份,AB分享了这12份。下行A占1份B占10份C占1份。ABC分享了这12份。
二、制作过程
先在网页目录中配置好Bootstrap,在官网(点击打开链接)下载组件就可以,用于生产环境的Bootstrap版本号(点击打开链接)。Bootstrap3对2并不兼容。建议直接依据其开发文档使用Bootstrap3。
将Bootstrap解压之后把得到的3个目录css,fonts,js复制到网站目录以下。
假设是Eclipse的JSP
Web Project的话就把它们放到WebRoot目录以下。
之后代码例如以下。详情请看凝视:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!--网页编码,要使用的外部文件。自己主动适应屏幕--> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="css/bootstrap.css" rel="stylesheet" media="screen"> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> <title>栅格系统</title> </head> <body> <!--使用Bootstrap假设不使用面板的话,要把元素放进一个占满100%屏幕的容器里--> <!--class="container"则自己主动居中--> <div class="container-fluid"> <!--定义一行--> <div class="row"> <!--xs代表手机小屏幕,md代表平板中屏幕,lg代表PC大屏幕--> <!--同一对的元素之和必须等于12,否则出现错误,如A的col-xs-2+B的col-xs-10是等于12的--> <!--bg-warning是定义浅黄色的背景色--> <div class="col-xs-2 col-md-8 col-lg-4 bg-warning"> A </div> <div class="col-xs-10 col-md-4 col-lg-8 bg-primary"> B </div> </div> <div class="row"> <!--这里的道理与上面的一样。A的col-xs-1+B的col-xs-1+C的col-xs-10是等于12的--> <div class="col-xs-1 col-md-10 col-lg-1 bg-warning"> A </div> <div class="col-xs-1 col-md-1 col-lg-10 bg-primary"> B </div> <div class="col-xs-10 col-md-1 col-lg-1 bg-success"> C </div> </div> </div> </body> </html>
相关文章推荐
- bootstrap v3.3.6 版本.table-striped不起作用的问题
- spring mvc +bootstrap+datatable实现分页
- EF+MVC+Bootstrap 项目实践 Day1
- 【转】Bootstrap 栅格系统
- JS组件系列——表格组件神器:bootstrap table
- Bootstrap Modal 如何清除已定义的事件
- bootstrap-tab切换
- Bootstrap中的段落和强调内容
- bootstrap 轮播
- 完美实现bootstrap分页查询
- bootstrap+css进行页面布局
- 完美实现bootstrap分页查询
- 跨平台前端框架学习——bootstrap,jquery,angular
- bootstrap的图标无法正常显示解决方法
- Blending, Bootstrap
- bootstrap-table插件数据加载方式
- Bootstrap提供了六种列表效果
- bootstrap 点击图片弹出大图
- JS表格组件神器bootstrap table详解(基础版)
- JS组件Bootstrap Table表格多行拖拽效果实现代码