bootstrap2和3的差別是什麼-Bootstrap教程-PHP中文網

bootstrap2和3的差別是什麼

青灯夜游

發布： 2021-01-08 14:35:37

原創

1540 人瀏覽過

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

bootstrap2和3的差別是什麼

相關教學推薦：《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中文網其他相關文章！