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 ...
随机推荐
- python给图片打马赛克
图片马赛克 关注公众号"轻松学编程"了解更多. 导包 import numpy as np import matplotlib.pyplot as plt %matplotlib ...
- 白话科普,10s 了解 API
作为一名又拍云的技术支持工程师,小拍每天都会接收到很多客户的提问.这其中,有很多客户会问:"小拍,请问云存储上传除了使用控制台的文件管理和 FTP 工具之外,有没有其他的途径进行上传呢?&q ...
- 快速傅里叶变换(FFT)学习笔记(其二)(NTT)
再探快速傅里叶变换(FFT)学习笔记(其二)(NTT) 目录 再探快速傅里叶变换(FFT)学习笔记(其二)(NTT) 写在前面 一些约定 前置知识 同余类和剩余系 欧拉定理 阶 原根 求原根 NTT ...
- 通过Portwigge的Web安全漏洞训练平台,学习SSRF
前言 Portswigger是Burpsuite的官网,也是一个非常好的漏洞训练平台.其Web安全靶场地址为:https://portswigger.net/web-security/ 该靶场的训练内 ...
- System.Net邮件发送功能踩过的坑
System.Net邮件发送功能踩过的坑 目录 System.Net邮件发送功能踩过的坑 1.EazyEmail邮件发送类库 2.邮件发送授权码与邮件密码 3.通过邮件密码来发送邮件 4.Wiresh ...
- IP 层收发报文简要剖析2--ip报文的输入ip_local_deliver
ip报文根据路由结果:如果发往本地则调用ip_local_deliver处理报文:如果是转发出去,则调用ip_forward 处理报文. 一.ip报文转发到本地: /* * Deliver IP Pa ...
- samba配置用户访问方法
配置目的: 为了给指定用户一个独立访问目录 首先在samba服务器安装samba软件 $ apt-get install samba 然后配置独立访问用户 配置samba用户前提需要是linux的用户 ...
- 检查linux下服务器的带宽
设想:公司 A 有一个名为 bsdocfs 的存储服务器,并通过名为 beckham 的客户端节点装载 NFS.公司 A 确定他们需要从 bsdocfs得到更多的带宽,因为有大量的节点需要访问 bsd ...
- 最全总结 | 聊聊 Python 办公自动化之 Word(中)
1. 前言 上一篇文章,对 Word 写入数据的一些常见操作进行了总结 最全总结 | 聊聊 Python 办公自动化之 Word(上) 相比写入数据,读取数据同样很实用! 本篇文章,将谈谈如何全面读取 ...
- Django 笔记2018.2.7
1.基础知识 1.1web服务基本原理 1.2 WSGI 目前最通用的web接口规范,python默认支持,在Django中是一个库 1.3WEB基础知识 MTV (Model Template Vi ...