bootstrap2和3的差別是什麼

區別：1、Bootstrap3支援行動端優先，Bootstrap沒有；2、Bootstrap2採用漸變凹凸風格，Bootstrap3採用扁平化設計風格；3、bootstrap3的瀏覽器相容性方面比Bootstrap2好。

相關教學推薦：《bootstrap教程》

#做專案時，有時也會參考別的案例的優秀之處。在用Bootstrap的時候，發現很多專案程式碼都有差別，在

佈局class上，有用.span*，有用.col-md-*，其實是Bootstrap版本升級，語法也變了。

Bootstrap3中被修改的樣式

.navbar-toggle##. navbar-btn##.jumbotron.btn .btn-default.btn-xs.btn-sm.btn-lg.alert-danger.visible-xs.visible-sm分成了 .visible-md .visible-lg.hidden-xs.hidden-sm分成了 .hidden-md .hidden-lg.input-sm#.input-large#.checkbox.inline  #.input-group##.add- on.input-group-addon#.img-polaroid.img-thumbnailul.unstyled.list-unstyled#ul.inline.list-inline. muted.text-muted.label.progress-bar.bar-*.progress-bar-*.accordion

Bootstrap 2.x	Bootstrap 3.x
.container-fluid	.container
##.row-fluid	.row
.span*	.col-md-*
.offset*	.col-md- offset-*
.brand	#.navbar-brand
	#.nav-collapse
.navbar-collapse	##.nav-toggle
	#.btn-navbar
	.hero-unit
	.icon-*
.glyphicon .glyphicon-*	##.btn
	#.btn-mini
	.btn-small
	.btn-large
	. alert-error
	#.visible-phone
	.visible-tablet
	.visible-desktop
	#.hidden-phone
	.hidden-tablet
	#.hidden-desktop
	#.input-small
	#.input-lg
##.control-group.form-group
.radio.inline	.checkbox-inline .radio-inline
. input-prepend	.input-append
	##. label .label-default
.label-important	.label-danger
#.text-error	.text-danger
. table .error	.table .danger
.bar

#########.panel-group##################. accordion-group############.panel .panel-default##################.accordion-heading######## #####.panel-heading##################.accordion-body############.panel-collapse####### ###############.accordion-inner#############.panel-body##############

Bootstrap3.x中新增的樣式

##面板##清單群組 #.list-group。 Jumbotron超小網格（#.col-xs-*小網格（≥768px）.col-md-*響應式公用程式類別（≥1200px）偏移##.col-sm-offset-*.col-md-offset-*#.col-sm-push-*. col-md-push-*#拉.col-sm -pull-*輸入群組. input-group.input-group-btn##表單控制項 .form-group#合理標籤/藥丸##響應式圖片.success.danger##上下文面板 .panel-warning 

#頁面元素	描述
	#.panel .panel-default .panel-body# .panel-title .panel-heading.panel-footer.panel-collapse
	.list-group-item .list-group-item-text.list-group-item-heading
	##Glyphicons##.glyphicon
	#.jumbotron
	#.col-sm-*中網格（≥992px）
	#大網格（≥1200px）.col-lg- *
	#.visible-lg .hidden-lg
	.col-lg-offset- *Push
	.col-lg-push-*
	.col-md-pull-* .col-lg-pull-*
	.input-group-addon#
	.form-control
	##按鈕群組大小.btn-group-xs  .btn-group-sm .btn-group-lg
#導覽列文字	.navbar-text導覽列標題##.navbar-header
	##.nav-justified
#.img-responsive	##上下文表格列
	.warning .active
	.panel-success .panel-danger

.panel-info

Modal##.modal-dialog.modal-content縮寫.img-thumbnail#井尺寸.well-sm# 從2.x版本導入.form-actions##N/A#搜尋表單 ##N/A##流體容器# （不再固定）#.row-fluid.row.form-group

.well-lg	##警報連結	#.alert-link
	Bootstrap3.x中被刪除的樣式	頁面元素
3.x版本對應的元素		表單操作
		.form -search##N/A
使用資訊形成群組	##.control-group.info
		#.container-fluid
.container	##流體行
	（不再進行固定）##控制項包裝.controls	##N/A
	#控制項行.controls-row	.row 或

• 
  

################# #### ##導覽列內部########.navbar-inner########N/A############導覽列垂直分隔線## ###### ##.navbar .divider-vertical########N/A############ ###### ####### ## ##### ####下拉子選單########.dropdown-submenu##########N/A############製表符對齊##### ####.tabs-left### ###.tabs-right######.tabs-below#########N/A#### ####### #Nav 清單########.nav-list#### ###.nav-header########## 沒有直接對等的樣式，但是和列表組和## #.panel-groups###相似###############且############自Bootstrap3開始，框架包含了貫穿整個庫的移動######設備######Bootstrap2採用凹凸風格，Bootstrap3採用淺化設計風格############bootstrap3的過渡器相容方面比Bootstrap2好######如果你需要相容IE8甚至是IE7和IE6，那就只能選擇Bootstrap2，雖然它本身在IE6的效果也不太完美。############

以上是bootstrap2和3的差別是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn