bootstrap_html/css_WEB-ITnose に関する予備調査
- ブートストラップ リソース
- http://getbootstrap.com
- http://github.com/twbs
- http://www.bootcss.com
- ブートストラップ グリッド システム
- コンテナ: 流体 (コンテナ-fluid)、固定 (コンテナ)
- 12 列に分割、しきい値解像度 >= 1200、コンテナの固定サイズは 1170px、しきい値が 992 ～ 1200 の場合、コンテナの固定サイズは 970px、解像度は 992 未満、778 以上は 750px、778px 以下は自适应、不固定の解像度值
-
<!DOCTYPE HTML><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/bootstrap.css"> <style> .container{ border:1px #000 solid;} </style> </head><body><!--<div class="container-fluid"> aaaaaaaaa</div>--><div class="container"> aaaaaaaaa</div></body> <script src="js/jquery-2.1.3.js"></script> <script src="js/bootstrap.js"></script></html>ログイン後にコピー - 分別 12 列、可決列数确定、デモ如下
-
リーリー
- 異なる分辨率の下、col-* が設定されている場合は、col-lg を特大解像度、col-md を中解像度、col-sm をパッドのようなサイズ、col-xs をモバイル デバイスに設定します。 、それより小さい場合は、対応する解像度に従って表示されます。対応する解像度は数行になります。デモは次のとおりで、単独で実行できます。対応するデモ画像は
-
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 <link rel="stylesheet" href="css/bootstrap.css"> 9 <style>10 .container{ border:1px #000 solid; background: #CCC;}11 div[class*=col-] { color: white; border: 1px solid red;}12 </style>13 </head>14 <body>15 16 <div class="container">17 <div class="col-lg-1">col-lg-1</div>18 <div class="col-lg-11">col-lg-1</div>19 </div>20 21 </body>22 <script src="js/jquery-2.1.3.js"></script>23 <script src="js/bootstrap.js"></script>24 </html>ログイン後にコピー - レイアウトを組み合わせて、複数のクラスを設定でき、解像度が 1 つの値の場合は次のようになります。あるクラスが表示されているときに、解像度を別のクラスに変更すると、次のように別のクラスに従って表示されます。以下のデモでは、解像度が 1200 より大きい場合、col-lg に従って 4 列が表示されます。解像度が 1200 未満で 992 を超える場合は、col-md に従って 4 列が表示されます
-
<!DOCTYPE HTML><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/bootstrap.css"> <style> .container{ border:1px #000 solid; background: #CCC;} div[class*=col-] { color: white; border: 1px solid red;} </style> </head><body><!--div class="container"> <div class="col-lg-1">col-lg-1</div> <div class="col-lg-11">col-lg-1</div></div--><div class="container"> <div class="row"> <div class="col-lg-4">col-lg-4</div> <div class="col-lg-4">col-lg-4</div> <div class="col-lg-4">col-lg-4</div> </div> <div class="row"> <div class="col-md-4">col-md-4</div> <div class="col-md-4">col-md-4</div> <div class="col-md-4">col-md-4</div> </div> <div class="row"> <div class="col-sm-4">col-sm-4</div> <div class="col-sm-4">col-sm-4</div> <div class="col-sm-4">col-sm-4</div> </div> <div class="row"> <div class="col-xs-4">col-xs-4</div> <div class="col-xs-4">col-xs-4</div> <div class="col-xs-4">col-xs-4</div> </div></div></body> <script src="js/jquery-2.1.3.js"></script> <script src="js/bootstrap.js"></script></html>ログイン後にコピー - 列オフセットcol-lg-offset-4、右に4グリッド距離をオフセット、デモは次のとおり、コード実行効果は次のとおりです
-
<!DOCTYPE HTML><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/bootstrap.css"> <style> .container{ border:1px #000 solid; background: #CCC;} div[class*=col-] { color: white; border: 1px solid red;} </style> </head><body><div class="container"> <div class="row"> <div class="col-lg-3 col-md-4">col-lg-3 col-md-4</div> <div class="col-lg-3 col-md-4">col-lg-3 col-md-4</div> <div class="col-lg-3 col-md-4">col-lg-3 col-md-4</div> <div class="col-lg-3 col-md-4">col-lg-3 col-md-4</div> </div></div></body> <script src="js/jquery-2.1.3.js"></script> <script src="js/bootstrap.js"></script></html>ログイン後にコピー最大オフセットは 12 です。12 より大きい場合、効果はありません。デモとコードの実行効果は次のとおりです -
<!DOCTYPE HTML><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/bootstrap.css"> <style> .container{ border:1px #000 solid; background: #CCC;} div[class^=col-] { color: white; border: 1px solid red;} </style> </head><body><div class="container"> <div class="row"> <div class="col-lg-3">col-lg-3</div> <div class="col-lg-3">col-lg-3</div> <div class="col-lg-3">col-lg-3</div> <div class="col-lg-3">col-lg-3</div> </div> <div class="row"> <div class="col-lg-4 col-lg-offset-3">col-lg-4</div> </div></div></body> <script src="js/jquery-2.1.3.js"></script> <script src="js/bootstrap.js"></script></html>ログイン後にコピー 列の並べ替え Col-lg-push は前に戻ります。右) 数回、col-lg-pull が前方 (左) に数回移動します -
<!DOCTYPE HTML><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/bootstrap.css"> <style> .container{ border:1px #000 solid; background: #CCC;} div[class^=col-] { color: white; border: 1px solid red;} </style> </head><body><div class="container"> <div class="row"> <div class="col-lg-3">col-lg-3</div> <div class="col-lg-3">col-lg-3</div> <div class="col-lg-3">col-lg-3</div> <div class="col-lg-3">col-lg-3</div> </div> <div class="row"> <div class="col-lg-4 col-lg-offset-13">col-lg-4 col-lg-offset-13</div> </div></div></body> <script src="js/jquery-2.1.3.js"></script> <script src="js/bootstrap.js"></script></html>ログイン後にコピー
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
KB5055523を修正する方法Windows 11にインストールできませんか？
3週間前
By DDD
KB5055518を修正する方法Windows 10にインストールできませんか？
3週間前
By DDD
<🎜>：死んだレール - オオカミの飼い主
1 か月前
By DDD
R.E.P.O.のすべての敵とモンスターの強度レベル
1 か月前
By 尊渡假赌尊渡假赌尊渡假赌
<🎜>：庭を育てる - 完全な突然変異ガイド
2週間前
By DDD
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
Java チュートリアル
1662
14
1662
14
CakePHP チュートリアル
1419
52
1419
52
Laravel チュートリアル
1311
25
1311
25
PHP チュートリアル
1261
29
1261
29
C# チュートリアル
1234
24
1234
24
HTMLは初心者のために簡単に学ぶことができますか？
Apr 07, 2025 am 12:11 AM
HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。
HTML、CSS、およびJavaScriptの理解：初心者向けガイド
Apr 12, 2025 am 12:02 AM
webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、
HTML、CSS、およびJavaScriptの役割：コアの責任
Apr 08, 2025 pm 07:05 PM
HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
HTML、CSS、およびJavaScript：Web開発者に不可欠なツール
Apr 09, 2025 am 12:12 AM
HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。
HTML：構造、CSS：スタイル、JavaScript：動作
Apr 18, 2025 am 12:09 AM
Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。
HTMLの未来：ウェブデザインの進化とトレンド
Apr 17, 2025 am 12:12 AM
HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。
HTML対CSS対JavaScript：比較概要
Apr 16, 2025 am 12:04 AM
Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。
HTML、CSS、およびJavaScriptの未来：Web開発動向
Apr 19, 2025 am 12:02 AM
HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。
