By default Bootstrap does not provide grid system that allows us to create five columns layout, but as you can see it’s quite simple.
At first you need to create default column definition in the way that Bootstrap do it. I called my classes col-..-15.
.col-xs-15, .col-sm-15, .col-md-15, .col-lg-15 { position: relative; min-height: 1px; padding-right: 10px; padding-left: 10px; }
Next you need to define width of new classes in case of different media queries.
.col-xs-15 { width: 20%; float: left; } @media (min-width: 768px) { .col-sm-15 { width: 20%; float: left; } } @media (min-width: 992px) { .col-md-15 { width: 20%; float: left; } } @media (min-width: 1200px) { .col-lg-15 { width: 20%; float: left; } }
Now you are ready to combine your classes with original Bootstrap classes. For example, if you would like to create div element which behave like five columns layout on medium screens and like four columns on smaller ones, you just need to use something like this:
<div class="row"> <div class="col-md-15 col-sm-3"> ... </div> </div>
参考:http://www.wearesicc.com/quick-tips-5-column-layout-with-twitter-bootstrap/
按照以上的方法,我们可以很容易的创造出更多栏出来!
原文/转自: Bootstrap 3 : 实现5栏设计 5 columns layout with Twitter Bootstrap
相关推荐
用bootstrap4实现侧边导航栏并且带隐藏按钮。效果就是,点击按钮侧边导航栏出现,再点击消失。不用bootstrap也可以实现
bootstrap5-offcanvas-navbar:Bootstrap5:画布导航栏
这是一个 bootstrap3 的侧边导航栏,东西大家应该都很熟习。希望对大家有所帮助
Layoutit bootStrap3 拖拽功能
twitter-bootstrap-rails-confirm, 使用 Twitter Bootstrap 确认对话框 :: bootstrap:: bootstrap:: rails::这里 gem 添加一些javascript来更改 Boostrap 2.3和 4的数据确认处理的默认行为。正常确认对话框显示带有...
资源名称:Bootstrap期末课程设计 内容使用语言:HTML5+css3+js+bootstrap框架 使用/学习场景:完成整个学期成果,了解框架的好处 应用场景:对于使用框架对于完成一个网页的实现更加容易 特点:加深对前端语言的...
Twitter Bootstrap:前端框架利器.pdf
A hands-on introduction to building websites with Twitter Bootstrap's powerful front-end development framework Conquer responsive website layout with Bootstrap’s flexible grid system Leverage ...
该资源为Bootstrap模态框练习的源码,里面包含了项目所需要的bootstrap.min.css、bootstrap.js、jquery-1.12.4.js文件
twitter-bootstrap-admin, 使用 Twitter Bootstrap的管理界面 Twitter Bootstrap 管理这个项目为基于 Twitter Bootstrap的管理界面提供了一个基本的HTML模板。有 5页模板:index.html: 带有密码恢复选项的登录页面...
Twitter Bootstrap Web Development
bootstrap3-layoutit 汉化版本 bootStrap3在线编辑器源码
这个里面 包含整个bootstrap源程序 你所需要的都在了、里面.Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。 本教程将向您...
基于bootstrap-table 实现 右侧列固定,也可以针对左侧列固定,针对操作列使用起来非常方便,引用jquery、bootstrap-table-fixed 样式和js文件后,可以随意设置,灵活。 fixedColumns: true,//fixedtNumber:2, //...
bootstrap模板bootstrap模板bootstrap模板bootstrap模板bootstrap模板
Bootstrap网站 -Bootstrap 5 ve Bootstrapikonlarıkullanılarakminumum harici Cssyardımıylahazırlanmışwebsitesi- //ozc9n.github.io/BootstrapWebsite/
fastadmin 表格添加固定表头 bootstrap-table-fixed-columns所需插件
下载过来的,改了一下,基本满足需求,访问地址: bootstrap-fileinput-master\examples\demo.html
Bootstrap WYSIHTML5: http://jhollingworth.github.io/bootstrap-wysihtml5/ CKEditor: http://ckeditor.com/ Bootstrap Wizard: https://github.com/gilluminate/Bootstrap-Wizard Sparkline: ...
Amdash是基于Bootstrap5框架实现的后台管理模板。它有多个仪表盘样式,工作在所有主要浏览器、桌面和所有智能手机设备上。非常易于定制和开发人员友好的HTML5模板。集合与最新jQuery UI组件和bootstrap插件。它可以...