根据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等分的更多相关文章

  1. Ruby Rails学习中:网站导航,Bootstrap和自定义的CSS,局部视图

    添加一些结构 一.网站导航 1.添加一些结构后的网站布局文件 打开文件:app/views/layouts/application.html.erb 简单介绍一下,添加的代码: 我们从上往下看一下这段 ...

  2. Django:bootstrap table自定义查询实现

    参考:https://jalena.bcsytv.com/archives/tag/bootstrap 背景: bootstrap table在客户端分页方式下,自带有简易的搜索功能,但是功能太单一, ...

  3. bootstrap如何自定义5列

    废话少说,先上代码: <!DOCTYPE html><html> <head> <meta charset="utf-8"> < ...

  4. bootstrap table 自定义checkbox样式

    //css <style> .checkbox-custom { position: relative; padding: 0 15px 0 25px; margin-bottom: 7p ...

  5. 自定义bootstrap样式-9行样式自定义漂亮大气bootstrap导航栏

    有人说前端发展太快,框架太多,各有所需,各有所长.看看这幅图,估计都知道这些框架,但是大部分公司中实际要用到的也就那么几个. 发展再快,框架再多.还是得回到原点,不就是Html+Css+JavaScr ...

  6. Flex布局和Bootstrap布局两者的比较

    在Bootstrap中采用12栅格的布局,12份随意分配,但是不能解决5等分,7等分的问题.所以flex布局来协助. bootstrap的布局方式 <div class="row&qu ...

  7. Bootstrap<基础二十四> 缩略图

    Bootstrap 缩略图.大多数站点都需要在网格中布局图像.视频.文本等.Bootstrap 通过缩略图为此提供了一种简便的方式.使用 Bootstrap 创建缩略图的步骤如下: 在图像周围添加带有 ...

  8. (新手向)基于Bootstrap的简单轮播图的手机实现

    个人电脑里存了不少适合手机欣赏的图片,但是放手机里看是件很占据资源的事.鉴于家里有一台电脑经常开着,正好用来做家庭局域网共享,于是笔者就设想通过一种比较简单环保的思路.通过手机访问电脑内的图片. 首先 ...

  9. 《深入理解bootstrap》读书笔记:第一章 入门准备

    一.bootstrap框架简介 Bootstrap是最流行的前端开发框架. 什么是框架:开发过程的半成品. bootstrap具有以下重要特性: (1)完整的CSS样式插件 (2)丰富的预定义样式表 ...

随机推荐

  1. Dede推荐文章与热点文章不显示?

    )先看看,id 文档ID,content 标签最终内容(修改此变量后必须更新系统缓存)是不是填写的id: 进入后台->系统->基本参数设置->性能选项->id 文档ID,con ...

  2. [置顶] java得到前一个月的年月日时分秒

    import java.util.Calendar; /** * 得到前一个月的年月日时分秒 * @author Mr.hu * 2013-6-28上午12:00:35 * Class Explain ...

  3. Android Apk获取包名和Activity名称

    一.使用aapt(Android Asset Packaging Tool)工具获取: 1.配置Android环境: a.添加build-tools/android路径到系统环境变量的中Path中,注 ...

  4. java字节码指令集

    字节码指令集 Java虚拟机的指令由一个字节长度的.代表着某种特定操作含义的操作码(Opcode)以及跟随其后的零至多个代表此操作所需参数的操作数(Operands)所构成. 对于大部分为与数据类型相 ...

  5. 再谈加密-RSA非对称加密的理解和使用

    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...

  6. Python高手之路【十二】面向对象设计模式

    单例模式 单例,顾名思义单个实例. class Person: __instance = None def __init__(self): pass @staticmethod def getInst ...

  7. js Checkbox 传递多个值给后台

    ------前台JS "<input class=\'jTabCheck2\' type=\'checkbox\' partvguid=" + obj + " pr ...

  8. python自动化开发-1

    1.python简介 python是一门简明并且强大的面向对象的开发语言,已经在WEB开发,软件开发,科学计算,大数据分析,自动化运维等领域得到了广泛的应用. 注意:所有测试均已python3为主,与 ...

  9. Android 6.0 M userdebug版本执行adb remount失败

    [FAQ18076]Android 6.0 M版本默认会打开system verified boot,即在userdebug和user版本会把system映射到dm-0设备,然后再挂载.挂载前会检查s ...

  10. Android Tips

    (1).设置图片缓存大小,一般可以设置为内存的1/8 int memoryCache = (int) (Runtime.getRuntime().maxMemory() / 8); (2). (3). ...