Bootstrap のアダプティブスクリーンに関する簡単な説明-ブートストラップのチュートリアル-php.cn

Bootstrap のアダプティブスクリーンに関する簡単な説明

青灯夜游

リリース： 2021-05-12 11:16:08

転載

4580 人が閲覧しました

この記事では、Bootstrap のアダプティブスクリーンについて説明します。一定の参考値があるので、困っている友達が参考になれば幸いです。

Bootstrap のアダプティブスクリーンに関する簡単な説明

Bootstrap は、HTML.css.javaScript に基づいて開発された、シンプルで直感的かつ強力なフロントエンド開発フレームワークであり、Web 開発者が応答性の高い Web ページを迅速に作成できるようにします。 [関連する推奨事項: "bootstrap チュートリアル "]

bootstrapadaptive:

Bootstrap は、デバイスを超小型画面と小型画面に分割します。画面サイズ中画面、大画面の 4 種類があり、画面は 12 列に分割されており、対応する画面幅は次のとおりです:

超小型画面 (携帯電話): 0-768px対応する設定 class=col-xs-number
小画面 (タブレット): 768-992px 対応する設定 class=col-sm-number
中画面 (コンピュータ): 992-1200px 対応する設定 class=col-md-
# 大画面 (コンピュータ): 1200px-? 対応する設定 class=col-lg-number

Chrome ブラウザの要素ウィンドウで、画面幅が768 未満の場合は、com-xs-12 のみが有効になります。

適応型: ブートストラップフレームワークを使用して、Web ページがさまざまなデバイスに適応します。

原則: メディア (デバイス/ブラウザー) クエリ @media画面のみデバイスの幅をクエリします。

最下層には @media のみの画面が表示され、(min-width: 最小値) および (max-width: 最大値):

背景ペアの例:

@media only screen and (min-width:0px) and (max-width:480px){
body{
background-color:red;
}
}
@media only screen and (min-width:481px) and (max-width:720px){
body{
background-color:green;
}
}
@media only screen and (min-width:721px){
body{
background-color:blue;
}
}

ログイン後にコピー

例 2: ブロックレベル要素の統合と適応 p

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<style type="text/css">
div{
float:left;
}
/**小屏0px-768px*/
@media only screen and (min-width:0px) and (max-width:768px){
.sm-12{
width:100%;
	}
}
/**大屏768*/
@media only screen and (min-width:768px){
.lg-6{
width:50%;
	}
}

</style>
<!-- 两个样式不会同时生效 在小屏上sm-12生效, width是100%在大屏上lg-6生效,width50%
css中标签分块级标记和行级标记,div是块级元素 -->
<div class="sm-12 lg-6">div1</div>
<div class="sm-12 lg-6">div2</div>
</body>
</html>

ログイン後にコピー

bootstarp
ステップ

#1. リンクタグで bootstrap.css ファイルを導入します## 2. bootstrap で定義します## 1) ルート要素は p である必要があり、クラス値はコンテナ## と等しい必要があります# 2) ルート要素には、行要素と行要素のクラス値が row
と等しい必要があります。 3) 行に含まれる列クラスの値は、col-*-number

である必要があります。
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="bootstrap.css" rel="stylesheet" type="text/css">
</head>
<body>

<div class="container">

<div class="row">

<div class="col-xs-12 col-sm-6 col-md-4">div1</div>
<div class="col-xs-12 col-sm-6 col-md-4">div2</div>
<div class="col-xs-12 col-sm-6 col-md-4">div3</div>
</div>
<div class="row"></div>
</div>
</body>
</html>
ログイン後にコピー
その他のプログラミング関連の知識については、プログラミング入門
をご覧ください。！
以上がBootstrap のアダプティブスクリーンに関する簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

Bootstrap のアダプティブ スクリーンに関する簡単な説明

Bootstrap のアダプティブスクリーンに関する簡単な説明