bootstrap2&3

一 、表格中

1. 3增加了响应式表格 为<table>外层div添加.table-responsive类,如果屏幕很窄 此时表格会出现横向滚动条

二、 表单中

1. 3中<label>标签不能省略,即便不想显示在界面中,可以加.sr-only类

2. 官网中基本实例:3内用.form-group类隔开块,2中直接<fieldset>,2中如果想隔开块是加.control-group类

3. 对于内联表单加类.form-inline,小于一定宽度表单都会折叠,3中是768px

4. 水平表单时:3中要配合栅格系统(分栏和移位)使用,比如input外层添加div承载栅格,2中不用

5. 下拉框以列表形式显示:3中<select multiple class="form-control">,2中<select multiple="multiple">

6. 3中有表单静态控件,比如用来提示用户的<p>需要和<label>放在同一行,为<p>元素添加.form-control-static类即可

7. 2中有很多前缀后缀附加选项框的样式,3中整个表单禁用在<form>下面加<fieldset disabled>,2中加过也可以禁用,但是鼠标放上去没有禁用图标

三、按钮和图片

1.2中多一个.btn-inverse类按钮,2中没有.btn-default类

2. 默认按钮的话2中直接加.btn类,3中加.btn和.btn-default类

3. 3中按钮激活状态多加一个.active类

4.3中添加.img-responsive类可以让图片支持响应式布局,ie8-10中需要在图像显示不匀称的地方添加width:100%\9

5. 关于图标,2中用<i>承载,3中用<span>承载

时间: 2024-12-29 13:32:36

bootstrap2&3的相关文章

读bootstrap2.3.2有感1

起步: 下载编译好的bootstrap2文件,百度新版jquery.js,并复制html模版(hello world)放置在同一目录,然后看了下官网上的范例网站,心里还是很激动啊~ <!DOCTYPE html> <html> <head> <title>Bootstrap 101 Template</title> <meta name="viewport" content="width=device-widt

优质项目-Bootstrap2前端框架

Bootstrap介绍. 需要为爱上Bootstrap找N多理由吗? 就在眼前. 人人为我,我为人人. 由@mdo 和 @fat 在Twitter工作时创建,Bootstrap使用 LESS CSS 并用 Node 编译,托管在 GitHub上,方便大家使用这一框架构建更好的web应用. 任何人都可以使用. Bootstrap不光为了看起来好看,而且在现代的桌面浏览器上有极佳的表现(包括IE7!).在平板电脑和智能手机上面还有响应式CSS可以使用. 丰富的特色. 12列的响应式栅格结构.丰富的组

Bootstrap2和3的区别与选择

相信大家对Bootstrap都已经不陌生了,这个在网站建设领域赫赫有名的前端开发框架可谓是受到了全球前端工程师的推崇. 不过自从推出了Bootstrap3版本以来,国内很多朋友都在Boostrap2和3的选择上头疼不已,这两者之间到底该如何取舍呢? BOOTSTRAP2和3的区别 在之前的文章中,我们着重对Bootstrap3的新特性做了详细介绍,有兴趣的朋友可以参考一下. 从这些新特性中我们可以看到,Bootstrap3之于Bootstrap2最大的变化是移动优先.扁平化设计.以及浏览器兼容性

bootstrap2

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>bootstrap2</title> <link rel="stylesheet" href="htt

运用Bootstrap2大幅度进步用户的交互体会

基 本组件是Bootstrap2精华之一运用它能够大幅度进步用户的交互体会,里边都是开发者平时需求的交互组件.比如"网站导航"Tab工具条"面包屑"分页栏"提示标签"商品展现"提示信息块"和"进度条"等.这些组件都配有"jQueri插件.使商品不再那么板滞无吸引力 说了这么多种组件,详细该怎么运用?下面我以多见的Tab组件为例,向我们展现运用办法.要想运用BootStrap根本组件,必需满意三点:

Bootstrap2和3的区别

如果你需要兼容IE8甚至是IE7和IE6,那么只能选择Bootstrap2,虽然它自身在IE6的效果也并不完美.     但是倘若你跟随时代的脚步,并且面向的客户也很高端大气上档次地选择只需要兼容高级浏览器,那么Bootstrap3就是你不二的选择. 由于Bootstrap在国内的普及,大多数网站都采用了Bootstrap2的整套UI来开发一些web应用,所以较为小众的Bootstrap3应该可以让你的web应用脱颖而出. 总结:如果需要兼容IE678的话用2.如果需要高版本的浏览器,并且移动端

bootstrap2.0与3.0的区别

在阅读这篇bootstrap2.0与3.0的区别的文章之前,大家一定要先了解什么是响应式网站设计?推荐大家看看这篇"教你快速了解响应式网站设计" . 我觉得bootstrap的可视化网页布局是个不错的工具,Bootstrap可视化布局说了,这个工具只适用于bootstrap2.x版本,在新版本的bootstrap3.x,就不能直接使用了,不知是因为官方更新不及时还是停止更新,如果是后者,那真有点可惜了. 上面说了,新版本的bootstrap3.x不是不能使用可视化布局,而是不能直接使用

bootstrap2.3.2常用标签的使用

<!DOCTYPE html> <html lang="zh_CN"> <head> <title>Bootstrap 101 Template</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.min

BootStrap---2.表格和按钮

下面的都是类名.以后提到的如不意外都是表示类名形式,因为bootstrap大部分都是添加类名已显示效果 一.表格 1.table(基础)      基本表格   2.table-striped(基于table)   斑马线效果   3.table-bordered(基于table)   带边框   4.table-hover(基于table)   悬停实现背景效果   5.状态类(运用于tr)   5-1 .active     5-2 .success   5-3 .info   5-4 .w

bootStrap-2

全局样式: 1.移除Body的margin声明: 2.设置Body的背景色为白色: 3.为排版设置了基本的字体,字号和行高: 4.设置全局连接颜色,且当连接处于悬浮:hover状态时,才会显示下划线样式: 标题(一) 元素 字体大小 计算比例 其他 h1 36px 14px*2.60 magin-top:20px margin-bottom:10px h2 30px 14px*2.15 同上 h3 24px 14px*1.70 同上 h4 18px 14px*1.25 magin-top:10p