最近在学习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/ 进 ...
随机推荐
- Oracle连接超时
客户机 要想 连接 oracle服务机(装了数据库的机子),只需要在客户机配置一个 本地服务名就行了,不管你用Oracle服务端的配置工具 还是客户端的配置工具,都没有问题. 如果只是客户机连接服务机 ...
- 李洪强iOS经典面试题132-版本控制
面试过程中,可能会问及一些关于版本控制的问题,理解下SVN和Git的原理,记住常用命令即可. SVN SVN 是集中式源代码管理工具 概念: 1> Repository 代码仓库,保存代码的仓库 ...
- Odoo 配置快速创建编辑按钮
对于Man2one类型的数据,我们知道,form view中总会显示出一个尾巴似的"create and edit"和一个快速创建的机制,有时候业务人员一不小心就容易创建一个新的行 ...
- CentOS6设置密码过期时间
#密码过期时间180天chage -M 180 rootchage -l rootchage -M 180 gwchage -l gw
- thinkphp关联模型的用法
HAS_ONE(值得注意的是,这是主动关联,外键必须是被关联的表): <?php namespace Home\Model; use Think\Model\RelationModel; cla ...
- 谷歌浏览器安装adblock广告屏蔽插件
访问不到google的应用商店的话,就从网上直接查找adblock for chrome.打开浏览器的开发者模式,下载解压后直接拖拽到浏览器即可.下载地址http://www.cr173.com/so ...
- [转]理解Linux系统中的load average
转自:http://heipark.iteye.com/blog/1340384 谢谢,写的非常好的文章. 一.什么是load average linux系统中的Load对当前CPU工作量的度量 (W ...
- 【HDU4612】 双连通分量求桥
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4612 题目大意:给你一个无向图,问你加一条边后最少还剩下多少多少割边. 解题思路:好水的一道模板题.先 ...
- 修改SQL Server 2005 数据库文件名字
对于SQLServer 2005的数据库文件名字的修改.不多说,见图: 对于数据库名的更改直接选中要修改的数据库,F2,你懂的,不懂的可以去屎了.....0.0 下面要修改数据库的文件名 原理就是利用 ...
- 西部数据出现“WD SES Device USB Device”怎么办,而且说明书全是英文。
您好.wd ses device driver这个驱动程序可以在baidu中输入关键词找到,什么驱动之家.驱动人生之类的专业驱动网站也都是有的. western digital的移动硬盘驱动程序安装步 ...