この記事では、Bootstrap の実践的な経験を共有し、Bootstrap を使用してウォーターフォール フロー レイアウトを実装する方法を段階的に紹介します。
Bootstrap の基本については、オンラインで多くのチュートリアルが公開されています。実際、Bootstrap の中国語 Web サイト (bootcss.com) のドキュメントには詳細に書かれていますが、実際の事例はそれほど多くありません。ここでは、現在人気のある Web ページ レイアウトをガイドとして使用し、Bootstrap のスタイルを使用して完成させます。毎回、事例に関連した知識ポイントのみを教え、学びながら実践して理解を深めます。このケースを実践するには、HTML/CSS の基本的な知識が必要です。 [関連する推奨事項: "bootstrap チュートリアル "]
1. 事例紹介
ウォーターフォール フローは、近年普及している Web ページ レイアウトです。整然とした複数列のレイアウト この例では、Bootstrap を使用してウォーターフォール フロー レイアウトを実装しています。
2. 関連する Bootstrap の知識ポイント
2.1 Bootstrap の設定
2.1.1 まず、Bootstrap の公式 Web サイト (bootcss.com) にアクセスします。 )「実稼働用ブートストラップ」をダウンロードします。
2.1.2 圧縮された bootstrap.min.css を CSS フォルダーの
2.1.3 Bootstrap の JS プラグインは jQuery に依存しているため、その JS プラグインを使用する場合は、まず jQuery を導入し、次に bootstrap.min.js を導入する必要があります。 JSフォルダー内にあります。
<!--BootstrapCSS文件，放在<head>内--> <link type="text/css" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <!--jQuery文件，引入BootstrapJS插件前必需引入--> <script language="javascript" type="text/javascript" ></script> <!--BootstrapJS文件，一般放在底部--> <script language="javascript" type="text/javascript" src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <!--让IE使用最新的渲染模式，支持CSS3--> <meta http-equiv="X-UA-Compatible" content="IE-edge,chrome=1"> <!--如果IE版本低于IE9，使浏览器支持HTML5和CSS3--> <!--[if lt IE 9]> <script src="http://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]-->
2.2 グリッド システム
公式説明: Bootstrap は、画面またはビューポートに合わせて変化する、応答性の高い、モバイル デバイスファーストの流体グリッド システムを提供します。自動的に最大 12 列に分割されます。使いやすいように事前定義されたクラスが含まれています。
簡単に言うと、Bootstrap は迅速なレイアウトのために外側から内側に 3 種類のスタイルを記述しています:
- 外側の層の固定幅
。 containerまたは 100% 幅.container-fluidスタイル; - 行
.rowスタイルは、.containerまたは.container-fluidMedium; - Column
.col-md-*(*は 1 ～ 12 で、中程度の画面を表します)この標準に従って表示されます。.col-md-1は.rowの 1/12 を占め、.col-md-12は 12 を占めます。.row/12) または列オフセット.col-md-offset-*(*は 1 から 12 まで) (に含まれます) .rowコンテナなので、グリッド レイアウトをすばやく作成できます。
#.col-md-* 例:
<!--代码部分-->
<div class="container-fluid">
<div class="row">
<div class="col-md-1">1/12</div>
<div class="col-md-1">1/12</div>
<div class="col-md-1">1/12</div>
<div class="col-md-1">1/12</div>
<div class="col-md-1">1/12</div>
<div class="col-md-1">1/12</div>
<div class="col-md-1">1/12</div>
<div class="col-md-1">1/12</div>
<div class="col-md-1">1/12</div>
<div class="col-md-1">1/12</div>
<div class="col-md-1">1/12</div>
<div class="col-md-1">1/12</div>
</div>
<div class="row">
<div class="col-md-1">1/12</div>
<div class="col-md-3">3/12</div>
<div class="col-md-4">4/12</div>
<div class="col-md-4">4/12</div>
</div>
<div class="row">
<div class="col-md-6">6/12</div>
<div class="col-md-6">6/12</div>
</div>
</div>
.col-md-* レンダリング:
.col-md-offset-* 例:
<!--代码部分-->
<div class="container-fluid">
<div class="row">
<div class="col-md-1">1/12</div>
<div class="col-md-1">1/12</div>
<!--这里向右偏移4/12-->
<div class="col-md-1 col-md-offset-4">1/12</div>
<div class="col-md-1">1/12</div>
<div class="col-md-1">1/12</div>
<div class="col-md-1">1/12</div>
<div class="col-md-1">1/12</div>
<div class="col-md-1">1/12</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-1">3/12</div>
<div class="col-md-4 col-md-offset-4">4/12</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-4">6/12</div>
</div>
</div>
.col-md-offset-* レンダリング:
.col-md-* と .col-md-offset-* に関係なく、注意してください。これらをどのように組み合わせて使用する場合でも、# の合計が 12 を超えないようにしてください。12 を超えないと改行が発生します。
タグを .thumbnail# でコンテナ内でラップすることです。 ## style 、テキストの説明を追加したい場合は、スタイル .caption を持つコンテナを内部に追加できます。
例: <pre class='brush:php;toolbar:false;'><!--代码部分-->
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="/static/imghwm/default1.png" data-src="img/1.jpg" class="lazy" alt="実践的な戦闘: Bootstrap を使用してウォーターフォール フロー レイアウトを実装する (コード付き)" >
<div class="caption">
<h4 id="标题-nbsp-nbsp-缩略图">标题 - 缩略图</h4>
<small>我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述。</small>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="/static/imghwm/default1.png" data-src="img/1.jpg" class="lazy" alt="実践的な戦闘: Bootstrap を使用してウォーターフォール フロー レイアウトを実装する (コード付き)" >
<div class="caption">
<h4 id="标题-nbsp-nbsp-缩略图">标题 - 缩略图</h4>
<small>我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述。</small>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="/static/imghwm/default1.png" data-src="img/1.jpg" class="lazy" alt="実践的な戦闘: Bootstrap を使用してウォーターフォール フロー レイアウトを実装する (コード付き)" >
<div class="caption">
<h4 id="标题-nbsp-nbsp-缩略图">标题 - 缩略图</h4>
<small>我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述。</small>
</div>
</div>
</div>
</div>
</div></pre>
レンダリング:
#2.4 レスポンシブ画像
画像をコンテナのサイズに適応させるために、
.img-sensitive スタイルを画像に追加できます。
例: <pre class="brush:php;toolbar:false"><img class="img-responsive lazy" src="/static/imghwm/default1.png" data-src="img/1.jpg" alt="実践的な戦闘: Bootstrap を使用してウォーターフォール フロー レイアウトを実装する (コード付き)" ></pre>
/img-circle/# を追加することもできます##img-thumbnail 画像を丸い/円形/サムネイルの形で表示します。 #画像形状変更の例:<pre class='brush:php;toolbar:false;'><!--代码部分-->
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<img class="img-responsive img-rounded lazy" src="/static/imghwm/default1.png" data-src="img/1.jpg" alt="圆角">
</div>
<div class="col-md-4">
<img class="img-responsive img-circle lazy" src="/static/imghwm/default1.png" data-src="img/1.jpg" alt="圆形">
</div>
<div class="col-md-4">
<img class="img-responsive img-thumbnail lazy" src="/static/imghwm/default1.png" data-src="img/1.jpg" alt="缩略图">
</div>
</div>
</div></pre>画像形状レンダリングの変更:
#3. ウォーターフォール フロー レイアウトの実践
3.1 写真を配置する
<!--代码部分-->
<section>
<div>
<div>
<!--这里放图片-->
</div>
</div>
</section>
レンダリング:
然后用上面所看到的带描述的缩略图样式，每个缩略图又占这中间 10/12（看作一个整体）的 4/12，每行放三个缩略图，放三行。缩略图里的图片用响应式图片的样式 .img-responsive 和圆角样式 .img-rounded 修饰下。
<!--代码部分--> <section> <div> <div> <!--图片开始--> <div> <div> <a> <img class="img-responsive img-rounded lazy" src="/static/imghwm/default1.png" data-src="img/1.jpg" alt="実践的な戦闘: Bootstrap を使用してウォーターフォール フロー レイアウトを実装する (コード付き)" > </a> <div> <h4 id="标题-实战">标题 - 实战</h4> <p> <small>阅读是运用语言文字来获取信息，认识世界，发展思维，并获得审美体验的活动。它是从视觉材料中获取信息的过程。视觉材料主要是文字和图片，也包括符号、公式、图表等。</small> </p> </div> </div> </div> <div> <div> <a> <img class="img-responsive img-rounded lazy" src="/static/imghwm/default1.png" data-src="img/2.jpg" alt="実践的な戦闘: Bootstrap を使用してウォーターフォール フロー レイアウトを実装する (コード付き)" > </a> <div> <h4 id="标题-实战">标题 - 实战</h4> <p> <small>阅读是运用语言文字来获取信息，认识世界，发展思维，并获得审美体验的活动。它是从视觉材料中获取信息的过程。视觉材料主要是文字和图片，也包括符号、公式、图表等。</small> </p> </div> </div> </div> <div> <div> <a> <img class="img-responsive img-rounded lazy" src="/static/imghwm/default1.png" data-src="img/3.jpg" alt="実践的な戦闘: Bootstrap を使用してウォーターフォール フロー レイアウトを実装する (コード付き)" > </a> <div> <h4 id="标题-实战">标题 - 实战</h4> <p> <small>阅读是运用语言文字来获取信息，认识世界，发展思维，并获得审美体验的活动。它是从视觉材料中获取信息的过程。视觉材料主要是文字和图片，也包括符号、公式、图表等。</small> </p> </div> </div> </div> <!--第四到第九个缩略图--> ... ... ... ... ... ... <!--图片结束--> </div> </div> </section>
效果图：
?x-oss-process=image/resize,p_40 "163948029876405実践的な戦闘: Bootstrap を使用してウォーターフォール フロー レイアウトを実装する (コード付き)")
3.2 实现瀑布流
到这里已经把图片排列好了，但是看起来怪怪的，因为上下图片之间有一片空隙，看起来很不美观，我们的瀑布流的特点是宽度一致，高度自适应布局。目前已经实现了宽度一致，要想实现高度自适应要用到 CSS3 中的一个样式 column-width。
官方解释：设置或检索对象每列的宽度，对应的脚本特性为 columnWidth。
给容器加了 column-width 这个样式时，浏览器会给你计算容器里面的 <div> 应该显示多少列，计算一个相对合理的布局方式。<p>首先我们给缩略图外部的容器加一个 <code>id="container"。
<!--代码部分-->
<div class="row">
<div class="col-md-10 col-md-offset-1" id="container">
<!--图片开始-->
<div class="col-md-4">
<div class="thumbnail">然后为这个 id 加上 column-width 样式。
<!--代码部分-->
#container{
-webkit-column-width:354px; /*Safari and Chrome*/
-moz-column-width:354px; /*Firefox*/
-o-column-width:354px; /*Opera*/
-ms-column-width:354px; /*IE*/
column-width:354px;
}
#container>div{
width:354px; /*宽度根据实际情况调节，应与上面一致*/
overflow:auto; /*防止内容溢出导致布局错位*/
}效果图：
?x-oss-process=image/resize,p_40 "163948034046316実践的な戦闘: Bootstrap を使用してウォーターフォール フロー レイアウトを実装する (コード付き)")
因为现在主流浏览器（Chrome/Firefox/Opera/Safari）都已经支持了 CSS 变量，为了方便调试和维护，上面的 CSS 代码也可以这么写。
<!--代码部分-->
body{
body{
font-family:"微软雅黑";
--img-width:354px; /*两根连词线"--"加变量名"img-width"声明变量*/
}
#container{
-webkit-column-width:var(--img-width); /*用"var(--变量名)"使用变量*/
-moz-column-width:var(--img-width);
-o-column-width:var(--img-width);
-ms-column-width:var(--img-width);
column-width:var(--img-width);
}
/*另：var()里面可以放第二个参数，在变量不存在时取第二个值，例如var(--img-width,200px)中，如果"--img-width"不存在则使用第二个参数"200px"*/
#container>div{
width:var(--img-width);
overflow:auto;
}到这里我们的 Bootstrap 瀑布流布局就完成了，一步步完成下来还是很简单的
演示地址：https://mazey.cn/bootstrap-blueprints/lesson-first-waterfall/index.html
源码地址：https://github.com/mazeyqian/bootstrap-blueprints/tree/master/lesson-first-waterfall
3.3 扩展
除了用 CSS3 实现瀑布流之外，还可以用 JavaScript 来实现这个效果，参考代码如下。
//页面加载完之后再加载瀑布流
window.onload = function(){
//这里引用col-md-4是因为在盒子里包裹图片没有其他作用，如果不想冲突也可以创建其他Class
loadWaterfall('container','col-md-4');
}
//加载瀑布流函数//思路来自Amy老师
function loadWaterfall(boxID,thumbnailClass){
//获取装缩略图外部的盒子
var box = document.getElementById(boxID);
//获取装缩略图的数组
var thumbnail = box.getElementsByClassName(thumbnailClass);
//获取每个缩略图的宽度
var thumbnailWidth = thumbnail[0].offsetWidth;
//计算盒子内每行可以排列几个缩略图
var colCount = Math.floor((document.documentElement.clientWidth*(10/12))/thumbnailWidth);
//创建放每次整理好的高度数组
var thumbnailHeightArr = [];
for(var i = 0; i < thumbnail.length; i++){
//获取第一行高度数组
if(i < colCount){
thumbnailHeightArr.push(thumbnail[i].offsetHeight);
}else{
//获取之前最小高度
var minHeight = Math.min.apply(null,thumbnailHeightArr);
//第一行最小高度索引
var minIndex = thumbnailHeightArr.indexOf(minHeight);
//将此缩略图放在上面那行最小高度下面
thumbnail[i].style.position = 'absolute';
//距离顶部长度为这个缩略图上面那个缩略图的长度
thumbnail[i].style.top = minHeight + 'px';
//距离左边长度为这个缩略图上面那个缩略图距离左边的长度
thumbnail[i].style.left = thumbnail[minIndex].offsetLeft + 'px';
//更新最小高度
thumbnailHeightArr[minIndex] += thumbnail[i].offsetHeight;
}
}
}用 JavaScript 实现瀑布流最明显的一个好处就是对于 IE 的兼容性更好一些，因为 Windows7 捆绑安装 IE 浏览器的缘故，国内使用 IE 的群体非常庞大，这使得我们在制作网页时不得不考虑 IE 浏览器的兼容问题。
JavaScript 实现瀑布流参考源码地址：https://github.com/mazeyqian/bootstrap-blueprints/tree/master/lesson-first-waterfall-javascript
四、总结
本文介绍了 Bootstrap 的基本配置、栅格系统、缩略图、响应式图片和部分 CSS3 样式，其中栅格系统因为可以实现响应式布局尤其重要。
作者后除
原文地址：https://blog.mazey.net/2399.html
（完）
更多关于bootstrap的相关知识，可访问：bootstrap基础教程！！
以上が実践的な戦闘: Bootstrap を使用してウォーターフォール フロー レイアウトを実装する (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
Reactのブートストラップスタイルの統合：方法とテクニックApr 17, 2025 am 12:04 AMReactプロジェクトにブートストラップを統合することは、2つの方法で行うことができます。1）小規模プロジェクトまたは迅速なプロトタイピングに適したCDNを使用して導入します。 2）NPMパッケージマネージャーを使用したインストール。深いカスタマイズが必要なシナリオに適しています。これらの方法を使用すると、Reactで美しく応答性の高いユーザーインターフェイスをすばやく構築できます。
Reactのブートストラップ：利点とベストプラクティスApr 16, 2025 am 12:17 AMBootstrapをReactプロジェクトに統合することの利点には、1）迅速な開発、2）一貫性と保守性、および3）レスポンシブデザインが含まれます。 CSSファイルを直接導入するか、React-Bootstrapライブラリを使用することにより、ReactプロジェクトでBootstrapのコンポーネントとスタイルを効率的に使用できます。
ブートストラップ：WebフレームワークのクイックガイドApr 15, 2025 am 12:10 AMBootstrapは、Twitterが開発したフレームワークであり、レスポンシブでモバイルファーストのWebサイトとアプリケーションを迅速に構築できます。 1.使いやすさとリッチなコンポーネントライブラリにより、開発が速くなります。 2。巨大なコミュニティは、サポートとソリューションを提供します。 3.レスポンシブグリッドの作成など、CDNを介してスタイルを制御するためにクラス名を紹介および使用します。 4。カスタマイズ可能なスタイルと拡張コンポーネント。 5.利点には、迅速な開発とレスポンシブデザインが含まれますが、欠点はスタイルの一貫性と学習曲線です。
ブートストラップの分解：それが何であり、なぜそれが重要なのかApr 14, 2025 am 12:05 AMbootstrapisafree、open-sourcessframeworkthatsthatssponsiveandmobile-firstwebitedevelopment。
ブートストラップ：Webデザインを簡単にしますApr 13, 2025 am 12:10 AMWebデザインがブートストラップを簡単にするものは何ですか？そのプリセットコンポーネント、レスポンシブデザイン、豊富なコミュニティサポート。 1）プリセットコンポーネントライブラリとスタイルにより、開発者は複雑なCSSコードの作成を避けることができます。 2）ビルトイングリッドシステムは、レスポンシブレイアウトの作成を簡素化します。 3）コミュニティサポートは、豊富なリソースとソリューションを提供します。
Bootstrapの影響：Web開発の加速Apr 12, 2025 am 12:05 AMBootstrapはWeb開発を加速し、事前に定義されたスタイルとコンポーネントを提供することにより、開発者は迅速にレスポンシブWebサイトを構築できます。 1）プロジェクトの数日以内に基本的なレイアウトを完了するなど、開発時間を短縮します。 2）SASS変数とミキシンを通じて、ブートストラップにより、カスタムスタイルが特定のニーズを満たすことができます。 3）CDNバージョンを使用すると、パフォーマンスを最適化し、負荷速度を向上させることができます。
ブートストラップの理解：コアの概念と機能Apr 11, 2025 am 12:01 AMBootstrapはオープンソースのフロントエンドフレームワークであり、その主な機能は、開発者がレスポンシブWebサイトを迅速に構築できるようにすることです。 1）複雑なUI効果の実装を容易にするために、事前定義されたCSSクラスとJavaScriptプラグインを提供します。 2）ブートストラップの作業原則は、メディアクエリを通じてレスポンシブデザインを実現するために、そのCSSおよびJavaScriptコンポーネントに依存しています。 3）使用の例には、ボタンの作成などの基本的な使用法や、カスタムスタイルなどの高度な使用法が含まれます。 4）一般的なエラーには、クラス名のスペルミスやファイルの導入が誤っています。ブラウザ開発者ツールを使用してデバッグすることをお勧めします。 5）パフォーマンスの最適化は、カスタムビルドツールを通じて実現できます。
ブートストラップディープダイブ：レスポンシブデザインと高度なレイアウト技術Apr 10, 2025 am 09:35 AMブートストラップは、グリッドシステムとメディアクエリを介してレスポンシブデザインを実装し、さまざまなデバイスにウェブサイトを適合させます。 1.事前定義されたクラス（COL-SM-6など）を使用して、列の幅を定義します。 2。グリッドシステムは12列に基づいており、合計が12。3を超えないことに注意する必要があります。ブレークポイント（SM、MD、LGなど）を使用して、異なる画面サイズの下のレイアウトを定義します。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
メモ帳++7.3.1
使いやすく無料のコードエディター
Safe Exam Browser
Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。
WebStorm Mac版
便利なJavaScript開発ツール
mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。
