Bootstrap3.0和bootstrap2.x的区别

bootstrap已经推出了3.0的新版,看起来2.3.x版本也不会再更新了。那么bootstrap 2.3版与3.0版的区别在哪里呢?下面我们就来介绍一下。

Bootstrap 3.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版新增的类


Element


Description


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版删除的类


Element


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

原文地址:https://www.cnblogs.com/roychenyi/p/9471432.html

时间: 2024-11-09 00:02:09

Bootstrap3.0和bootstrap2.x的区别的相关文章

http1.0与http1.1的区别

http1.0与http1.1的区别 1.http1.1提供身份认证(HTTP1.1提供一个基于口令的基本认证方式,) 2.http1.1提供永久性连接(即1.0使用非持久连接,一个tcp连接只传输一个web对象,服务器完成完请求后立即断开tcp连接,服务器不跟踪每个客户也记录过去的请求,显然,这就造成访问一个包含许多图像文件的网页文件的整个过程包含了多次请求和响应,每次请求和响应需要建立一个单独的连接.客户端每次建立和关闭建立都特别费时,而且会严重影响客户与服务器的性能.HTTP1.1采用持久

Byte,TBytes,array of Byte, array[0..9] of byte的区别

Byte前面已经说是存放bit的单元,是电脑内存的基本单位,byte表示0-255中的256个数字 下面为Byte的用法: var B: Byte; // 表示0-255的数字 begin B := 1; Log(B.ToString()); //1 B := 255; Log(B.ToString()); //255 end; 下面将Char转换成Byte: var C: Char; // char 表示字符任意字符 begin C := '1'; Log(C); // 1 Log(SizeO

【Bootstrap3.0建站笔记三】AspNetPager分页,每一列都可排序

1.AspNetPager分页,实现每一列都可排序: (1).需要将默认排序字段放在HTML页面中. (2).排序字段放置为td节点的属性. 如图: 实现的效果图如: HTML代码: <div class="row"> <div class="col-lg-12 col-sm-12 col-xs-12 col-xxs-12"> <table class="table table-striped table-hover tabl

andorid 控件 Bootstrap3.0风格的控件 精美UI控件库

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包.它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架.Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成.Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目.在逛github的时候,发现有位牛人做成 android版的 bo

【Bootstrap3.0建站笔记一】表单元素排版

1.文字和输入框前后排列: 代码: <div class="row"> <div class="col-lg-12"> <div class="panel panel-default"> <div class="panel-heading"> <h2>条件查找</h2> </div> <div class="panel-body

【Bootstrap3.0建站笔记二】按钮可下拉弹出层

1.按钮可下拉弹出层: HTML代码: <div class="porpre"> <div class="input-group-btn" style="width: auto"> <a href="CustomerInformationDetails.aspx?Id=7&phone=15821789965&RecommendationNumber=54231896&tabPage=

【Bootstrap3.0建站笔记四】按钮组,连接在一起使用

1.按钮组效果如图: HTML代码: <div class="row "> <div class="form-group col-sm-7"> <div class="btn-group"> <asp:HiddenField ID="hidden_btnActive" runat="server" /> <asp:Button ID="Butt

运用webmagic,SSI框架,阿里云服务,mysql,freeMarker,bootStrap3.0,Jquery 等搭建的个人网站,有兴趣的可以来看看

网站是 电影之家, 前前后侯花了半年的时间(但真正的开发时间应该是不到一个月的,涉及技术(webmagic,SSI框架,阿里云服务,mysql,freeMarker,bootStrap3.0,Jquery)), 因为平常要上班,周末又想多休息.所以搞了那么久. 网站中运用到的技术就是标题上的那些,还有一些小的东西可能我都忘记了. 建站也是第一次,所以从申请域名 ,备案,购买服务器,上传代码,调试代码等等都是一边摸索一边做的. 就项目而言自己还是有很多收获的,也有很多经验可以分享. 欢迎大家访问网

Python3.0与Python2.X的区别

正在阅读最新版的<A byte of Python>.发现Python3.0在某些地方还是有些改变的.准备慢慢的体会,与老版本的<A byte of Python>做对比,最后再去查阅官方网站的文档. 1. 如果你下载的是最新版的Python,就会发现所有书中的Hello World例子将不再正确. Old: print "Hello World!" #打印字符串 New: print("Hello World!") 将字符串放到括号中pri