最近在学习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/ 进 ...
随机推荐
- MyBatis调用存储过程,含有返回结果集、return参数和output参数
Ibatis是我们经常使用的O/R映射框架,mybats是ibatis被Google收购后重新命名的一个工程,当然也做了大量的升级.而调用存储过程也是一次额C/S架构模式下经常使用的手段,我们知道,i ...
- iOS开发-二维码扫描和应用跳转
iOS开发-二维码扫描和应用跳转 序言 前面我们已经调到过怎么制作二维码,在我们能够生成二维码之后,如何对二维码进行扫描呢? 在iOS7之前,大部分应用中使用的二维码扫描是第三方的扫描框架,例如Z ...
- 1063. Set Similarity (25)
1063. Set Similarity (25) 时间限制 300 ms 内存限制 32000 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue Given ...
- [LintCode] Divide Two Integers 两数相除
Divide two integers without using multiplication, division and mod operator. If it is overflow, retu ...
- Lrucache缓存技术
在Android中,有一个叫做LruCache类专门用来做图片缓存处理的. 它有一个特点,当缓存的图片达到了预先设定的值的时候,那么近期使用次数最少的图片就会被回收掉. 步骤: (1)要先设置缓存图片 ...
- HDU2563 递推
统计问题 Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submis ...
- poj1700
这题的最坑的地方就是每步可能会有两种情况,这两情况起初我都单独考虑了,但就是没放在一起考虑...wa个不停,果然贪心是一个很考验思维的东西. 这里可以这样考虑,在运人的过程中,河的起始岸最后终将剩下一 ...
- Spring的特点
创始人:Rod Johson1.特点: a:方便解耦和,简化开发,提升性能 b:AOP面向切面的编程 c:声明式事务支持 d:方便程序的调式 e:方便集成各大优秀的框架 f:java源代码学习的典范 ...
- cocos2d-x-3.1.1 创建项目
cocos new 项目名 -p 包名 -l 语言 -d 路径 cmd 输入以下命令 cocos new HelloLua -p com.wcc.hellolua -l lua -d E:\coc ...
- Mysql的时间和日期
datetime 占8个字节 可以显示日期同时显示时间 yyyy-mm-dd hh:mm:ss 显示范围 1000-01-01 00:00:00----9999-12-31 23:59 ...