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 ...
随机推荐
- 震惊!你还不知道SpringBoot真正的启动引导类
引言 SpringBoot项目中的启动类,一般都是XXApplication,例如「StatsApplication」,「UnionApplication」. 每个项目的启动类名称都不一样.但是它的启 ...
- Linux 环境编程:dirfd参数 有关解析
背景 在Unix环境编程中,系统提供了很多以at结尾的函数,如openat.fstatat等,而这类函数通常有一个特点,就是形参列表中多了int dirfd 例如: int open(const ch ...
- mysql数据库——事务隔离级别
四种隔离级别: 一:READ UNCOMMITTED(未提交读) 事务可以读取其他事务未提交的数据,称为脏读 二:READ COMMITTED(提交读) 一个事务开始时,只能"看见" ...
- [Luogu P2257] YY的GCD (莫比乌斯函数)
题面 传送门:洛咕 Solution 推到自闭,我好菜啊 显然,这题让我们求: \(\large \sum_{i=1}^{n}\sum_{j=1}^{m}[gcd(i,j)\in prime]\) 根 ...
- TCP的粘包和拆包问题及解决办法(C#)
本文参考:https://blog.csdn.net/wxy941011/article/details/80428470 原因 如果客户端连续不断的向服务端发送数据包时,服务端接收的数据会出现两个数 ...
- 较详细的gdb入门教程
本文主要介绍gdb的基础使用.若需了解一些技巧,请访问此篇博客:点这里 本篇教程适用于Windows,macOS及Linux,但由于Windows的自带终端很难用,所以体验可能不太好.Windows ...
- 第 2 篇:上手 Vue 展示 todo 列表
作者:HelloGitHub-追梦人物 追梦人物的 Vue 系列教程在他的博客已经全部更新完成,地址: https://www.zmrenwu.com/courses/vue2x-todo-tutor ...
- Spring Cloud 纯干货,从入门到实战
导读 之前写过一篇SpringCloud从入门到精通的点我直达,微服务基础知识点我直达,今天我们使用Spring Cloud模拟一个电商项目.分别有以下2个服务,商品.订单.下面我们开始叭 技术栈 S ...
- 10、Django与Ajax
AJAX准备知识:JSON 什么是 JSON ? JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻量级的文本数据交换格式 JS ...
- Cacti如何实现电话告警
Cacti是一套基于PHP,MySQL,SNMP及RRD Tool开发的网络流量监测图形分析工具.Cacti提供了一个快速轮询器,高级图表模板,多种数据采集方法和用户管理功能.所有这一切都被包装在一个 ...