根据bootstrap源码改的1比5的栅格系统

  1. /*5等分媒体查询样式begin*/
  2. .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 {
  3. min-height: 1px;
  4. padding-left: 15px;
  5. padding-right: 15px;
  6. }
  7. .col-xs-1-5 {
  8. width: 20%;
  9. float: left;
  10. }
  11. .col-xs-4-5 {
  12. width: 80%;
  13. float: left;
  14. }
  15. @media (min-width: 768px) {
  16. .col-sm-1-5 {
  17. width: 20%;
  18. float: left;
  19. }
  20. }
  21. @media (min-width: 768px) {
  22. .col-sm-4-5 {
  23. width: 80%;
  24. float: left;
  25. }
  26. }
  27. @media (min-width: 992px) {
  28. .col-md-1-5 {
  29. width: 20%;
  30. float: left;
  31. }
  32. }
  33. @media (min-width: 992px) {
  34. .col-md-4-5 {
  35. width: 80%;
  36. float: left;
  37. }
  38. }
  39. @media (min-width: 1200px) {
  40. .col-lg-1-5 {
  41. width: 20%;
  42. float: left;
  43. }
  44. }
  45. @media (min-width: 1200px) {
  46. .col-lg-4-5 {
  47. width: 80%;
  48. float: left;
  49. }
  50. }
  51. /*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. mssql分页原理及效率分析

    下面是常用的分页,及其分页效率分析. 1.分页方案一:(利用Not In和SELECT TOP分页) 语句形式: SELECT TOP 10 * FROM TestTable WHERE (ID NO ...

  2. MarkDown/reST 文档发布流水线

    相信很多朋友都在使用Markdown或者restructuredText格式来编写一些技术文档,也会把这些文档放在github上分享给社区.GitHub提供了很好的Markdown格式解析支持,但是这 ...

  3. 谈谈new Thread的弊端及Java四种线程池的使用

    1.new Thread的弊端执行一个异步任务你还只是如下new Thread吗? new Thread(new Runnable() { @Override public void run() { ...

  4. 他们最先开发微信小程序,为何现在又退出了?

    1.当前现状 这几天大家又被微信小程序刷屏了,"得到"退出了小程序,"今日头条"暂停了服务,各种股票交易类的小程序也在证监会的要求下纷纷暂停服务.如果大家还不知 ...

  5. Java如何根据IP获取当前定位

    当今购物.旅游等服务型的网站如此流行,我们有时候也会碰到这样网站的开发. 在开发此类网站时,为了增加用户的体验感受,我们不得不在用户刚进入网站时定位到用户所在地, 更好的为用户推荐当地产品.比如去哪儿 ...

  6. Kubernetes(k8s)容器运行时(CRI)

    Kubernetes节点的底层由一个叫做"容器运行时"的软件进行支撑,它负责比如启停容器这样的事情.最广为人知的容器运行时当属Docker,但它不是唯一的.事实上,容器运行时这个领 ...

  7. YARN的capacity调度器主要配置分析

    yarn中一个基本的调度单元是队列. yarn的内置调度器: 1.FIFO先进先出,一个的简单调度器,适合低负载集群.2.Capacity调度器,给不同队列(即用户或用户组)分配一个预期最小容量,在每 ...

  8. dev gridcontrol 绑定int型及日期型的列默认当值为0时显示空白及格式化日期显示方式

    xmlns:sys="clr-namespace:System;assembly=mscorlib" 如只显示日期的时间部分 <dxg:GridColumn Header=& ...

  9. 主成分分析 R语言

    主成分分析(Principal Component Analysis,PCA), 是一种统计方法.通过正交变换将一组可能存在相关性的变量转换为一组线性不相关的变量,转换后的这组变量叫主成分. 原理: ...

  10. mysql5.7.17安装问题

    在根目录新建data文件夹和my.ini,把ini复制到bin目录下才可以