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. DOS命令(一)

    1. echo 输出内容,用来输出文字. [例如:echo hello] 2. titile 标题,用来修改标题. 3. color 背景色前景色,用来设置背景色和前景色 0 = 黑色 8 = 灰色 ...

  2. 2018申请淘宝客AppKey

    1.www.alimama.com 申请账号进入后2.进入我的联盟,按下面的步骤 完成以后等待网站审核. 3.审核完成后 按以下的图,申请进入开放平台或得appkey 4.最后就可以进入开放平台申请看 ...

  3. partial 的随笔

    partial class Dmeos { public int Ager { get; set; } public void Run() { Console.WriteLine(Ager); } } ...

  4. [Swift]LeetCode274.H指数 | H-Index

    Given an array of citations (each citation is a non-negative integer) of a researcher, write a funct ...

  5. [Swift]LeetCode492. 构造矩形 | Construct the Rectangle

    For a web developer, it is very important to know how to design a web page's size. So, given a speci ...

  6. [Swift]LeetCode724. 寻找数组的中心索引 | Find Pivot Index

    Given an array of integers nums, write a method that returns the "pivot" index of this arr ...

  7. Firefox 多行标签的解决方案分享

    更新了 Quantum 以后 TabMixPlus 就不能用了,我最中意的多行标签也没了,捣鼓了一下终于重新回来了. 指南: https://discourse.mozilla.org/t/tabs- ...

  8. 【异常】Servlet.service() for servlet [springMvc] in context with path [/orderdishessystem] threw exception [Handler processing failed; nested exception is java.lang.NoClassDefFoundError: net/sf/ezmorph/M

    今天做登录的时候,引入json-lib-2.1-jdk15.jar的包时,执行到JSONObject jsonObject = new JSONObject()对象就报标题的那个错. 原来是除了要导入 ...

  9. bilibili源码泄漏后,程序员们从代码里扒出来的彩蛋

    昨天bilibili又上热搜了,被某人在github上开了个账号,传了份整个后端代码到github,这是被人扒光了衣服看个精光啊. 这件事情,作为程序员的我们除了调侃和fork的同时,想一想,造成这个 ...

  10. spark System memory must be at least

    运行 ScalaSpark 程序的时候出现错误: System memory * must be at least *.Please increase heap size using the --dr ...