实现响应式——Bootstrap的删格系统详解
Bootstrap
今天和大家一起学习如今很流行的前端框架之一,Bootstrap框架。
今天带大家看看Bootstrap框架,其实我呢主要还是用里面的删格系统,单单这个删格系统就比较强大了。其他的css样式我个人用的比较少。但是你要做一些简单的响应式那么Bootstrap框架是一个很不错的选择。
① 用于生产环境的 Bootstrap
编译并压缩后的 CSS、JavaScript 和字体文件,不包含文档和源码文件。
② Bootstrap 源码
Less、JavaScript 和字体文件的源码,并且带有文档,需要Less 编译器和一些设置工作。
③ Sass
这是 Bootstrap 从 Less 到 Sass 的源码移植项目,用于快速地在 Rails、Compass 或 只针对 Sass 的项目中引入。
<meta charset="utf-8">
<!--让浏览器使用最新的IE内核进行渲染页面-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--设置适口宽度等于设备宽度,任何其他内容都*必须*跟随其后-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<!--倒入BootStrap核心css文件-->
<link href="css/bootstrap.css" rel="stylesheet"/>


<p style="color:red;">这是 h1~h6字体样式</p st>
<h1>你好,世界!</h1>
<h2>你好,世界!</h2>
<h3>你好,世界!</h3>
<h4>你好,世界!</h4>
<h5>你好,世界!</h5>
<h6>你好,世界!</h6>
上面是原浏览器的下面是BootStrap主要看mark标签对比还是很明显的。
<h1 class="h1">这是一个加了.h1标题 <small>这是一(small就是我)个副标题</h1>
<h1>这是一个大标题 <small>这是一(small就是我)个副标题</small></h1> <p>这是一个段落这是一个段落<ins>我是额外插入的文本(ins)</ins>一个段落这<u>这是u</u>这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落</p> <p class="lead">这是第二个段落<mark>这是特殊的mark</mark>这是第二个段落这是第二个段落这是第二个段落这是第二个段落<del>我是可怜的被删除文本del,,,</del>这是第二个段落这是第二个段落这是第二个段落这是第二个段落这是第二个段落这是第二个段落<s>我是s样式与del相同</s>这是第二个段落这是第二个段落这是第二个段落这是第二个段落</p> <p>这是第三个段落<strong>我就是strong 也可以叫我font-weight</strong>这是第三个段落这是第三个段落这是第三个段落这是第三个段落<em>、、我是一个不倒翁(em)、、</em>这是第三个段落这是第三个段落这是第三个段落这是第三个段落这是第三个段落这是第三个段落这是第三个段落这是第三个段落</p>


<nav class="navbar navbar-default" style="margin-top: 50px;">
<div class="container-fluid"> <div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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" href="#">首页</a>
</div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">导航 <span class="sr-only">(current)</span></a></li>
<li><a href="#">导航</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">下拉导航 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">子页</a></li>
<li><a href="#">子页</a></li>
<li><a href="#">子页</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">子页</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">子页子页子页子页</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="查询">
</div>
<button type="submit" class="btn btn-default">查询</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">导航</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">自带响应式 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">子页</a></li>
<li><a href="#">子页</a></li>
<li><a href="#">子页</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">子页</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
这些就是BootStrap其他的一些组件看左图大家可以到BootStrap官网查找一下自己可以试试。还有很多表格表单啦按钮icon图标。可简单的就不一一给大家介绍了。
今天最主要的就是给大家详解一下BootStrap中的栅格系统。也是个人比较喜欢实现响应式布局的一种。下面就开始吧。
栅格系统的简介:
栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理
① 首先呢我们要创建一个栅格系统的容器:
<div class="container-fluid">
<div class="row">
<!--栅格系统的容器-->
</div>
</div>
注释:
为了给予栅格系统合适的排列和padding,要把每一行的“row”包含在一个容器中,而这个容器我们用class名为“container”或者“container-fluid”这两个class是Bootstrap为我们实现设计好的
下面图片就是container和container-fluid的区别:(是Bootstrap为我们设计好的代码我敲出来是为了更好的理解!)
② 创建一个单一一组的.col-md-
栅格类 实现从叠堆到水平排列的响应式。
<div class="container-fluid">
<div class="row">
<div class="row""> <div class="col-md-1">.col-md-</div> <div class="col-md-1">.col-md-</div> <div class="col-md-1">.col-md-</div> <div class="col-md-1">.col-md-</div> <div class="col-md-1">.col-md-</div> <div class="col-md-1">.col-md-</div> <div class="col-md-1">.col-md-</div> <div class="col-md-1">.col-md-</div> <div class="col-md-1">.col-md-</div> <div class="col-md-1">.col-md-</div> <div class="col-md-1">.col-md-</div> <div class="col-md-1">.col-md-</div>
</div>
<div class="row"> <div class="col-md-8">.col-md-</div> <div class="col-md-4">.col-md-</div>
</div>
<div class="row"> <div class="col-md-4">.col-md-</div> <div class="col-md-4">.col-md-</div> <div class="col-md-4">.col-md-</div>
</div>
<div class="row" id="row3"> <div class="col-md-6">.col-md-</div> <div class="col-md-6">.col-md-</div>
</div>
</div>
</div>
</body>
注释:每一个“row”代表一行,而内部的“col-md-数字”代表一个单元格;Bootstrap把每一行分成12等份,“col-md-数字”中的“数字”从1-12中取,数字等于几,就占几份;
合理的选择单元格的数字配置,再往单元格中添加我们想要的内容,这样一个栅格系统就完成了!
③ 单元格的类的其他选择
.c0l-xs- 无论屏幕宽度如何,单元格都在一行,宽度按照百分比设置;试用于手机;
.col-sm- 屏幕大于768px时,单元格在一行显示;屏幕小于768px时,独占一行;试用于平板;
.col-md- 屏幕大于992px时,单元格在一行显示;屏幕小于992px时,独占一行;试用于桌面显示器;
.col-lg- 屏幕大于1200px时,单元格在一行显示;屏幕小于1200px时,独占一行;适用于大型桌面显示器;
下面就带大家了解一下他们的作用:
上面的动图就是:(根据图片右上角变换来理解)
屏幕大于992px时:.col-md-8 和.col-md-4 还处于 作用范围内
屏幕在769px-992px之间时:.col-md-已失效,而.col-sm- 还处在 作用范围内
屏幕宽度小于768px时,.col-sm-已失效 只有.col-xs- 不受屏幕宽度影响,这时候就由.col-xs-起作用
后序
S N
好啦今天的Bootstrap就和大家分享到这了,还有好多功能我也没能一一给大家做出来希望能让你们有了简单的了解,时间也不早了各位晚安!
实现响应式——Bootstrap的删格系统详解的更多相关文章
- Bootstrap栅格系统详解,响应式布局
Bootstrap栅格系统详解 栅格系统介绍 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 栅格系统用于通 ...
- 50个令人惊奇的jQuery插件(对话框和表单篇)及免费的响应式bootstrap管理员后台界面主题 - Charisma
http://www.woiweb.net/50-amazing-jquery-plugins.html 多文件文件下载 免费的响应式bootstrap管理员后台界面主题 – Charisma htt ...
- java中的io系统详解 - ilibaba的专栏 - 博客频道 - CSDN.NET
java中的io系统详解 - ilibaba的专栏 - 博客频道 - CSDN.NET 亲,“社区之星”已经一周岁了! 社区福利快来领取免费参加MDCC大会机会哦 Tag功能介绍—我们 ...
- Scala 深入浅出实战经典 第61讲:Scala中隐式参数与隐式转换的联合使用实战详解及其在Spark中的应用源码解析
王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-87讲)完整视频.PPT.代码下载: 百度云盘:http://pan.baidu.com/s/1c0noOt ...
- Vmware12安装centos系统详解
vmware12安装centos7系统详解 用虚拟机12安装centos7系统详细安装过程,后附centos7下载地址. 工具/原料 虚拟机12 centos7系统镜像 方法/步骤 1 1.百度搜索c ...
- centos7.2环境nginx+mysql+php-fpm+svn配置walle自动化部署系统详解
centos7.2环境nginx+mysql+php-fpm+svn配置walle自动化部署系统详解 操作系统:centos 7.2 x86_64 安装walle系统服务端 1.以下安装,均在宿主机( ...
- “全栈2019”Java多线程第三十二章:显式锁Lock等待唤醒机制详解
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java多 ...
- syslog之一:Linux syslog日志系统详解
目录: <syslog之一:Linux syslog日志系统详解> <syslog之二:syslog协议及rsyslog服务全解析> <syslog之三:建立Window ...
- 利用python求解物理学中的双弹簧质能系统详解
利用python求解物理学中的双弹簧质能系统详解 本文主要给大家介绍了关于利用python求解物理学中双弹簧质能系统的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 物理的 ...
随机推荐
- Markdown格式
一个例子: 例子开始 1. 本章学习总结 今天主要学习了三个知识点 封装 继承 多态 2. 书面作业 Q1. java HelloWorld命令中,HelloWorld这个参数是什么含义? 今天学了一 ...
- redis 基础学习总结
背景:因为项目用到了redis,加上之前一直听说了redis,但一直没有用过,正好项目现在要用到了,抽时间简单学习了下,做个记录总结下. 一 .Redis简介 介绍Redis之前,先了解下NoSQL ...
- JavaScript中的與和或的規則
與(&&)的規則是: 第一項的Boolean值為false,則返回第一項的值 第一項的Boolean值為true,則返回第二項的值 簡記:一假返一,一真返二 與:一假為假,全真為真 或 ...
- MyEclipse/Eclipse 使用图文详解
引言 某天在群里看到有小伙伴问MyEclipse/Eclipse的一些使用问题,虽然在我看来,问的问题很简单,但是如果对于刚刚学习的人来说,可能使用就不那么友好了.毕竟我在开始使用MyEclipse/ ...
- JAVA 并发(待补全!)
从性能上看 如果没有任务会阻塞 那么在单处理器的机器人使用并发就没有任何意义 (需要上下文切换 时间反而长) 进程是运行在他自己地址空间的自包容的程序 协作多线程与抢占式多线程 想要定义任务需要实现R ...
- CDH入门
cloudera(CDH)官网介绍:安装包.离线包该如何下载.官方文档等介绍http://www.aboutyun.com/thread-8908-1-1.html(出处: about云开发) 进入C ...
- Hadoop 一: NCDC 数据准备
Hadoop 本文介绍Hadoop- The Definitive Guide一书中的NCDC数据准备,为后面的学习构建大数据环境; 环境 3节点 Hadoop 2.7.3 集群; java vers ...
- hdu3756三分基础题
Dome of Circus Time Limit: 10000/3000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...
- PyCharm基本操作
1.1 PyCharm基本使用 视频学习连接地址:http://edu.51cto.com/course/9043.html 1.1.1 在Pycharm下为你的Python项目配置Python解释器 ...
- URL不能过长,否则summit方法提交失败
MVC5.0+EF6.0,和浏览器的版本有关系.IE最多1024KB. URL不能过长,否则summit方法提交失败.