【Bootstrap】自动适应PC、平板、手机的Bootstrap栅格系统

格系统英文为“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文件夹下面。

之后代码如下,详情请看注释:

[html] view plain copy

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.         <!--网页编码,要使用的外部文件,自动适应屏幕-->
  5.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.         <link href="css/bootstrap.css" rel="stylesheet" media="screen">
  7.             <meta name="viewport"
  8.                 content="width=device-width,initial-scale=1.0,user-scalable=no">
  9.                 <title>栅格系统</title>
  10.     </head>
  11.     <body>
  12.     <!--使用Bootstrap如果不使用面板的话,要把元素放进一个占满100%屏幕的容器里-->
  13.     <!--class="container"则自动居中-->
  14.         <div class="container-fluid">
  15.             <!--定义一行-->
  16.             <div class="row">
  17.             <!--xs代表手机小屏幕,md代表平板中屏幕,lg代表PC大屏幕-->
  18.             <!--同一对的元素之和必须等于12,否则出现错误,如A的col-xs-2+B的col-xs-10是等于12的-->
  19.             <!--bg-warning是定义浅黄色的背景色-->
  20.                 <div class="col-xs-2 col-md-8 col-lg-4 bg-warning">
  21.                     A
  22.                 </div>
  23.                 <div class="col-xs-10 col-md-4 col-lg-8 bg-primary">
  24.                     B
  25.                 </div>
  26.             </div>
  27.             <div class="row">
  28.             <!--这里的道理与上面的一样,A的col-xs-1+B的col-xs-1+C的col-xs-10是等于12的-->
  29.                 <div class="col-xs-1 col-md-10 col-lg-1 bg-warning">
  30.                     A
  31.                 </div>
  32.                 <div class="col-xs-1 col-md-1 col-lg-10 bg-primary">
  33.                     B
  34.                 </div>
  35.                 <div class="col-xs-10 col-md-1 col-lg-1 bg-success">
  36.                     C
  37.                 </div>
  38.             </div>
  39.         </div>
  40.     </body>
  41. </html>

 转载请注明出处:

转载自http://lxfamn.cn/blog

未经允许不得转载:lxfamn » 【Bootstrap】自动适应PC、平板、手机的Bootstrap栅格系统

赞 (0) 打赏

置顶推荐

评论 0

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏