套娃

  .container(两边有margin)/container-fluid(无)       大盒,写一个当爹就行

        .row 行

              .col 列      列中可再嵌套行和列

大小

  把屏幕分成十二列看

  .col-(xs/sm/md/lg)-几列      就是这个标签占几列

  xs/sm/md/lg

  超小设备手机（<768px）/ 小型设备平板电脑（≥768px）/ 中型设备台式电脑（≥992px）/ 大型设备台式电脑（≥1200px）

  全部用同一个前缀就ok了

位移

  .col-(xs/sm/md/lg)-offset-几列      就是在这个标签左侧加一个几列的margin把标签向右挤

  .col-(xs/sm/md/lg)-push-几列        就是标签向-->右走几列

  .col-(xs/sm/md/lg)-pull-几列        就是标签向<--左走几列

企业级居中

   .col-(xs/sm/md/lg)-offset-（所在行的列数 - 标签的列数）/ 2  =  居中

bootstrap火速布局"企业级"页面的更多相关文章

  1. BootStrap母版页布局.子页面布局.BootstrapTable.模态框.警告框.html导出tabl生成Excel.HTML生成柱图.饼图.时间控件中文版

    如上就是很多后台管理系统的母版页布局. 左边一列模板.上面一列系统标识. 空白处充填子页面 以ASP.NET MVC为基础 引入bootstrap.js.bootstrap.css body: < ...

  2. 利用Bootstrap框架制作查询页面的界面

    UI设计实战篇——利用Bootstrap框架制作查询页面的界面   Bootstrap框架是一个前端UI设计的框架,它提供了统一的UI界面,简化了设计界面UI的过程(缺点是定制了界面,调整的余地不是太 ...

  3. SharePoint 2013 入门教程之创建页面布局及页面

    在SharePoint的使用过程中,页面布局和页面时很重要的两个概念,主要用于数据个性化展示,下面,我们简单介绍一下SharePoint的页面布局和页面的个性化. 一. SharePoint页面模型概 ...

  4. Bootstrap <基础二十三>页面标题（Page Header）

    页面标题(Page Header)是个不错的功能,它会在网页标题四周添加适当的间距.当一个网页中有多个标题且每个标题之间需要添加一定的间距时,页面标题这个功能就显得特别有用.如需使用页面标题(Page ...

  5. Bootstrap做的HTML页面在本地IE打开正常，放到服务器上显示就不正常了

    <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Com ...

  6. 使用ichartjs进行布局图表页面

    先说官网  http://www.ichartjs.com/ 进入里面会有一个可视化布局系统,布局起来自己想要的样式快捷方便,和bootstrap可视化布局系统是一个道理的.

  7. Bootstrap 可视化布局--拖拽后弹窗进行编辑

    Bootstrap 可视化布局--拖拽后弹窗进行编辑 最近后台想一个需求,使用可视化布局-中文 | en中拖拽表格后,弹窗进行编辑,保存下载后在后台生成pdf格式. 奈何各种问题不断,使用 jquer ...

  8. PHP.TP框架下商品项目的优化1-时间插件、鼠标所在行高亮、布局规划页面

    1.优化搜索表单中按时间搜索的功能 添加一个时间插件datetimepicker,在lst.html中,注意要导入jquery.min.js,此处从前文的在线编辑器中导入 <!-- 导入 --& ...

  9. 使用BootStrap网格布局进行一次演示

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 【Luogu】P1436 棋盘分割 题解

    嗯,点开题目,哇!是一道闪亮亮的蓝题! 不要被吓到了,其实,这道题就是一个简单的DP啦! 我们设 \(f[x1][y1][x2][y2][c]\) 为以 \((x1,y1)\) 为左上角,以 \((x ...

  2. python开发基础(二)运算符以及数据类型之dict(字典)

    # encoding: utf-8 # module builtins # from (built-in) # by generator 1.147 """ Built- ...

  3. UDS诊断之0x11服务

    服务作用: ECUReset(0x11),这个服务主要是通过诊断请求使ECU重启. 服务格式: Service ID Sub-function SID=0x11 SF=01表示hardReset,模拟 ...

  4. flex与bison的学习

    获取bison http://www.gnu.org/software/bison 获取flex http://flex.sourceforge.net/ 本书的范例 ftp://ftp.iecc.c ...

  5. input 与 button 的问题 （空隙/不等高/对不齐）及 解决办法

    1. input 与 button 为什么有空隙? - 要明白为什么,需要了解一下几点基础知识(耐心看完,你会发现竟如此简单)     1. input 与 button 都属于行级块元素,都具有文本 ...

  6. 遗传算法(Genetic Algorithm)——基于Java实现

    一.遗传算法原理介绍 遗传算法(Genetic Algorithm)是模拟达尔文生物进化论的自然选择和遗传学机理的生物进化过程的计算模型,是一种通过模拟自然进化过程搜索最优解的方法.遗传算法是从代表问 ...

  7. Java集合系列-HashSet

    原创文章,转载请标注出处:https://www.cnblogs.com/V1haoge/p/10755431.html 一.概述 HashSet是基于哈希实现的set集合,其实它底层是一个value ...

  8. 弹性盒模型flex-grow的计算

    flex-grow属性是弹性盒布局模块的子属性. 它定义了弹性项目在必要时增长的能力. 它接受作为比例的无单位值. 它决定了项目应在伸缩容器内部占用多少可用空间. 例如,如果所有项目的flex-gro ...

  9. CSS3之transition属性

    transition属性可直译为"过渡",主要用于检索或设置对象变换的过渡. 语法: transition:property duration [timing-function] ...

  10. 【javascript】掌握ES6-10，附xmind思维导图，每个知识点备注说明案例，请享用

    前段时间一直想掌握ES6-10,陆陆续续花了1个月的时间,自学了ES6-10的新知识点,大部分都是非常实用的,花了2天时间整理思维导图 思维导图已上传博客园,请享用. ES6-10思维导图xmind ...