bootstrap如何自定义5等分
根据bootstrap源码改的1比5的栅格系统
/*5等分媒体查询样式begin*/
.col-xs-1-5,.col-sm-1-5,.col-md-1-5,.col-lg-1-5,.col-xs-4-5,.col-sm-4-5,.col-md-4-5,.col-lg-4-5 {
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
.col-xs-1-5 {
width: 20%;
float: left;
}
.col-xs-4-5 {
width: 80%;
float: left;
}
@media (min-width: 768px) {
.col-sm-1-5 {
width: 20%;
float: left;
}
}
@media (min-width: 768px) {
.col-sm-4-5 {
width: 80%;
float: left;
}
}
@media (min-width: 992px) {
.col-md-1-5 {
width: 20%;
float: left;
}
}
@media (min-width: 992px) {
.col-md-4-5 {
width: 80%;
float: left;
}
}
@media (min-width: 1200px) {
.col-lg-1-5 {
width: 20%;
float: left;
}
}
@media (min-width: 1200px) {
.col-lg-4-5 {
width: 80%;
float: left;
}
}
/*5等分媒体查询样式end*/
bootstrap如何自定义5等分的更多相关文章
- Ruby Rails学习中:网站导航,Bootstrap和自定义的CSS,局部视图
添加一些结构 一.网站导航 1.添加一些结构后的网站布局文件 打开文件:app/views/layouts/application.html.erb 简单介绍一下,添加的代码: 我们从上往下看一下这段 ...
- Django:bootstrap table自定义查询实现
参考:https://jalena.bcsytv.com/archives/tag/bootstrap 背景: bootstrap table在客户端分页方式下,自带有简易的搜索功能,但是功能太单一, ...
- bootstrap如何自定义5列
废话少说,先上代码: <!DOCTYPE html><html> <head> <meta charset="utf-8"> < ...
- bootstrap table 自定义checkbox样式
//css <style> .checkbox-custom { position: relative; padding: 0 15px 0 25px; margin-bottom: 7p ...
- 自定义bootstrap样式-9行样式自定义漂亮大气bootstrap导航栏
有人说前端发展太快,框架太多,各有所需,各有所长.看看这幅图,估计都知道这些框架,但是大部分公司中实际要用到的也就那么几个. 发展再快,框架再多.还是得回到原点,不就是Html+Css+JavaScr ...
- Flex布局和Bootstrap布局两者的比较
在Bootstrap中采用12栅格的布局,12份随意分配,但是不能解决5等分,7等分的问题.所以flex布局来协助. bootstrap的布局方式 <div class="row&qu ...
- Bootstrap<基础二十四> 缩略图
Bootstrap 缩略图.大多数站点都需要在网格中布局图像.视频.文本等.Bootstrap 通过缩略图为此提供了一种简便的方式.使用 Bootstrap 创建缩略图的步骤如下: 在图像周围添加带有 ...
- (新手向)基于Bootstrap的简单轮播图的手机实现
个人电脑里存了不少适合手机欣赏的图片,但是放手机里看是件很占据资源的事.鉴于家里有一台电脑经常开着,正好用来做家庭局域网共享,于是笔者就设想通过一种比较简单环保的思路.通过手机访问电脑内的图片. 首先 ...
- 《深入理解bootstrap》读书笔记:第一章 入门准备
一.bootstrap框架简介 Bootstrap是最流行的前端开发框架. 什么是框架:开发过程的半成品. bootstrap具有以下重要特性: (1)完整的CSS样式插件 (2)丰富的预定义样式表 ...
随机推荐
- Ubuntu12.10 下搭建基于KVM-QEMU的虚拟机环境(八)
Libvirt 是用c写的一个管理虚拟机及其资源(如网络.存储和外设等)的工具库,它不仅支持KVM/QEMU,它还支持xen,Vmware,OpenVZ和VirtualBox等其他HyperVisor ...
- Android消息推送之GCM方式(一)
<声明> 转载请保留本来源地址: http://blog.csdn.net/wzg_1987/article/details/9140371 首先,你需要使用一个谷歌账号登录谷歌Api控制 ...
- jvm回收对象
jvm在判断对象死亡之前需要判断对象是否可到达,方法有引用计数算法和可达性分析算法,jvm采用的是后者.首先来了解一下这两种算法. 引用计数算法: 算法定义 为每个对象增加一个字段记录被引用的次数,并 ...
- Spring实战——XML和JavaConfig的混合配置
前言 看了园龄已经两年多了,再不能写完内容直接点击发布,留下一片密密麻麻的文字让别人看的头昏脑涨.所以现在每次写完主要内容后,还需要对于格式稍稍调整下.那么有没有什么编辑模式能够在你写完文章后基本也把 ...
- asp.net mvc ActionResult
定义在Controller中的Action方法大都返回一个ActionResult对象.ActionResult是对Action执行结果的封装,用于最终对请求进行响应.ASP.NET MVC提供了一系 ...
- 基本的SQL语句
一些常用的SQL语句大全参考:http://www.cnblogs.com/acpe/p/4970765.html 这篇博文整理的比较全,我摘抄一些基本常用的. 创建数据库 CREATE DATABA ...
- Microsoft Edge与Google Chrome那些不同的举止
以下针对14393版本Edge与Chrome 54 html dom/select的如果options里没有符合的值时edge会选择第一个,chrome(54)会置空选项 html dom/input ...
- 正则表达式之js检验密码强度
最近一直在做通行证项目,里面的注册模块中输入密码需要显示密码强度(低中高).今天就把做的效果给大家分享下,代码没有网上搜索的那么复杂,能够满足一般的需求. html 代码如下: <!DOCTYP ...
- CodeForces 384C Milking cows
水题. 对于两个$0$,肯定是先删去后面的$0$,再删去前面的$0$. 对于两个$1$,肯定是先删去前面的$1$,再删去后面的$1$. 对于一个$0$和一个$1$,无论先删哪一个,对答案做出的贡献都是 ...
- JavaScript中Array.prototype.sort()的详解
摘抄来源:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/sort sor ...