最近在学习bootstrap的时候用bootstrap的视频教程2.0的引用bootstrap3.0突然发现很多不同,总结了一下
bootstrap 2.3版与3.0版重要类的改变对比 | |
---|---|
Bootstrap 2.x | Bootstrap 3.0 |
.container-fluid | .container |
.row-fluid | .row |
.span* | .col-md-* |
.offset* | .col-md-offset-* |
.brand | .navbar-brand |
.nav-collapse | .navbar-collapse |
.nav-toggle | .navbar-toggle |
.btn-navbar | .navbar-btn |
.hero-unit | .jumbotron |
.icon-* | .glyphicon .glyphicon-* |
.btn | .btn .btn-default |
.btn-mini | .btn-xs |
.btn-small | .btn-sm |
.btn-large | .btn-lg |
.visible-phone | .visible-sm |
.visible-tablet | .visible-md |
.visible-desktop | .visible-lg |
.hidden-phone | .hidden-sm |
.hidden-tablet | .hidden-md |
.hidden-desktop | .hidden-lg |
.input-small | .input-sm |
.input-large | .input-lg |
.checkbox.inline .radio.inline | .checkbox-inline .radio-inline |
.input-prepend .input-append | .input-group |
.add-on | .input-group-addon |
.thumbnail | .img-thumbnail |
ul.unstyled | .list-unstyled |
ul.inline | .list-inline |
bootstrap 3.0版新增的类 | |
---|---|
属性 | 说明 |
Panels | .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse |
List groups | .list-group .list-group-item .list-group-item-text .list-group-item-heading |
Glyphicons | .glyphicon |
Jumbotron | .jumbotron |
Tiny grid (<768 px) | .col-xs-* |
Small grid (>768 px) | .col-sm-* |
Medium grid (>992 px) | .col-md-* |
Large grid (>1200 px) | .col-lg-* |
Offsets | .col-sm-offset-* .col-md-offset-* .col-lg-offset-* |
Push | .col-sm-push-* .col-md-push-* .col-lg-push-* |
Pull | .col-sm-pull-* .col-md-pull-* .col-lg-pull-* |
Input groups | .input-group .input-group-addon .input-group-btn |
Form controls | .form-control .form-group |
Button group sizes | .btn-group-xs .btn-group-sm .btn-group-lg |
Navbar text | .navbar-text |
Navbar header | .navbar-header |
Justified tabs / pills | .nav-justified |
Responsive images | .img-responsive |
Contextual table rows | .success .danger .warning .active |
Contextual panels | .panel-success .panel-danger .panel-warning .panel-info |
Modal | .modal-dialog .modal-content |
Thumbnail image | .img-thumbnail |
Well sizes | .well-sm .well-lg |
Alert links | .alert-link |
bootstrap 3.0版删除的类 | ||
---|---|---|
属性 | Removed from 2.x | 3.0 Equivalent |
Form actions | .form-actions | N/A |
Search form | .form-search | N/A |
Fluid container | .container-fluid | .container (no more fixed grid) |
Fluid row | .row-fluid | .row (no more fixed grid) |
Navbar inner | .navbar-inner | N/A |
Dropdown submenu | .dropdown-submenu | N/A |
Tab alignments | .tabs-left .tabs-right .tabs-below | N/A |
最近在学习bootstrap的时候用bootstrap的视频教程2.0的引用bootstrap3.0突然发现很多不同,总结了一下的更多相关文章
- Bootstrap3.0学习14
Bootstrap3.0学习第十四轮(分页.徽章) 前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/340 ...
- Bootstrap3.0学习第八轮
Bootstrap3.0学习第八轮(工具Class) 前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/34 ...
- Bootstrap3.0入门学习系列
Bootstrap3.0入门学习系列规划[持续更新] 前言 首先在此多谢博友们在前几篇博文当中给与的支持和鼓励,以及在回复中提出的问题.意见和看法. 在此先声明一下,之前在下小菜所有的随笔文章中, ...
- Web前端的学习介绍(截止今天还有Bootstrap没有学,要腾点时间解决掉)
Web前端的学习分为以下几个阶段,具体的学习路线图如图所示. 第一阶段——HTML的学习 超文本标记语言(HyperText Mark-up Language 简称HTML)是一个网页的骨架,无论是静 ...
- Bootstrap学习(一):Bootstrap简介
一.Bootstrap简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更 ...
- .NET MVC 学习笔记(二)— Bootstrap框架
二..NET MVC 学习笔记(一)—— Bootstrap框架 在实际开发过程中,页面的样式问题是让人很头疼的问题,良好的用户界面可以大大提高用户体检,而在你没有前端开发人员的火力支援情况下,并不是 ...
- bootstrap学习起步篇:初识bootstrap之html5语法构建hello篇(一)
目前选择使用bootstrap作为前端页面模板,是件很省心的事情.官网上给出的实例和教程也很多.在实际使用过程中,我们也许还要借助文档去了解它的元素和样式.但也不能减少我们使用他的兴趣. 我准备将其整 ...
- [Bootstrap]7天深入Bootstrap(1)入门准备
由于申请了一个域名,一个云主机,开始弄个人网站. 发现Bootstrap非常方便,和重要,故开始学习与分享关于Bootstrap的技术. 推个广告 个人网站:http://www.neverc.cn ...
- 【Bootstrap】1.初识Bootstrap
作为Web前端开发框架,Bootstrap为大多数标准的UI设计常见提供了用户友好.扩浏览器的解决方案. 1.下载Bootstrap 打开官方网址 http://getbootstrap.com/ 进 ...
随机推荐
- ACM Steps 2.1.4
Largest prime factor Time Limit: 5000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Othe ...
- matlab练习程序(SUSAN检测)
matlab练习程序(SUSAN检测) SUSAN算子既可以检测角点也可以检测边缘,不过角点似乎比不过harris,边缘似乎比不过Canny.不过思想还是有点意思的. 主要思想就是:首先做一个和原图像 ...
- 投行风云:FO的酸甜苦辣【转】
全世界收入最高的工作大概就是投行的FO前台部门 (Front Office)部门了.但在拿高薪的同时,也伴随着很多人难以想象的苦逼生活.作为投行最低层的分析师(Analyst),通常需要从早上10点工 ...
- 【iCore3 双核心板_ uC/OS-III】例程二:任务的建立与删除
实验指导书及代码包下载: http://pan.baidu.com/s/1bD7ulK iCore3 购买链接: https://item.taobao.com/item.htm?id=5242294 ...
- 【iCore3双核心板】【4.3寸液晶驱动板爆照!】
[源代码完全开源,过几天连同硬件一起发布] 花了好久的时间,我们的fpga工程师才完成这液晶模块的驱动代码,其核心价值如下: 1.完全基于fpga驱动,sdram当做缓存: 2.内建双缓冲机制:方便 ...
- SharePoint 2013 网站应用程序、网站集、网站知识整理
网站应用程序:Web 应用程序是一种可以通过Web访问的应用程序.我们自己以前用VS开发的Web应用程序一般是通过人工部署到IIS上的,而SharePoint的Web应用程序是由SharePoint安 ...
- 请求量限制方法-使用本地Cache记录当前请求量[坑]
有个需求:需要限制每个账户请求服务器的次数(该次数可以配置在DB,xml文件或其他).单位:X次/分钟.若1分钟内次数<=X 则允许访问,1分钟内次数>X则不再允许访问. 这类需求很常 ...
- wordpress搬家到本地URL修改问题
把原来服务器上面的WordPress的数据库和目录文件全部备份下来,在本地用xampp搭了一个服务器,然后将数据库和目录文件全部导入,更改conf文件中的数据库账号密码.没想到本地网站的所有CSS样式 ...
- 单身狗进化——求n!的位数
题目: 分析: 这道题目要求的是n!的位数,显然一种思路是先求出n!的值,假定为res,然后再计算res的位数,这种方法在n比较小时是可以的,如果res为int型,一旦n>16,res就会超出i ...
- rtl8723 2个 wlan
安装8723bs.ko模块之后,生成了wlan0和wlan1,MAC地址一样. http://blog.csdn.net/djman007/article/details/46731335 解决方法: ...