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)丰富的预定义样式表 ...
随机推荐
- php处理金额显示的一些笔记
最近一直在做关于结算方面的需求,也熟悉了一些处理金额显示的方法,总结如下: 1.每三位数字以逗号分隔,比如1000 => 1,000. 可以直接使用number_format函数.eg:echo ...
- 【原】tinker dex文件格式的dump工具tinker-dex-dump
序言 Tinker是微信推出的热更新开源项目,同其它热更新方案相比具有补丁包小,支持类,so,资源文件的替换等优点.其中在类替换的方案里自主研发了DexDiff算法,使得补丁包变的更小.DexDiff ...
- C语言之函数的介绍
函数的介绍 遇到的问题: 1.代码看起来特别多,不简洁 2.修改起来非常麻烦,需要所有用到的地方都修改 函数就可以解决上述这两个问题 函数可以理解为一个打包带,就是把一段代码打包起来,用到的时候只要写 ...
- android浏览器 源码共享
浏览器源码共享 [天天浏览器]拥有极为精简的内核,手机App大小在2MB以内,是市场上极省用户手机内存,极少占用手机资源,速度极快的浏览器,本身功能完整强大,是极速上网必备的利器. 源代码下载地址:h ...
- Nginx stream(TCP/UDP)负载均衡
Nginx-1.11.6编译安装 nginx编译安装,(平台:ubuntu 14.04); sudo apt-get install zlib1g-dev sudo apt-get install l ...
- [UWP小白日记-15]在UWP手机端实时限制Textbox的输入
说实话重来没想到验证输入是如此的苦逼的一件事情. 网上好多验证都是在输入完成后再验证,我的想法是在输入的时候就限制输入,这样我就不用再写代码来验证了 应为是手机端,所以不用判断其他非法字符,直 ...
- [UWP小白日记-14]正则表达式
匹配2位浮点数: ^(([1-9]+[0-9]*\.{1}[0-9]{1,2})|([0]\.{1}[1-9]+[0-9]{1,2})|([0]\.\d{1,2})|([1-9][0-9]{1,2} ...
- 2016 ACM/ICPC Asia Regional Qingdao Online 1001 I Count Two Three
Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submission( ...
- socket select()模型
转载:http://www.cnblogs.com/xiangshancuizhu/archive/2012/10/05/2711882.html 由于socket recv()方法是阻塞式的,当有多 ...
- OSI模型第四层传输层--UDP协议
1.udp协议 UDP是OSI参考模型中一种无连接的传输层协议,它主要用于不要求分组顺序到达的传输中,分组传输顺序的检查与排序由应用层完成[2] ,提供面向事务的简单不可靠信息传送服务.UDP 协议 ...