最近在学习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/ 进 ...
随机推荐
- java判断文件是否存在
1.判断远程服务器上文件 import java.net.HttpURLConnection; import java.net.URL; public boolean checkRemoteFile( ...
- 李洪强iOS经典面试题138-Block
李洪强iOS经典面试题138-Block Block Block底层原理实现 首先我们来看四个函数 void test1() { int a = 10; void (^block)() = ^{ ...
- Objective-c的内存管理MRC与ARC
Objective-c的内存管理MRC与ARC Objective-c中提供了两种内存管理机制MRC(MannulReference Counting)和ARC(Automatic Referen ...
- scp
scp -rp -P22 test.txt root@xxxx:/tmp/ scp -rp -P22 root@xxxx:/tmp/1.txt ./
- House Robber
You are a professional robber planning to rob houses along a street. Each house has a certain amount ...
- ubuntu上安装Eclipse时遇到的一个错误
A Java Runtime Environment (JRE) or Java Development Kit (JDK)must be available in order to run Ecli ...
- c# 函数练习
1.out的使用 2.100以内与7无关的数(个位数是7,十位数是7,7的倍数) 每日一句:不求与人相比,但求超越自己,要哭就哭出激动的泪水,要笑就笑出成长的性格!
- Joomla 3.2.0 - 3.4.4 无限制SQL注入漏洞
http://www.sebug.net/vuldb/ssvid-89680#0-tsina-1-18081-397232819ff9a47a7b7e80a40613cfe1 http://10.21 ...
- 括号配对nyoj2(疑问)
描述现在,有一行括号序列,请你检查这行括号是否配对. 输入 第一行输入一个数N(0<N<=100),表示有N组测试数据.后面的N行输入多组输入数据,每组输入数据都是一个字符串S(S的长 ...
- 杭电ACM 1998奇数阶魔方
#include<stdio.h>#include <string.h>int main(){ int n,m; int a[40][40]={0}; scanf(" ...