帝王谷资源网

Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
网络编程 2024/11/1 佚名
3 2
帝王谷资源网 Design By www.wdxyy.com

栅格系统英文为“grid systems”，也有人翻译为“网格系统”，运用固定的格子设计版面布局，其风格工整简洁，在二战后大受欢迎，已成为今日出版物设计的主流风格之一。

1692年，新登基的法国国王路易十四感到法国的印刷水平差强人意，因此命令成立一个管理印刷的皇家特别委员会。他们的首要任务是设计出科学的、合理的， 重视功能性的新字体。委员会由数学家尼古拉斯加宗（Nicolas Jaugeon）担任领导，他们以罗马体为基础，采用方格为设计依据，每个字体方格分为64个基本方格单位，每个方格单位再分成36个小格，这样，一个印刷版面就有2304个小格组成，在这个严谨的几何网格网络中设计字体的形状，版面的编排，试验传达功能的效能，这是世界上最早对字体和版面进行科学实验的活动，也是栅格系统最早的雏形。

我给网页栅格系统下的定义为：以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。网页栅格系统是从平面栅格系统中发展而来。对于网页设计来说，栅格系统的使用，不仅可以让网页的信息呈现更加美观易读，更具可用性。而且，对于前端开发来说，网页将更加的灵活与规范。

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

也就是说Bootstrap把一个元素的宽度划分成12份。我们则在这个被划分成12份的行安排元素。

一、基本目标

制作如下的两行，这两行因为设备的不同里面各个单元格的宽度会改变：

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

在手机小屏幕上，上行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栅格系统
帝王谷资源网 Design By www.wdxyy.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
帝王谷资源网 Design By www.wdxyy.com
www.wdxyy.com 帝王谷资源网
139,976互联网资源
144,792高清电影
21,817无损音乐
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接