bootstrap2と3の違いは何ですか-ブートストラップのチュートリアル-php.cn

bootstrap2と3の違いは何ですか

青灯夜游

リリース： 2021-01-08 14:35:37

オリジナル

1551 人が閲覧しました

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

bootstrap2と3の違いは何ですか

おすすめの関連チュートリアル: 「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-inner`N/A
Navbar の垂直分割線	#.navbar .divider-vertical
		##ドロップダウンサブメニュー
		#タブの配置
	`.tabs-below`	N/A
Nav lists	`.nav-list` `.nav-header`直接等の样式はありませんが、グループをリストします和	類似の
	#Bootstrap3 からのフレームには、パッケージ全体の移動が含まれています

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