bootstrap3教程之bootstrap显示5列的方法


bootstrap是个好东西,对于CSS不是很熟悉的同学可以用它快速的做个不丑的网站。

但是bootstrap是个12栅格的系统,显示5列比较麻烦,今天我也刚好有这个需求,就稍微研究了下,并且成功了。具体的做法是:

在 head  里加载 bootstrap 的 css <link href="http://cdn.staticfile.org/twitter-bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> 之后

自己再添加几个 css class


复制代码
代码如下:

<style>
.col-lg-2dot4 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
@media (min-width: 1200px) {
.col-lg-2dot4 {
float: left;
}
.col-lg-2dot4 {
width: 20%;
}
.col-lg-pull-2dot4 {
right: 20%;
}
.col-lg-push-2dot4 {
left: 20%;
}
.col-lg-offset-2dot4 {
margin-left: 20%;
}
}
</style>

后需要显示 5 列的地方应用这个 class 即可



相关阅读:
php支付宝接口用法分析
CSS教程 彻底掌握Z-index属性
php输入流php://input使用示例(php发送图片流到服务器)
Android中Activity常用功能设置小结(包括全屏、横竖屏等)
ajax调用简单实例
JavaScript控制网页平滑滚动到指定元素位置的方法
jQuery使用中可能被XSS攻击的一些危险环节提醒
自定义min版smarty模板引擎MinSmarty.class.php文件及用法
json格式的javascript对象用法分析
jquery如何根据值设置默认的选中项
html文档中的location对象属性理解及常见的用法
JSP获取服务器时间以倒计时的形式在页面显示
绝对定位元素被遮挡的解决方法
深入探讨Java多线程中的volatile变量
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 一位阿訇的忠贞爱情 帮长辈做事作文 选择与追求 第一次坐飞机作文450字 皮皮鲁和蜘蛛表读后感 萦绕的情绪 大学联谊会开场白 爱情学分 公司年会三句半台词 承受不起的痛 珍惜美好时光550字 洒落的幸福玻璃球你捡了多少 对XX年工作的一点思考 奇遇550字 读《建设幸福中国》有感 天堂的苏州城南 鹧鸪天(败棋赋梅雨) 情感日志 其实幸福很简单 堆雪人心理美滋滋的550字 随即作文500字 教师年度考核个人总结及自评 我与“良师益友”作文900字 浣溪沙(别成上人并送性禅师) 5年级清明节作文 “开罐即发”550字 和睦家庭事迹 团支部书记竟职演讲 现代诗赏析 不曾被记起 重阳节对老人的祝福语 看电影日记100字 留点娱乐时间给自己作文 高桩儿蒸馍 《山居秋暝》公开课教案 教育教学小故事—《忏悔》 心恋之随笔 科学发展观综合分析思想汇报 关于实施全民创业工程的意见 给朋友的一封信作文 管理局“三严三实”专题教育开展情况汇报 模范教师主要事迹材料 醇厚反义词,醇厚近义词,醇厚造句 蟹子 那依然盛开的玫瑰花 请你好好珍惜它吧 阿姨家快乐的一天 散忆 爱情经典语录:爱情是一个人对另一个人习惯的认同 欠你一个冬天 幸福就是一场雨雪

Copyright © 2016 phpStudy |