脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → bootstrap 栅格系统

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

 更新时间：2016年05月27日 17:24:06   投稿：mrr  
这篇文章主要介绍了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文件夹下面。

之后代码如下，详情请看注释：

<!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>

您可能感兴趣的文章:

相关文章

  • JavaScript该如何学习 怎样轻松学习JavaScript

    JavaScript该如何学习 怎样轻松学习JavaScript

    JavaScript该如何学习？如何轻松学习JavaScript？这篇文章主要介绍了轻松学习JavaScript的方法
    2017-06-06
  • 利用BootStrap的Carousel.js实现轮播图动画效果

    利用BootStrap的Carousel.js实现轮播图动画效果

    这篇文章主要介绍了利用BootStrap的Carousel.js实现轮播图动画效果的相关资料,需要的朋友可以参考下
    2016-12-12
  • JS去除数组重复值的五种不同方法

    JS去除数组重复值的五种不同方法

    去除数组重复值的方法有很多，本文整理了四种不同方式，在此与大家分享下，希望对大家有所帮助
    2013-09-09
  • JS代码实现table数据分页效果

    JS代码实现table数据分页效果

    这篇文章主要介绍了JS代码实现table数据分页效果的相关资料,非常不错，代码简答易懂，非常实用，需要的朋友可以参考下
    2016-05-05
  • 原生JS实现图片轮播 JS实现小广告插件

    原生JS实现图片轮播 JS实现小广告插件

    这篇文章主要为大家详细介绍了原生JS实现图片轮播、小广告插件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 手把手教你uniapp和小程序分包(图文)

    手把手教你uniapp和小程序分包(图文)

    本文主要介绍了手把手教你uniapp和小程序分包，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09
  • JS项目中对本地存储进行二次的封装的实现

    JS项目中对本地存储进行二次的封装的实现

    这篇文章主要介绍了JS项目中对本地存储进行二次的封装,这里我们将要使用到的key存储下来，新建一个叫constant-storage.js的文件，对外暴露一些key的键名，也方便后期统一修改，这里因为都是恒量，所以名称我们都用大写表示，需要的朋友可以参考下
    2022-07-07
  • 一文详解JavaScript中的事件循环(event loop)机制

    一文详解JavaScript中的事件循环(event loop)机制

    JavaScript中的事件循环（Event Loop）是一种重要的机制，用于管理异步代码的执行，它确保 JavaScript 单线程环境中的任务按照正确的顺序执行，同时允许异步操作如定时器、网络请求和事件处理，本将给大家详细的介绍一下JavaScript事件循环机制,感兴趣的朋友可以参考下
    2023-12-12
  • javascript防抖函数debounce详解

    javascript防抖函数debounce详解

    这篇文章主要介绍了javascript防抖函数debounce,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，,需要的朋友可以参考下
    2019-06-06
  • canvas 弹幕效果（实例分享）

    canvas 弹幕效果（实例分享）

    本文主要分享了canvas实现弹幕效果的实例代码。具有一定的参考价值，下面跟着小编一起来看下吧
    2017-01-01

最新评论