bootstrap的栅格系统和响应式工具

关于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 (自动)750px970px1170px
类前缀
.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,都是只针对你设置的某一个设备类型生效,除此之外的,无论大于或者小于这个尺寸的,都不会生效,请注意这一点

 

这就是我暂时理解的栅格系统的一部分,后面还会记录更多的内容

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/369900.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

小熊错误_新手爸妈第一年带娃时,很容易犯的7个错误,对照看看你中了没

文 /关注小熊育儿&#xff0c;帮您轻松育儿带娃不是一件容易的事&#xff0c;对爸妈的时间和体力都是一种考验&#xff0c;不仅“熊孩子”让人头疼&#xff0c;育儿知识差&#xff0c;不懂科学育儿理念的“熊爸妈”也是让人很无奈的&#xff0c;最终受伤的还是孩子&#xff0c;…

python--装饰器、生成器、迭代器、元类

一、装饰器 def w1(func):def inner():func()return innerw1 def f1():print(1111111) 1.只要python解释器执行到装饰器&#xff0c;就会自动进行装饰&#xff0c;而不是等到调用的时候才进行装饰。 2.有参数的函数&#xff0c;装饰器定义方法 def w1(func):def inner(*args, *…

scss的使用方式(环境搭建)

我用的是Koala。 IDE是intellij_idea&#xff08;其他IDE也可&#xff09; 下载Koala&#xff1a;http://koala-app.com/ 2.安装&#xff08;选好位置&#xff0c;下一步即可&#xff09; 3.打开Koala&#xff0c;创建项目 》创建css文件夹》创建XXX.scss文件&#xff0c;拖到…

小程序 按需_小程序想要留住用户需哪些举措?

**当下许多企业在进行长沙小程序开发后&#xff0c;都会费劲心思在推广引流上&#xff0c;很多企业也确实起到了不错的效果&#xff0c;用户们也是纷纷来到企业的小程序中。只不过有的小程序却无法将用户留下来&#xff0c;导致用户流失&#xff0c;令推广付之东流。下面长沙小…

渍渍渍~来一发豆瓣自动登录玩玩~

今天来一个比较屌的自动化登陆工具&#xff0c;selenium模块&#xff0c;这个模块&#xff0c;比较装逼啦~具体自行百度吧&#xff01;这篇博客实现了什么功能呢~可以自动使用用户名和密码登录&#xff0c;当然&#xff0c;豆瓣对登录次数还有ip地址做了一些策略&#xff0c;例…

Redis数据库入门学习(下载与安装、常用命令、在Java中操作Redis)

简介 下载与安装 数据类型 常用命令 1.字符串操作命令 2.哈希操作命令 3.列表操作命令 push是将元素总是插入到第一个 0表示第一个&#xff0c;1表示第二个。-1表示倒数第一个&#xff0c;-2表示倒数第二个。当前命令的意思是第一个到倒数第一个&#xff0c;即就是全部元素 rpo…

.NET使用Office Open XML导出大量数据到 Excel

我相信很多人在做项目的都碰到过Excel数据导出的需求&#xff0c;我从最开始使用最原始的HTML拼接&#xff08;将需要导出的数据拼接成TABLE标签&#xff09;到后来happy的使用开源的NPOI, EPPlus等开源组件导出EXCEL&#xff0c;但不久前&#xff0c;我在一个项目碰到一个需求…

CSS自定义消息提示

1.效果 2.源码 <% page contentType"text/html;charsetUTF-8" language"java" %> <html> <head><style type"text/css">#confirm{position: absolute;z-index: 1;display: inline-block;border: 1px solid black;backgr…

file 选择的文件胖多有多大_如何删除 macOS 压缩包中的隐藏文件?

如何删除 macOS 压缩包中的隐藏文件&#xff1f;在工作中&#xff0c;压缩打包文件是不可缺少的一项工作。为了避免文件的损坏和缺失&#xff0c;我们通常在macOS系统中&#xff0c;把多个文件或文件夹压缩后进行传输&#xff0c;我们一般使用访达&#xff08;Finder&#xff0…

CSS画各种二维图形

1.效果 2.源码 <% page contentType"text/html;charsetUTF-8" language"java" %> <html> <head><style type"text/css">#triangle_top{display: inline-block;width:0;height:0;border-left:50px solid transparent;bor…

数据库的开启与关闭

今天&#xff0c;为了一些原因&#xff0c;要重启数据库&#xff0c;但因为当时安装的时候&#xff0c;同学随便装了&#xff0c;导致很多文件都找不到&#xff0c;想使用绝对路径重启数据的计划卡死在了路上。以下&#xff0c;我写下我的数据库开启、关闭的方法&#xff0c;方…

leetcode怎么用时间刷_刷完700多题后的首次总结:LeetCode应该怎么刷?

推荐观看&#xff1a;java技术进阶&#xff1a;膜拜&#xff01;字节大神总结的666页大师级算法宝典&#xff0c;分分钟团灭LeetCode​zhuanlan.zhihu.com2020最新马士兵老师联手左程云老师丨数据结构与算法丨面试BATJ必备​www.bilibili.com我是大二的时候开始接触LeetCode的&…

IntelliJ IDEA:使用Google Guava生成equals,hashCode和toString

问题 在Java领域&#xff0c;我们经常需要编写equals &#xff0c; hashCode和toString方法。 老实说&#xff0c;这通常只是一个样板义务。 得益于智能IDE&#xff0c;我们通常不再自己这样做。 我们只是让和IDE一起努力。 不过有一个问题。 生成的代码通常非常丑陋。 让我们…

Appscan_web安全测试工具 (含修改启动浏览器的方法)

安全测试应该是测试中非常重要的一部分&#xff0c;但他常常最容易被忽视掉。 尽管国内经常出现各种安全事件&#xff0c;但没有真正的引起人们的注意。不管是开发还是测试都不太关注产品的安全。当然&#xff0c;这也不能怪我们苦B的“民工兄弟”。因为公司的所给我们的时间与…

传说之下地图素材_【开阔眼界】地图上的史记——名著轻松读

购买链接&#xff1a;https://j.youzan.com/Zns-38我读了无数次《史记》&#xff0c;每次都是读了开头没几页就放弃&#xff0c;文言文看不懂&#xff0c;翻译的白话文内容又太枯燥&#xff0c;现在居然有图画版的史记&#xff0c;还附有说明&#xff0c;真是太好了&#xff0c…

go int 转切片_「快学 Go 语言」第 4 课——低调的数组

数组就是一篇连续的内存&#xff0c;几乎所有的计算机语言都有数组&#xff0c;只不过 Go 语言里面的数组其实并不常用&#xff0c;这是因为数组是定长的静态的&#xff0c;一旦定义好长度就无法更改&#xff0c;而且不同长度的数组属于不同的类型&#xff0c;之间不能相互转换…

从XaaS到Java EE – 2012年哪一种该死的云最适合我?

您是否曾经想过要让Java EE在某个地方启动和运行需要什么&#xff1f; 是的 多年。 从托管我自己的主机开始&#xff0c;转到一些托管产品 &#xff0c;最后偶然发现了PaaS运动。 老实说&#xff0c;我并没有太认真。 我只是想把我的东西放到某个地方&#xff0c;而不在乎解决…

正方体最快最简单画_素描新手入门第一幅画可不只是“正方体”

很多素描教程都把正方体作为入门第一幅画学习内容。这种现象也成了约定俗成的规矩但是&#xff0c;学过画画的人大概都知道有很多人画了多年石膏几何形、静物、人头像甚至半身像全身像。到最后落得只会画这些学过的东西。这就说明学习出了问题。绘画练习一定要弄清楚每个物体练…

VS2015配置内核WDK7600环境,32位下.

VS2015配置内核WDK7600环境,32位下. 学习内核驱动的编写,就要会配置环境.不然总是用记事本编写.比较不方便. 环境配置如下. 1.首先下载WDK7600, 课堂资料代码中已经上传.链接&#xff1a;https://pan.baidu.com/s/1o9PjpUU 密码&#xff1a;k5sp 2.VS2015下载. 这个网络上有很多…

我的改进版2048(1)

&#xff08;假设有谁想要这个软件的话&#xff0c;在评论中留一个邮箱吧。&#xff09; 前几天好几次看到有朋友晒出玩2048刷高分的截图。我就想我能不能也做一个2048呢&#xff1f;细致想了想2048游戏的规律&#xff0c;发现事实上逻辑上非常easy&#xff0c;也不用研究什么算…