bootstrap是一种热门的Web前端流行框架,如果要兼容PC端、手机端和响应式布局,那他一定是我的首选。bootstrap内容很多,功能强大,其中最好入门也是很重要的就是他的栅格系统。他有四个典型类:

col-xs-     对应超小设备(屏幕<768 px )手机

col-sm-    对应小型设备(屏幕>768 px 屏幕<992 px )平板电脑

col-md-   对应中型设备(屏幕>992 px 屏幕<1200 px )台式电脑

col-lg-    对应大型设备(屏幕>1200 px)台式电脑

简单的写法:

<div class="row">
    <div class="col-xs-3 col-sm-2 col-md-2"></div>
    <div class="col-xs-3 col-sm-2 col-md-2"></div>
   <div class="col-xs-3 col-sm-2 col-md-2"></div>
</div>

bootstrap思考一的更多相关文章

  1. 塞翁失马,焉知非福:由 Styles.Render 所引发 runAllManagedModulesForAllRequests="true" 的思考

    最近在使用 MVC 开发的时候,遇到一个对我来说"奇怪的问题",就是使用 BundleTable 进行 CSS.JS 文件绑定,然后使用 Styles.Render.Scripts ...

  2. Bootstrap Navbar应用及源码解析

    目的: 用Bootstrap Navbar component 实现一个响应式导航 理解Bootstrap Navbar component是如何工作的(不包括collepse.js) 清楚自己添加一 ...

  3. 基于Bootstrap仿淘宝分页控件实现

    .header { cursor: pointer } p { margin: 3px 6px } th { background: lightblue; width: 20% } table { t ...

  4. box-shadow中的理解(bootstrap)

    刚研究了bootstrap中css里面的源码,找到了表单(form)中关于输入框的一些设置,根据要求,label标签和input标签需要一起使用,(屏幕阅读器中不能单独辨认input),如需隐藏lab ...

  5. bootstrap深入理解之格子布局

    一.源码文件: _grid.scss:格子系统类文件 Mixins/_grid.scss:支持格子系统实现的mixin集合 Mixins/_grid-framework.scss:格子系统实现的核心m ...

  6. 《深入理解bootstrap》读书笔记:第4章 CSS组件(上)

    bootstrap三大核心之二. 包括glyphicon图标,下拉菜单(dropdown),按钮组(button group)....等等. 一. 图标字体 bootstrap3提供了200多个免费图 ...

  7. 《深入理解bootstrap》读书笔记:第三章 CSS布局

    一. 概述一下理念 bootstrap基于H5开发.提倡移动先行(媒询声明是必须的),对浏览器支持面不是很广. 响应式图片:max-width:100% height:auto; 可以加上:.img- ...

  8. 【Bootstrap】Bootstrap和Java分页-第二篇

    目录 关于此文 配置xml-pager.tld 分页控件-Pager 分页action集成类-BaseController 实例-Dao 实例-service 实例-action 实例-JSP 实例- ...

  9. 最值得收藏的Bootstrap资源网站

    如果你正在寻找Bootstrap图标,那今天的推荐对你而言绝对非常重要!在这篇内容中,我们把这套框架上的免费字体图 标做了个整合(当然,以后还会不断的更新).正如你所知,图标字体在一个web网页设计拥 ...

随机推荐

  1. 性能测试学习 第八课--LR12中针对WebServices协议的三种脚本开发模式

    一,webservices协议简介 webservices是建立可交互操作的分布式应用程序的新平台,它通过一系列的标准和协议来保证程序之间的动态连接, 其中最基本的协议包括soap,wsdl,uddi ...

  2. java发送短信验证码

    业务: 手机端点击发送验证码,请求发送到java服务器端,由java调用第三方平台(我们使用的是榛子云短信http://smsow.zhenzikj.com)的短信接口,生成验证码并发送. SDK下载 ...

  3. 解决 Visual Studio 点击添加引用无反应的问题

    如遇到vs2010 点击添加引用无反应,主要是因为windows系统推送的更新问题,把windows系统推送的更新都更新一遍就好了. 如果已经安装VS后 Windows系统推荐的更新.360推荐的安全 ...

  4. js 中 的 BOM对象

    BOM对象(浏览器对象模型 Browser Object Model) 01.页面的前进和后退 02.移动,调整和关闭浏览器窗口 03.创建新的浏览器窗口 01.window对象 ***** 核心对象 ...

  5. Python代码缩进与测试模块

    一.Python代码缩进 Python 函数没有明显的  begin 和  end ,没有标明函数的开始和结束的花括号.唯一的分隔符是一个冒号 ( : ),接着代码本身是缩进的. 例如:缩进  bui ...

  6. 理解Golang哈希表Map的元素

    目录 概述 哈希函数 冲突解决 初始化 结构体 字面量 运行时 操作 访问 写入 扩容 删除 总结 在上一节中我们介绍了 数组和切片的实现原理,这一节会介绍 Golang 中的另一个集合元素 - 哈希 ...

  7. [Swift]LeetCode58. 最后一个单词的长度 | Length of Last Word

    Given a string s consists of upper/lower-case alphabets and empty space characters ' ', return the l ...

  8. [Swift]LeetCode652. 寻找重复的子树 | Find Duplicate Subtrees

    Given a binary tree, return all duplicate subtrees. For each kind of duplicate subtrees, you only ne ...

  9. [Swift]LeetCode887. 鸡蛋掉落 | Super Egg Drop

    You are given K eggs, and you have access to a building with N floors from 1 to N. Each egg is ident ...

  10. java多线程(8)---阻塞队列

    阻塞队列 再写阻塞列队之前,我写了一篇有关queue集合相关博客,也主要是为这篇做铺垫的. 网址:[java提高]---queue集合  在这篇博客中我们接触的队列都是非阻塞队列,比如Priority ...