bootstrap的栅格系统和响应式工具
2018-06-24 02:20:45来源：未知 阅读 ()
关于bootstrap的响应式布局，昨天看了杨老师的视频教学https://www.bilibili.com/video/av18357039豁然开朗，在这里记录一下
一：meta标签的引用
<meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1">
其实自己一直没有注意到，关于这个meta标签的引入，如果不引入这些标签，就无法实现响应式布局。
二：响应式按钮
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav_content" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
</button>
这个响应式按钮默认是不显示的，只有屏幕宽度<768(属于xs列)时，就会显示，比如在电脑上浏览是看不到的，在手机上就可以看到，这也是我之前一直想了解的东西
关于这个按钮，首先要引入的几个参数：
class="navbar-toggle collapsed" data-toggle="collapse"：按钮实现toggle形式的下拉和回滚
data-target="#nav_content"：这个data-target里面的值是你想要展开的内容的div的ID
下面展示完整的例子（基于django模板）：
<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container-fluid"> {#导航标题#} <div class="navbar-header"> {# 移动端按钮 #} <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav_content" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> {# 标题内容 #} <a class="navbar-brand">SuperPigeons</a> </div> {#导航内容#} <div class="navbar-collapse collapse" id="nav_content"> <ul class="nav navbar-nav"> <li class="{% block nav_index %}{% endblock %}"><a href="{% url 'index' %}">首页</a></li> <li><a href="">博客</a></li> <li><a href="">其他</a></li> </ul> <ul class="nav navbar-nav navbar-right" style="margin-right: 10px"> {% if user.is_authenticated %} <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{ user }}<span class="caret"></span></a> <ul class="dropdown-menu" style="min-width:100%;"> <li><a href="" style="text-align: center">用户信息</a></li> {# <li role="separator" class="divider"></li>#} <li><a href="" style="text-align: center">退出</a></li> {# <li role="separator" class="divider"></li>#} <li><a href="" style="text-align: center">暂无</a></li> </ul> </li> {% else %} <li><a href="{% url 'login' %}">登陆</a></li> {% endif %} </ul> <form class="navbar-form navbar-right"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">搜索</button> </form> </div> </div> </nav>
三：栅格系统
其实这部分，我之前自学了好久，官方文档一直也没看的太明白，看了视频教学后把学到的东西记录一下
先引用官方文档的一个简介：
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：
- “行（row）”必须包含在
.container（固定宽度）或.container-fluid（100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。 - 通过“行（row）”在水平方向创建一组“列（column）”。
- 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
- 类似
.row和.col-xs-4这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。 - 通过为“列（column）”设置
padding属性，从而创建列与列之间的间隔（gutter）。通过为.row元素设置负值margin从而抵消掉为.container元素设置的padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。 - 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
- 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个
.col-xs-4来创建。 - 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
- 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何
.col-md-*栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何.col-lg-*不存在， 也影响大屏幕设备。
通过研究后面的实例，可以将这些原理应用到你的代码中。
| 超小屏幕 手机 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面显示器 (≥992px) | 大屏幕 大桌面显示器 (≥1200px) | |
|---|---|---|---|---|
| 栅格系统行为 | 总是水平排列 | 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C | ||
.container 最大宽度 |
None （自动） | 750px | 970px | 1170px |
| 类前缀 | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| 列（column）数 | 12 | |||
| 最大列（column）宽 | 自动 | ~62px | ~81px | ~97px |
| 槽（gutter）宽 | 30px （每列左右均有 15px） | |||
| 可嵌套 | 是 | |||
| 偏移（Offsets） | 是 | |||
| 列排序 | 是 | |||
说一下我自己对栅格系统的理解，拿我自己刚刚写好的登录页面举例：
<div class="container"> <div class="row"> <div class="col-sm-4 col-md-offset-6"> <div class="panel panel-default"> <div class="panel-heading"><h4>用户登录</h4></div> <div class="panel panel-body"> <form method="post" action="{% url 'login' %}" class="form-signin"> {% csrf_token %} {% for i in loginform %} {{ i }}{{ i.errors }} {% endfor %} <button class="btn btn-lg btn-primary btn-block">登录</button> {% if message %} <p id="message">{{message}}</p> {% endif %} </form> </div> </div> </div> </div> </div>
首先定义一个容器class="container"代表定义了一个响应式的内容框，然后是class="row"代表一行，容器里的直接子元素就是行row，可以在row里定义列column
1.列元素
列元素可以定义多个col-**-**,代表在不同的设备上 此列占多少个格子，小设备优先，比如你写col-xs-4 代表在超小屏幕上占4格，如果不写其他的col ，在所有设备上 ，都是占4格
2.列偏移
列默认左浮动，如果需要向右偏移写col-md-offset-6即可，代表在md中等设备970px上向右偏移6格，在大于md的都会偏移，在小于md的设备上就不会偏移
大屏幕lg上有偏移
小屏幕sm <970px 不会偏移
手机屏幕，居中了
四：响应式工具
这个响应式工具也是看了杨老师的视频后，才知道类似于这种功能是怎么实现的，就比如在电脑上可以看到一列数据，但是在手机端，宽度比较小的设备上就自动把这一列数据屏蔽掉了，为了美观和使用方便，我们可以通过使用bootstrap的响应式工具来实现
摘自官方文档
这个图其实表述的已经很清楚了，无论是可见visible还是隐藏hidden，都是只针对你设置的某一个设备类型生效，除此之外的，无论大于或者小于这个尺寸的，都不会生效，请注意这一点
这就是我暂时理解的栅格系统的一部分，后面还会记录更多的内容
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
- 3.栅格系统 2020-05-28
- Bootstrap 滚动监听+小工具+Flex（弹性）布局+多媒体对象 2020-04-20
- Bootstrap4 轮播+模态框+提示框+弹出框 2020-04-16
- Bootstrap4 面包屑导航+表单+输入框组+自定义表单 2020-04-16
- Bootstrap4 卡片+下拉菜单+折叠+导航+导航栏 2020-04-16
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
