bootstrap火速布局"企业级"页面
套娃
.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火速布局"企业级"页面的更多相关文章
- BootStrap母版页布局.子页面布局.BootstrapTable.模态框.警告框.html导出tabl生成Excel.HTML生成柱图.饼图.时间控件中文版
如上就是很多后台管理系统的母版页布局. 左边一列模板.上面一列系统标识. 空白处充填子页面 以ASP.NET MVC为基础 引入bootstrap.js.bootstrap.css body: < ...
- 利用Bootstrap框架制作查询页面的界面
UI设计实战篇——利用Bootstrap框架制作查询页面的界面 Bootstrap框架是一个前端UI设计的框架,它提供了统一的UI界面,简化了设计界面UI的过程(缺点是定制了界面,调整的余地不是太 ...
- SharePoint 2013 入门教程之创建页面布局及页面
在SharePoint的使用过程中,页面布局和页面时很重要的两个概念,主要用于数据个性化展示,下面,我们简单介绍一下SharePoint的页面布局和页面的个性化. 一. SharePoint页面模型概 ...
- Bootstrap <基础二十三>页面标题(Page Header)
页面标题(Page Header)是个不错的功能,它会在网页标题四周添加适当的间距.当一个网页中有多个标题且每个标题之间需要添加一定的间距时,页面标题这个功能就显得特别有用.如需使用页面标题(Page ...
- Bootstrap做的HTML页面在本地IE打开正常,放到服务器上显示就不正常了
<meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Com ...
- 使用ichartjs进行布局图表页面
先说官网 http://www.ichartjs.com/ 进入里面会有一个可视化布局系统,布局起来自己想要的样式快捷方便,和bootstrap可视化布局系统是一个道理的.
- Bootstrap 可视化布局--拖拽后弹窗进行编辑
Bootstrap 可视化布局--拖拽后弹窗进行编辑 最近后台想一个需求,使用可视化布局-中文 | en中拖拽表格后,弹窗进行编辑,保存下载后在后台生成pdf格式. 奈何各种问题不断,使用 jquer ...
- PHP.TP框架下商品项目的优化1-时间插件、鼠标所在行高亮、布局规划页面
1.优化搜索表单中按时间搜索的功能 添加一个时间插件datetimepicker,在lst.html中,注意要导入jquery.min.js,此处从前文的在线编辑器中导入 <!-- 导入 --& ...
- 使用BootStrap网格布局进行一次演示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 4G DTU比GPRS/3G DTU的优势
4G DTU一般来说是采用电脑和数据线连接来进行参数设置的,为了适应不同的工作环境,提高工作的效率,成都远向电子4G DTU还支持远程参数配置和远程固件升级,只需一部手机即可轻松完成操作.今天我们就来 ...
- DM存储过程示例子-表的行数对比
1.DM存储过程示例子,表的行数对比 1 --1. ================全量 2 --select * from DM_VERI where c2 != c3; 3 --drop tabl ...
- 微信小程序——【百景游戏小攻略】
微信小程序--[百景游戏小攻略] 本次课程小项目中的图片以及文章还未获得授权!请勿商用!未经授权,请勿转载! 博客班级 https://edu.cnblogs.com/campus/zjcsxy/SE ...
- sdasd
create PROCEDURE v4(in c_year int) BEGIN declare num int(10) default 0; declare num1 int(10); select ...
- JavaScript的原型对象prototype、原型属性__proto__、原型链和constructor
先画上一个关系图: 1. 什么是prototype.__proto__.constructor? var arr = new Array; 1. __proto__是原型属性,对象特有的属性,是对象指 ...
- SQL2005数据库可疑的解决方法
sqlserver数据库标注为可疑的解决办法 一般引起可疑的原因是突然断电,服务器死机,强制关机导致正在运行的数据库文件损坏,需要进行修复.方法一:USE MASTER GOSP_CONFIGURE ...
- Spider--补充--Re模块_2
# @ Author : Collin_PXY # Python 正则表达式的应用(二) # 正则表达式之所以让人头疼,很大程度是因为表达式里有大量的符号及它们的组合,还有很多匹配模式,想要记住比较困 ...
- python_面向对象_组合
组合: 一个类的对象是另外一个类对象的属性 # 组合 # 一个类的对象是另一个类对象的属性 # 什么时候使用组合:当两个类之间的关系是 :什么有什么的关系 : 班级有学生 学生有班级 班级有课程 图书 ...
- Best Time to Buy and Sell Stock I II III IV
一.Best Time to Buy and Sell Stock I Say you have an array for which the ith element is the price of ...
- Go知识点记录
1.go中 堆的实现:https://ieevee.com/tech/2018/01/29/go-heap.html#3-containerheap%E5%8F%AF%E4%BB%A5%E7%94%A ...