BootStrap入门教程(三)之响应式原理


Posted in Javascript onSeptember 19, 2016

相关阅读:

BootStrap入门教程(一)之可视化布局

BootStrap入门教程(二)之固定的内置样式

Bootstrap网格系统(Grid System)

响应式网格系统随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。

BootStrap入门教程(三)之响应式原理

工作原理

· 行必须放置在 .container class 内,以便获得适当的对齐(alignment)和内边距(padding)。

· 使用行来创建列的水平组。

· 内容应该放置在列内,且唯有列可以是行的直接子元素。

· 预定义的网格类,比如 .row 和 .col-xs-4,可用于快速创建网格布局。LESS 混合类可用于更多语义布局。

· 列通过内边距(padding)来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距(margin)取负,表示第一列和最后一列的行偏移。

· 网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如,要创建三个相等的列,则使用三个 .col-xs-4。

媒体查询

/* 超小设备(手机,小于 768px) */
/* Bootstrap 中默认情况下没有媒体查询 */
/* 小型设备(平板电脑,768px 起) */
@media (min-width: @screen-sm-min) { ... }
/* 中型设备(台式电脑,992px 起) */ 
@media (min-width: @screen-md-min) { ... }
/* 大型设备(大台式电脑,1200px 起) */
@media (min-width: @screen-lg-min) { ... }

BootStrap入门教程(三)之响应式原理

网格的基本结构

<div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div> 
</div>
<div class="row">...</div>
</div>
<div class="container">....

示例一:水平堆叠

代码如下:

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 堆叠的水平</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Hello, world!</h1>
<div class="row">
<div class="col-md-6" style=" box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo.
</p>
</div>
<div class="col-md-6" style="box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium.
</p>
<p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
consectetur, adipisci velit, sed quia non numquam eius modi
tempora incidunt ut labore et dolore magnam aliquam quaerat
voluptatem.
</p>
</div>
</div>
</body>
</html>

效果:

BootStrap入门教程(三)之响应式原理

确保单元的总数为12以保障显示效果比较和谐。超过12就串行了。如果单个行的单元数超过12呢:

BootStrap入门教程(三)之响应式原理

如上图所示,单个行的单元数超过12会失去内边距。

示例二:中型和大型设备

睡得晚起得早还多梦,也是没治了。

中型设备是50%/50%,大型设备是33%/66%,那么可以这样写:

<div class="col-md-6 col-lg-4">....</div>
<div class="col-md-6 col-lg-8">....</div>

源码如下:

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 中型和大型设备</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Hello, world!</h1>
<div class="row">
<div class="col-md-6 col-lg-4" style="
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo.
</p>
</div>
<div class="col-md-6 col-lg-8" style="
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium.
</p>
<p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
consectetur, adipisci velit, sed quia non numquam eius modi
tempora incidunt ut labore et dolore magnam aliquam quaerat
voluptatem.
</p>
</div>
</div>
</body>
</html>

若如此,中型设备的显示是50%/50%:

BootStrap入门教程(三)之响应式原理

大型设备的显示是33%/66%:

BootStrap入门教程(三)之响应式原理

同理移动设备也可进行类似设置:

<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>

源码及效果略。

响应式的列重置

小设备时无法确定网格显示的位置。

解决方法是添加一个响应式的块(描述未必准确),使用.clearfix class和响应式实用工具:

<div class="container">
<div class="row" >
<div class="col-xs-6 col-sm-3"
style="
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="col-xs-6 col-sm-3"
style="box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut.
</p>
</div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3"
style="
box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div class="col-xs-6 col-sm-3"
style="box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim
</p>
</div>
</div>
</div>

解释一下中间这句:

<div class="clearfix visible-xs"></div>

响应式实用工具目前适用于块和表切换。看下面两个表格就知道了。

BootStrap入门教程(三)之响应式原理

网格的基本结构

<div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div> 
</div>
<div class="row">...</div>
</div>
<div class="container">....

实例三:响应式实用工具

源码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Bootstrap 实例 - 响应式实用工具</title>
  <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> 
  <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="padding: 40px;">
  <div class="row visible-on">
    <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
                       box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
      <span class="hidden-xs">特别小型</span>
      <span class="visible-xs">✔ 在特别小型设备上可见</span>
    </div>
    <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
                       box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
      <span class="hidden-sm">小型</span>
      <span class="visible-sm">✔ 在小型设备上可见</span>
    </div>
    <div class="clearfix visible-xs"></div>
    <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
                       box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
      <span class="hidden-md">中型</span>
      <span class="visible-md">✔ 在中型设备上可见</span>
    </div>
    <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
                       box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
      <span class="hidden-lg">大型</span>
      <span class="visible-lg">✔ 在大型设备上可见</span>
    </div>
  </div>
</div>
</body>
</html>

效果如下:

BootStrap入门教程(三)之响应式原理

大型设备时:

其他设备略。

偏移列

.col-xs=*类不支持偏移,可以通过使用一个空的单元格来实现该效果。

使用.col-md-offset-*类可以把一个列的左外边距增加*列,其中*的范围是从1到11。

<div class="container">
  <h1>Hello, world!</h1>
  <div class="row" >
    <div class="col-xs-6 col-md-offset-3"
    style="box-shadow:
    inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing
      elit.
      </p>
    </div>
  </div>
</div>

效果:

BootStrap入门教程(三)之响应式原理

嵌套列

嵌套需要添加一个新的.row,然后在这个嵌套的.row里添加一组.col-md-*列。这组列的个数不能超过12。

<div class="container">
  <h1>Hello, world!</h1>
  <div class="row">
    <div class="col-md-3" style="box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
      <h4>第一列</h4>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </p>
    </div>
    <div class="col-md-9" style="box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
      <h4>第二列 - 分为四个盒子</h4>
      <div class="row">
        <div class="col-md-6" style=" box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
          <p>
            Consectetur art party Tonx culpa semiotics. Pinterest
    assumenda minim organic quis.
          </p>
        </div>
        <div class="col-md-6" style=" box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
          <p>
             sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
    ullamco laboris nisi ut aliquip ex ea commodo consequat.
          </p>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6" style=" box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
          <p>
            quis nostrud exercitation ullamco laboris nisi ut
    aliquip ex ea commodo consequat.
          </p>
        </div>
        <div class="col-md-6" style=" box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim.
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

效果:

BootStrap入门教程(三)之响应式原理

列排序

有一点像定位。.col-md-push-*相当于left;.col-md-pull-*类似于right。其中*的范围是从1到11。标签在后面的层级高一些。

<div class="container">
  <h1>Hello, world!</h1>
  <div class="row">
   <p>排序前</p>
   <div class="col-md-4" style="
     box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
     我在左边
   </div>
   <div class="col-md-8" style="
     box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
     我在右边
   </div>
  </div><br>
  <div class="row">
   <p>排序后</p>
   <div class="col-md-4 col-md-push-1"
     style="
     box-shadow: inset 1px -1px 1px #444,
     inset -1px 1px 1px #444;">
     我在左边
   </div>
   <div class="col-md-8 col-md-pull-2"
     style="
     box-shadow: inset 1px -1px 1px #444,
     inset -1px 1px 1px #444;">
     我在右边
   </div>
  </div>
</div>

效果:

BootStrap入门教程(三)之响应式原理

 

参考:http://www.runoob.com/bootstrap/bootstrap-grid-system.html

以上所述是小编给大家介绍的BootStrap入门教程(三)之响应式原理,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS 判断代码全收集
Apr 28 Javascript
JavaScript的9种继承实现方式归纳
May 18 Javascript
jQuery实现选项卡切换效果简单演示
Dec 09 Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
Jul 18 Javascript
javascript表达式和运算符详解
Feb 07 Javascript
vue watch自动检测数据变化实时渲染的方法
Jan 16 Javascript
详解vue2.0模拟后台json数据
May 16 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
May 21 Javascript
微信小程序实现文件、图片上传功能
Aug 18 Javascript
jQuery中DOM常见操作实例小结
Aug 01 jQuery
js实现坦克移动小游戏
Oct 28 Javascript
JavaScript canvas绘制渐变颜色的矩形
Feb 18 Javascript
HTML5 实现的一个俄罗斯方块实例代码
Sep 19 #Javascript
javascript this详细介绍
Sep 19 #Javascript
JS遍历ul下的li点击弹出li的索引的实现方法
Sep 19 #Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
Sep 19 #Javascript
javascript 判断页面访问方式电脑或者移动端
Sep 19 #Javascript
详解Node.Js如何处理post数据
Sep 19 #Javascript
React Native实现简单的登录功能(推荐)
Sep 19 #Javascript
You might like
php中json_decode()和json_encode()的使用方法
2012/06/04 PHP
通过curl模拟post和get方式提交的表单类
2014/04/23 PHP
解决php的“It is not safe to rely on the system’s timezone settings”问题
2015/10/08 PHP
PHP new static 和 new self详解
2017/02/19 PHP
PHPstorm快捷键(分享)
2017/07/17 PHP
Javascript页面添加到收藏夹的简单方法
2013/08/07 Javascript
引用 js在IE与FF之间的区别详细解析
2013/11/20 Javascript
javascript学习笔记(二)数组和对象部分
2014/09/30 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
2015/03/09 Javascript
JS设置cookie、读取cookie、删除cookie
2015/04/17 Javascript
jQuery获取页面及个元素高度、宽度的总结——超实用
2015/07/28 Javascript
jQuery解析返回的xml和json方法详解
2017/01/05 Javascript
node文件批量重命名的方法示例
2017/10/23 Javascript
Vue2仿淘宝实现省市区三级联动
2020/04/15 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
2018/01/15 Javascript
修改npm全局安装模式的路径方法
2018/05/15 Javascript
微信小程序实现自定义加载图标功能
2018/07/19 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
2018/11/26 Javascript
vue 动态创建组件的两种方法
2020/12/31 Vue.js
python的常见命令注入威胁
2013/02/18 Python
python3操作mysql数据库的方法
2017/06/23 Python
django实现同一个ip十分钟内只能注册一次的实例
2017/11/03 Python
使用Python+Splinter自动刷新抢12306火车票
2018/01/03 Python
pyqt 实现为长内容添加滑轮 scrollArea
2019/06/19 Python
django使用F方法更新一个对象多个对象字段的实现
2020/03/28 Python
python tkiner实现 一个小小的图片翻页功能的示例代码
2020/06/24 Python
opencv 图像加法与图像融合的实现代码
2020/07/08 Python
Bailey帽子官方商店:Bailey Hats
2018/09/25 全球购物
Douglas意大利官网:购买香水和化妆品
2020/05/27 全球购物
JAVA高级程序员面试题
2013/09/06 面试题
前台接待的工作职责
2013/11/21 职场文书
政法大学毕业生自荐信范文
2014/01/01 职场文书
党建目标管理责任书
2014/07/25 职场文书
2014年档案管理工作总结
2014/11/17 职场文书
护理专业自荐信范文
2015/03/06 职场文书
唐山大地震的观后感
2015/06/05 职场文书