bootstrap如何自定义5列
废话少说，先上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap Grid System</title>
<!-- Bootstrap -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-2" style="width:20%">
<img data-src="holder.js/234x200?text=234x200&bg=FF7F50&outline=yes" alt=""/>
</div>
<div class="col-md-2" style="width:20%">
<img data-src="holder.js/234x200?text=234x200&bg=FF7F50&outline=yes" alt=""/>
</div>
<div class="col-md-2" style="width:20%">
<img data-src="holder.js/234x200?text=234x200&bg=FF7F50&outline=yes" alt=""/>
</div>
<div class="col-md-2" style="width:20%">
<img data-src="holder.js/234x200?text=234x200&bg=FF7F50&outline=yes" alt=""/>
</div>
<div class="col-md-2" style="width:20%">
<img data-src="holder.js/234x200?text=234x200&bg=FF7F50&outline=yes" alt=""/>
</div>
</div>
<div class="row">
<div class="col-sm-3" style="width:20%">
<img data-src="holder.js/234x200?text=234x200&bg=00FFFF&outline=yes" alt=""/>
</div>
<div class="col-sm-3" style="width:20%">
<img data-src="holder.js/234x200?text=234x200&bg=00FFFF&outline=yes" alt=""/>
</div>
<div class="col-sm-3" style="width:20%">
<img data-src="holder.js/234x200?text=234x200&bg=00FFFF&outline=yes" alt=""/>
</div>
<div class="col-sm-3" style="width:20%">
<img data-src="holder.js/234x200?text=234x200&bg=00FFFF&outline=yes" alt=""/>
</div>
<div class="col-sm-3" style="width:20%">
<img data-src="holder.js/234x200?text=234x200&bg=00FFFF&outline=yes" alt=""/>
</div>
</div>
<div class="row">
<div class="col-sm-3"><img data-src="holder.js/292x200?text=292x200&bg=2a2025&outline=yes" alt=""></div>
<div class="col-sm-3"><img data-src="holder.js/292x200?text=292x200&bg=2a2025&outline=yes" alt=""></div>
<div class="col-sm-3"><img data-src="holder.js/292x200?text=292x200&bg=2a2025&outline=yes" alt=""></div>
<div class="col-sm-3"><img data-src="holder.js/292x200?text=292x200&bg=2a2025&outline=yes" alt=""></div>
<div class="col-sm-3"><img data-src="holder.js/292x200?text=292x200&bg=2a2025&outline=yes" alt=""></div>
</div>
<div class="row">
<div class="col-sm-3"><img data-src="holder.js/292x200?text=292x200&bg=7FFF00&outline=yes" alt=""></div>
<div class="col-sm-3"><img data-src="holder.js/292x200?text=292x200&bg=7FFF00&outline=yes" alt=""></div>
<div class="col-sm-3"><img data-src="holder.js/292x200?text=292x200&bg=7FFF00&outline=yes" alt=""></div>
<div class="col-sm-3"><img data-src="holder.js/292x200?text=292x200&bg=7FFF00&outline=yes" alt=""></div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.js"></script>
<script src="https://cdn.bootcss.com/holder/2.9.4/holder.js"></script>
</body>
</html>
自己新建一个html文档，然后在浏览器中打开效果如下所示：
所以如果你要定义成5列的话只需要bootstrap的列的样式，然后重新定义列宽就好了，不要修改bootstrap本身的列宽，那样会影响你其他页面使用的。
bootstrap如何自定义5列的更多相关文章
- Ruby Rails学习中：网站导航，Bootstrap和自定义的CSS，局部视图
添加一些结构 一.网站导航 1.添加一些结构后的网站布局文件 打开文件:app/views/layouts/application.html.erb 简单介绍一下,添加的代码: 我们从上往下看一下这段 ...
- JqGrid自定义的列
$("#gridTable").jqGrid({ //...其它属性 colModel: [ //...其它列 { name: 'dsource_alarm', index: 'd ...
- SharePoint 2013 关于自定义显示列表表单的bug
1.在SharePoint 2013中,我们隐藏列表Dispform页面的ListFormWebPart部件,转而使用自定义显示列表表单进行展示,因为这样更容易定制我们需要的显示: 2.之后发现文件夹 ...
- WPF DEV gridcontrol 自定义计算列(TotalSummary)
/// <summary> /// 自定义计算列 /// </summary> /// <param name="sender"></pa ...
- JqGrid自定义(图片)列
$("#gridTable").jqGrid({ //...其它属性 colModel: [ //...其它列 { name: , align: "center" ...
- vue实现自定义表格列
在我们开发PC端的项目使用表单时,尤其是crm系统,应该经常会遇到这样的需求, 用户需要根据设置来自定义显示列. 查了element的官方文档, 并没有此类组件, 所以手动封装了一个简单的组件, 希望 ...
- Bootstrap Blazor 组件介绍 Table （二）自定义模板列功能介绍
Bootstrap Blazor 是一套企业级 UI 组件库,适配移动端支持各种主流浏览器,已经在多个交付项目中使用.通过本套组件可以大大缩短开发周期,节约开发成本.目前已经开发.封装了 70 多个组 ...
- bootstrap自定义——栅格列数修改
从下载的bootstrap文件中找到less文件夹里面的variables.less,然后可以找到栅格列数进行修改 然后执行一下bootstrap.less,通过命令行,切换到其所在的目录D:\03 ...
- Django:bootstrap table自定义查询实现
参考:https://jalena.bcsytv.com/archives/tag/bootstrap 背景: bootstrap table在客户端分页方式下,自带有简易的搜索功能,但是功能太单一, ...
随机推荐
- bzoj2229: [Zjoi2011]最小割(分治最小割+最小割树思想)
2229: [Zjoi2011]最小割 题目:传送门 题解: 一道非常好的题目啊!!! 蒟蒻的想法:暴力枚举点对跑最小割记录...绝对爆炸啊.... 开始怀疑是不是题目骗人...难道根本不用网络流?? ...
- xBIM 基础07 创建WebBIM文件
系列目录 [已更新最新开发文章,点击查看详细] xBIM项目提供了一个IFC文件的Web查看器.当你想把IFC转换成紧凑的WexBIM时,需要 xBIM Essentials 和 xBIM G ...
- BZOJ 2844 高斯消元 线性基
思路: //By SiriusRen #include <cstdio> #include <cstring> #include <algorithm> using ...
- Jlink如何校验Hex
打开SEGGER J-Flash ARM,记住必须设置好工程属性后才能校验,否则校验和为0 设置好工程属性后,直接将Hex拖入到工程中即可.在LOG窗口中会显示CRC的值 如何校验芯片中的程序的版本号 ...
- js产生随机数的几个方法
1.Math.random(); 结果为0-1间的一个随机数(包括0,不包括1) 2.Math.floor(num); 参数num为一个数值,函数结果为num的整数部分. 3.Math.round(n ...
- Swift 4.0：访问级别(访问控制)
基础篇 注: 下文中所提及的类和类型为Class, Enum和Struct Swift中的访问级别有以下五种: open: 公开权限, 最高的权限, 可以被其他模块访问, 继承及复写. public: ...
- IDEA创建Maven项目显示一直加载中的问题
使用IDEA这款工具创建Maven项目的时候出现过下面这种情况: 红色区域即maven骨架加载不出来... 或 loading loading loading ... 有时候需要很长一段时间才能加载出 ...
- Acme Corporation UVA - 11613 费用流
Code: #include<cstdio> #include<cstring> #include<vector> #include<queue> #i ...
- 洛谷P2766 最长不下降子序列问题 网络流_DP
Code: #include<cstdio> #include<iostream> #include<vector> #include<algorithm&g ...
- POJ 3134 Power Calculus (迭代剪枝搜索)
题目大意:略 题目里所有的运算都是幂运算,所以转化成指数的加减 由于搜索层数不会超过$2*log$层,所以用一个栈存储哪些数已经被组合出来了,不必暴力枚举哪些数已经被搜出来了 然后跑$iddfs$就行 ...