bootstrap2と3の違いは何ですか

相違点: 1. Bootstrap3 はモバイル ファーストをサポートしていますが、Bootstrap はサポートしていません; 2. Bootstrap2 はグラデーション バンプ スタイルを使用しますが、Bootstrap3 はフラット デザイン スタイルを使用します; 3. Bootstrap3 は Bootstrap2 よりもブラウザ互換性が優れています。

おすすめの関連チュートリアル: 「bootstrap チュートリアル 」

プロジェクトを行う際に、他の事例を参考にすることがあります。優れた点。 Bootstrap を使用すると、多くのプロジェクト コードが異なることがわかりました。

レイアウト クラスでは、.span* が便利で、.col-md-* が便利です。実際、Bootstrap のバージョンがアップグレードされ、構文も変更されていますかわった。

Bootstrap 3 の変更されたスタイル

##.span*.col-md-*.offset*.col-md-offset-*.brand.nav-collapse.btn .btn-default# #.btn-xs.btn-small.btn-sm.btn-large.btn-lg##.visible-sm##.visible-desktop に分割されます.hidden-phone.hidden-tablet##.hidden-desktop.input-small.input-large#.control-group .radio.inline#.input-group##.img-polaroid.img-thumbnailul.unstyled.list-unstyledul.inline.list-inline.ミュート.text-muted. text-error.text-danger.table .error.table .danger##.bar.bar-*.accordion .accordion-group.accordion-Heading.accordion-body .accordion-inner

Bootstrap 2.x

Bootstrap 3.x

.container-fluid

.container

.row-fluid

##.row

.navbar-brand

#.navbar-collapse

##.nav-toggle

.navbar-toggle

.btn-navbar

.navbar-btn

.ヒーローユニット

.ジャンボトロン

.icon-*

.glyphicon .glyphicon-*

##.btn

##.btn-mini

#.alert-error

.alert-danger

##.visible-phone

.visible-xs

#.visible-tablet

# は .visible-md .visible-lg

.hidden-xs

.hidden-sm

は .hidden-md .hidden に分割されます-lg

.input-sm

.input-lg

.form-group

##.checkbox.inline

.checkbox-inline

.radio-inline

.input-prepend .input-append

##.add- on

.input-group-addon

##.label

.label-default

.ラベル-重要

##.ラベル-危険

.progress-bar

##.progress-bar-*

.panel-group

.panel .panel-default

.panel-Heading

.panel-collapse

.panel-body

Bootstrap3.x の新しい機能

#グループのリスト #.list-groupグリフィコン.glyphiconJumbotron.jumbotron#極小グリッド (<768px) ##小グリッド (≥768px)中グリッド (≥992px)大きなグリッド (≥1200px)レスポンシブ ユーティリティ クラス (≥1200px)オフセットPushPull入力グループフォーム コントロールボタン グループのサイズナビゲーションバーのテキストNavbar ヘッダー両端揃え錠剤/錠剤レスポンシブ画像コンテキストテーブルの行コンテキストパネルModal#.img-thumbnail.well-sm.alert-linkBootstrap3.x から削除されたもの

表面要素	説明
パネル	.panel .panel-default .panel-body .panel-title .panel-Heading.panel-footer.panel-collapse
	.list-group-item .list-group-item-text.list-group-item-Heading
.col-xs-*
.col-sm-*
.col-md-*
.col-lg-*
.visible-lg	.hidden-lg
.col-sm-offset-*	.col-md-offset-* .col-lg-offset- *
.col-sm-push-*	.col-md-push-* .col-lg-push-*
.col-sm-pull-*	.col-md-pull-* .col-lg-pull-*
。 input-group	.input-group-addon .input-group-btn
.form-control	.form-group
.btn-group-xs	.btn-group-sm .btn-group-lg
.navbar-text
.navbar-header
.nav-justified
.img-sensitive
.success	.danger .warning .active
.panel-success	.panel-danger .panel-warning .panel-info
.modal-dialog	.modal-content#サムネイル画像
	#ウェルサイズ
.well-lg	アラート リンク

#页面要素

2.x バージョン中の削除3.x バージョン中の関連要素フォーム アクション.form-actionsN/AN/A# を含むフォーム グループ#.container-fluid.container.rowN/A#コントロール行.row または者N/A#.ドロップダウン サブメニュー##N/A.tabs-left.tabs-right.panel-groups# および #Bootstrap2 は変動凹凸設計を採用し、Bootstrap3 は扁平化設計を採用しています。bootstrap3 のデバイス互換性の点では、Bootstrap2 よりも優れています。推奨 #IE8 と IE7 および IE6 の互換性が必要な場合は、Bootstrap2 のみを選択できますが、IE6 自体の効果も完全ではありません。

#N/A	#検索フォーム	#.form-search
	info	.control-group.info
	##流体コンテナ
(固定は行われません)	流体 row	.row-fluid
(再固定は行わない)	コントロール ラッパー	#.controls
	.controls-row
.form-group	#Navbar inner	.navbar-innerN/A
Navbar の垂直分割線	#.navbar .divider-vertical
		##ドロップダウン サブメニュー
		#タブの配置
	.tabs-below	N/A
Nav lists	.nav-list .nav-header直接等の样式はありませんが、グループをリストします 和	類似の
	#Bootstrap3 からのフレームには、パッケージ全体の移動が含まれています

以上がbootstrap2と3の違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。