[Bootstrap] 3. Responsive Gridding (.hidden-sm, visible-md)
Grid Size For .col-md
We started designing our site using the col-md-* classes. These classes target what screen size?
Phones
Tablets
Laptops
Desktops
Grid Size For .col-sm
If we started using the col-sm-* classes, what class of devices would we be designing for?
Phones
Tablets
Laptops
Desktops
Grid Size For Phones
If we wanted to add grid classes for our smallest class of devices, like phones, which class would we use?
d-*.col-lg-*.col-sm-*.col-xs-*
Making Our Footer Responsive
Our footer looks good on laptops and other medium-sized devices, but on smaller devices, each footer section is on its own line. Follow the tasks to make more use of horizontal space in the footer.
Orignal:
<!DOCTYPE html>
<html>
<head>
<title>Blasting Off With Bootstrap</title>
<link href='css/bootstrap.min.css' rel='stylesheet'>
<link href='css/main.css' rel='stylesheet'>
</head>
<body>
<div class='container'>
<div class='row'>
<div class='col-md-12'>
<h1>Blasting Off With Bootstrap</h1>
</div>
</div> <div class='row'>
<div class='col-md-6'>
<h2>The Fastest Way to Space</h2>
<p>Make your way to space in the comfort of your own rocket, elevator or transporter.</p>
<button type='button'>Take the Tour</button>
<button type='button'>Book Tickets Now</button>
</div>
<div class='col-md-6 visible-md visible-lg'>
<img src='images/img-header.jpg' alt='Blast off with Bootstrap' />
</div>
</div> <div class='row'>
<div class='col-sm-4 col-xs-10 col-xs-offset-1 col-sm-offset-0'>
<h3>Book Today!</h3>
<p>Even if you're traveling tomorrow, you can still get tickets today. We have a number of conveniently located ports around the globe to service everyone.</p>
</div> <div class='col-sm-4 col-xs-6'>
<h3>Go Anywhere</h3>
<p>If you need to get to space today, why not try out a transporter? Despite the claims, there are have been no deaths in the last 6 weeks!</p>
</div> <div class='col-sm-4 col-xs-6'>
<h3>RocketBus®</h3>
<p>For cheapest fares, catch the next RocketBus® to the stars. Cheaper on your wallet, and easiest way to make friends.</p>
</div>
</div>
</div> <div class='footer'>
<div class='container'>
<div class='row'>
<div class='col-md-3'>
<h4>Who We Are</h4>
<p><i>Blasting Off With Bootstrap</i> is the fastest way to space. <a href='tickets.html'>Book your ticket today</a>!</p>
<p><a href='about.html'>More About Us</a></p>
</div> <div class='col-md-2 col-md-offset-1'>
<h4>Links</h4>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='tickets.html'>Tickets</a></li>
<li><a href='stations.html'>Stations</a></li>
</ul>
</div> <div class='col-md-2'>
<h4>Stay in Touch</h4>
<ul>
<li><a href='about.html'>About</a></li>
<li><a href='contact.html'>Contact Us</a></li>
<li><a href='/blog'>Blog</a></li>
<li><a href='http://twitter.com/codeschool'>Twitter</a></li>
<li><a href='http://facebook.com/codeschool'>Facebook</a></li>
</ul>
</div> <div class='col-md-3 col-md-offset-1'>
<h4>Contact Us</h4>
<ul>
<li>Orlando, FL</li>
<li>1-555-blast-off</li>
<li><a href='mailto:blastingoff@codeschool.com'>blastingoff@codeschool.com</a></li>
</ul>
<p>Blasting Off With Bootstrap ©2214.</p>
</div>
</div>
</div>
</div> <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<script src='js/bootstrap.min.js'></script>
</body>
</html>
In small mode, we should be able to get away with still showing all 4 footer items as columns, since we'll no longer have the empty columns.
Update the "Who We Are" and "Contact Us" sections to use 4 columns each in small mode.
<div class='col-md-3 col-sm-4'>
<h4>Who We Are</h4>
<p><i>Blasting Off With Bootstrap</i> is the fastest way to space. <a href='tickets.html'>Book your ticket today</a>!</p>
<p><a href='about.html'>More About Us</a></p>
</div>
<div class='col-md-3 col-md-offset-1 col-sm-4'>
<h4>Contact Us</h4>
<ul>
<li>Orlando, FL</li>
<li>1-555-blast-off</li>
<li><a href='mailto:blastingoff@codeschool.com'>blastingoff@codeschool.com</a></li>
</ul>
<p>Blasting Off With Bootstrap ©2214.</p>
</div>
Update the "Links" and "Stay in Touch" sections so they use 2 columns in small mode. Remove any unneeded classes.
<div class='col-sm-2 col-md-offset-1'>
<h4>Links</h4>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='tickets.html'>Tickets</a></li>
<li><a href='stations.html'>Stations</a></li>
</ul>
</div> <div class='col-sm-2'>
<h4>Stay in Touch</h4>
<ul>
<li><a href='about.html'>About</a></li>
<li><a href='contact.html'>Contact Us</a></li>
<li><a href='/blog'>Blog</a></li>
<li><a href='http://twitter.com/codeschool'>Twitter</a></li>
<li><a href='http://facebook.com/codeschool'>Facebook</a></li>
</ul>
</div>
Our footer looks good on small devices, but we have some work to do for the extra small ones.
Update all sections of the footer to be half of the page on extra small devices. This should put the first two on one row and the next two on another row.
<div class='col-md-3 col-sm-4 col-xs-6'>
<h4>Who We Are</h4>
<p><i>Blasting Off With Bootstrap</i> is the fastest way to space. <a href='tickets.html'>Book your ticket today</a>!</p>
<p><a href='about.html'>More About Us</a></p>
</div> <div class='col-sm-2 col-md-offset-1 col-xs-6'>
<h4>Links</h4>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='tickets.html'>Tickets</a></li>
<li><a href='stations.html'>Stations</a></li>
</ul>
</div> <div class='col-sm-2 col-xs-6'>
<h4>Stay in Touch</h4>
<ul>
<li><a href='about.html'>About</a></li>
<li><a href='contact.html'>Contact Us</a></li>
<li><a href='/blog'>Blog</a></li>
<li><a href='http://twitter.com/codeschool'>Twitter</a></li>
<li><a href='http://facebook.com/codeschool'>Facebook</a></li>
</ul>
</div> <div class='col-md-3 col-md-offset-1 col-sm-4 col-xs-6'>
<h4>Contact Us</h4>
<ul>
<li>Orlando, FL</li>
<li>1-555-blast-off</li>
<li><a href='mailto:blastingoff@codeschool.com'>blastingoff@codeschool.com</a></li>
</ul>
<p>Blasting Off With Bootstrap ©2214.</p>
</div>
Below is an example of our footer viewed on an extra small device. Due to the way elements are floated in Bootstrap's grid system, our footer is looking pretty messed up. There is something we can do though.
Create a new div between the "Links" section and the "Stay in Touch" section that only shows up on extra small devices and allows the "Stay in Touch" section to sit below the "Who We Are" section.
</div>
<div class="visible-xs"></div>
<div class='col-sm-2 col-xs-6'>
<h4>Stay in Touch</h4>
If we were going to fix this with CSS, we'd want to use something like clear:lefton the "Stay in Touch" section to have it moved down below the "Who We Are" section. The only problem is that would apply the style for all device sizes.
Since we only want to adjust our layout in extra small mode, add the clearfixclass to the div we added in the previous objective.
<div class="visible-xs clearfix" ></div>
[Bootstrap] 3. Responsive Gridding (.hidden-sm, visible-md)的更多相关文章
- 黑科技！两行代码完美解决：同时设置overflow-x:hidden,overflow-y:visible无效的问题
不废话,直接上代码 <!DOCTYPE html> <html> <head> <style> body { padding: 0; margin: 0 ...
- 对同一元素设置overflow-x:hidden,overflow-y:visible;属性值不生效
作者:孙志勇 微博 日期:2016年12月5日 一.时效性 所有信息都具有时效性.文章的价值,往往跟时间有很大关联.特别是技术类文章,请注意本文创建时间,如果本文过于久远,请读者酌情考量,莫要浪费时间 ...
- CssClass="Hidden"和Visible="False"
<asp:Label ID="lblNoCustomTableItemCheckedInfo" runat="server" CssClass=" ...
- jQuery中的内容、可见性过滤选择器（四、四）：:contains()、:empty、:has()、:parent、:hidden、:visible
<!DOCTYPE html> <html> <head> <title>内容.可见性过滤选择器</title> <meta http ...
- Yii2框架bootstrap样式理解
Yii2框架默认採用了bootstrap作为CSS风格,各种视图类组件都如此.之前一直採用默认风格,并在必要的时候加入或者改动一下class来达到目的.但在改版Yii1.1的orange项目时.发现之 ...
- bootstrap栅格系统的实现
bootstrap提供了一个非常实用的栅格系统,可以实现响应式的网格布局,原理其实很简单,利用了float.百分比的宽度和@media的配合实现响应式,bootstrap默认把一行分为了12列,提供了 ...
- bootstrap 学习笔记(部分)
这个课程中的boostrap是3.0+版本的.(2.0与3.0有区别) bootstrap中的JS是依赖于jquery的,所以需要事先引用jquery(1.9.0版本以上). <!DOCTYPE ...
- 技术分享PPT整理（一）：Bootstrap基础与应用
最近在复习的时候总感觉有些知识点总结过,但是翻了一下博客没有找到,才想起来有一些内容是放在部门的技术分享里的,趁这个时候跳了几篇相对有价值的梳理一下,因为都是PPT,所以内容相对零散,以要点和图片为主 ...
- 《深入理解bootstrap》读书笔记：第二章 整体架构
一. 整体架构 1. CSS-12栅格系统 把网页宽度均分为12等分(保留15位精度)--这是bootstrap的核心功能. 2.基础布局组件 包括排版.按钮.表格.布局.表单等等. 3.jQu ...
随机推荐
- MYI 文件内容
参考 http://blog.itpub.net/703656/viewspace-1018470/ 创建表结构 create table test(name char(20), age int, c ...
- 【转】FragmentTest学习笔记1
原文网址:http://blog.csdn.net/hishentan/article/details/20734489 源码部分: BookContent.java package com.exam ...
- Beginning Android 4 Programming Book学习
Chapter 3 EditText不自动获取焦点,自动获取焦点但不显示软键盘 Page 122-123 只有定义了android:id属性的控件在屏幕翻转后状态才会被持久化 Page 133 C ...
- Android Fragment学习（一）
说明 Fragment是在Android3.0(即API 11)才出现的,如果在之前的版本要使用,需要添加support库. Fragment可以认为是Actvity模块化的组件,可以很方便地被添加, ...
- java类加载器学习2——自定义类加载器和父类委托机制带来的问题
一.自定义类加载器的一般步骤 Java的类加载器自从JDK1.2开始便引入了一条机制叫做父类委托机制.一个类需要被加载的时候,JVM先会调用他的父类加载器进行加载,父类调用父类的父类,一直到顶级类加载 ...
- put a ContextMenu into the header of a TabPage z
publicclassMyTabControl:TabControl { protected override void OnMouseUp(MouseEventArgs e){ if(e.Butto ...
- 【Python】使用python的tornado配合html页面示例
背景:java写的非标加密算法,测试时执行java工程进行解密测试,很不方便. 目的:想写个web页面,使得任何测试人员都可以在输入加密串时得到解密后字段,方便日志查询及字段核对.(额,算法部分就不写 ...
- 黑盒测试用例设计方法&理论联系实际-> 功能图法
一. 概念 功能图由状态迁移图和布尔函数组成.状态迁移图用状态和迁移来描述.一个状态指出数据输入的位置(或时间),而迁移则指明状态的改变.同时要依靠判定表或因果图表示的逻辑功能.例,一个简化的自动出纳 ...
- 远程调试树莓PI
非官方 参考 http://linuxtortures.blogspot.jp/2012/06/cross-compiling-and-cross-debugging-c.html 注意: 建立 / ...
- MyEclipse10 Tomcat7 JDK1.7 配置
第一步.MyEclipse10 Tomcat7 JDK1.7下载 MyEclipse10http://downloads.myeclipseide.com/downloads/products/ewo ...