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

   2015-11-09 0
核心提示:这篇文章主要介绍了bootstrap3显示5列的方法,bootstrap是个12栅格的系统,显示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 即可

 
标签: bootstrap3
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • Bootstrap3基础 input-group glyphicon 输入框组与glyphicon图标
    Bootstrap3基础 input-group glyphicon 输入框
     内容参数  OS  Windows 10 x64  browser  Firefox 65.0.2  framework    Bootstrap 3.3.7  editor  Visual Studio Code 1.32.1    typesetting  Markdown code!DOCTYPE htmlhtml lang="zh-CN"headmeta charset="UTF-8"!-- IE将使
    03-08
  • Bootstrap3基础 img-thumbnail 给图片加一个圆
     内容参数  OS  Windows 10 x64  browser  Firefox 65.0.2  framework    Bootstrap 3.3.7  editor  Visual Studio Code 1.32.1    typesetting  Markdown code!DOCTYPE htmlhtml lang="zh-CN"headmeta charset="UTF-8"!-- IE将使
    03-08
  • Bootstrap3基础 img-rounded 图片的四个角改成
     内容参数  OS  Windows 10 x64  browser  Firefox 65.0.2  framework    Bootstrap 3.3.7  editor  Visual Studio Code 1.32.1    typesetting  Markdown code!DOCTYPE htmlhtml lang="zh-CN"headmeta charset="UTF-8"!-- IE将使
    03-08
  • Bootstrap3基础 input-group-btn 按钮与输入框 横向组合
    Bootstrap3基础 input-group-btn 按钮与输入框
     内容参数  OS  Windows 10 x64  browser  Firefox 65.0.2  framework    Bootstrap 3.3.7  editor  Visual Studio Code 1.32.1    typesetting  Markdown code!DOCTYPE htmlhtml lang="zh-CN"headmeta charset="UTF-8"!-- IE将使
    03-08
  • Bootstrap3基础 nav 便签页(横版、竖版)
    Bootstrap3基础 nav 便签页(横版、竖版)
     内容参数  OS  Windows 10 x64  browser  Firefox 65.0.2  framework    Bootstrap 3.3.7  editor  Visual Studio Code 1.32.1    typesetting  Markdown code!DOCTYPE htmlhtml lang="zh-CN"headmeta charset="UTF-8"!-- IE将使
    03-08
  • typeahead 表单,为用户提供提示或数据。自动补全bootstrap3-typeahead.js
    typeahead 表单,为用户提供提示或数据。自动补
    typeahead.js  bootstrap3-typeahead.js 还有jQuery ui 插件autocomplete先说bootstrap3-typeahead.js符合bootstrap样式格式但是功能没有衍生typeahead.js强大:官网:https://github.com/bassjobsen/Bootstrap-3-Typeahead/菜鸟网站上:http://www.runoob.c
    03-08
  • bootstrap3 三级下拉菜单
    !DOCTYPE HTML html lang="zh-CN"headmeta charset="UTF-8"titleBootstrap 3 的多级下拉菜单示例/titlescript type="text/javascript" src="js/jquery-3.2.1.js"/scriptlink rel="stylesheet" href="css/bootstrap.min.css&qu
    03-08
  • phpstrom安装bootstrap3插件
    phpstrom安装bootstrap3插件
    1.步骤File SettingsPlugins 搜索bootstrap 3 然后点击 Browse repositories 就会有一个弹框,如下:(认准作者@epragt) 2. 上图是已经安装好了的界面,没有安装的会有一个install按钮,点击安装点击apply然后重启phpstrom就行了。3.使用:打开phpstrom,在
    03-08
  • 练手THINKPHP5过程和bootstrap3.3.7 thinkphp5
    1 在GIT上下载了最新版的源码,同时安装composer 用composer更新git地址https://github.com/top-think/think 2 搭建本地开发环境,开启url重写模块,记得配置默认网站的访问目录是public/index.php同时.htaccess 是在public目录下把如下代码复制到 .htaccess
    03-08
  • PHPStorm中使用bootstrap3控件!
    PHPStorm中使用bootstrap3控件!
    PHPStorm中使用bootstrap3控件!奇怪为什么不自动提示呢?原来需要Ctrl+j才显示出来!很方便的控件!!!!
    02-08
点击排行