Praktischer Kampf: Verwenden von Bootstrap zum Implementieren des Wasserfall-Flow-Layouts (mit Code)-Bootstrap-Tutorial-php.cn

Dieser Artikel wird Ihnen eine praktische Anwendung von Bootstrap vorstellen und Schritt für Schritt vorstellen, wie Sie Bootstrap zur Implementierung des Wasserfall-Flow-Layouts verwenden können.

Praktischer Kampf: Verwenden von Bootstrap zum Implementieren des Wasserfall-Flow-Layouts (mit Code)

Es gibt bereits viele Tutorials zu den Grundlagen von Bootstrap online. Tatsächlich wurde die Dokumentation auf der chinesischen Bootstrap-Website (bootcss.com) sehr detailliert geschrieben, aber es gibt nicht viele praktische Fälle. Hier verwenden wir einige derzeit beliebte Webseitenlayouts als Leitfaden und verwenden die Stile in Bootstrap, um es zu vervollständigen. Es werden jeweils nur die Wissenspunkte vermittelt, die sich auf den Fall beziehen, und Sie üben, während Sie lernen, um Ihr Verständnis zu verbessern. Um diesen Fall zu üben, benötigen Sie Grundkenntnisse in HTML/CSS. [Verwandte Empfehlung: „Bootstrap-Tutorial“]

1. Case-Einführung: Waterfall Flow ist ein Webseitenlayout, das in den letzten Jahren populär geworden ist. Die visuelle Leistung ist ein ungleichmäßiges mehrspaltiges Layout ein Wasserfall-Flow-Layout.

2. Verwandte Bootstrap-Wissenspunkte Praktischer Kampf: Verwenden von Bootstrap zum Implementieren des Wasserfall-Flow-Layouts (mit Code)

2.1 Konfigurieren von Bootstrap

2.1.1 Gehen Sie zunächst zur offiziellen Bootstrap-Website (bootcss.com), um „Bootstrap für die Produktionsumgebung“ herunterzuladen.

2.1.2 Fügen Sie das komprimierte bootstrap.min.css aus dem CSS-Ordner im -Tag ein.

2.1.3 Da das JS-Plugin von Bootstrap auf jQuery basiert, müssen Sie, wenn Sie das JS-Plugin verwenden möchten, zuerst jQuery und dann `bootstrap einführen im JS-Ordner .min.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]-->

Nach dem Login kopieren

2.2 Grid System

`<head>` 标签内引入 CSS 文件夹内的经过压缩的 `bootstrap.min.css`。

2.1.3 因为 Bootstrap 的 JS 插件是依赖 jQuery 的，所以想用他的 JS 插件必须先引入 jQuery ，然后再引入 JS 文件夹下的 `bootstrap.min.js`。

<!--代码部分-->
<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>

Nach dem Login kopieren

2.2 栅格系统

官方解释：Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。它包含了易于使用的预定义类。

简单来说，就是 Bootstrap 为了快速布局从外到内写好了三类样式：

外层的固定宽度 .container 或 100% 宽度 .container-fluid 样式；
行 .row 样式，必须包含在 .container 或 .container-fluid 中；
列 .col-md-*（* 可以是 1 到 12，此处代表中等屏幕按此标准显示，.col-md-1 占 .row 的 1/12，.col-md-12 占 .row 的 12/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>
        <!--这里向右偏移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>

Nach dem Login kopieren

.col-md-* 效果图：

Praktischer Kampf: Verwenden von Bootstrap zum Implementieren des Wasserfall-Flow-Layouts (mit Code)

使用列偏移 .col-md-offset-* 示例：

<!--代码部分-->
<div class="container-fluid">
    <div class="row">
        <div class="col-md-4">
            <div class="thumbnail">
                <img  src="/static/imghw/default1.png"  data-src="img/1.jpg"  class="lazy"   alt="Praktischer Kampf: Verwenden von Bootstrap zum Implementieren des Wasserfall-Flow-Layouts (mit Code)" >
                <div class="caption">
                    <h4 id="标题-nbsp-nbsp-缩略图">标题 - 缩略图</h4>
                    <small>我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述。</small>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="thumbnail">
                <img  src="/static/imghw/default1.png"  data-src="img/1.jpg"  class="lazy"   alt="Praktischer Kampf: Verwenden von Bootstrap zum Implementieren des Wasserfall-Flow-Layouts (mit Code)" >
                <div class="caption">
                    <h4 id="标题-nbsp-nbsp-缩略图">标题 - 缩略图</h4>
                    <small>我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述。</small>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="thumbnail">
                <img  src="/static/imghw/default1.png"  data-src="img/1.jpg"  class="lazy"   alt="Praktischer Kampf: Verwenden von Bootstrap zum Implementieren des Wasserfall-Flow-Layouts (mit Code)" >
                <div class="caption">
                    <h4 id="标题-nbsp-nbsp-缩略图">标题 - 缩略图</h4>
                    <small>我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述。</small>
                </div>
            </div>
        </div>
    </div>
</div>

Nach dem Login kopieren

.col-md-offset-* 效果图：

Praktischer Kampf: Verwenden von Bootstrap zum Implementieren des Wasserfall-Flow-Layouts (mit Code)

另外需要注意的是，不管 .col-md-* 和 .col-md-offset-* 怎么搭配使用都要保证 * 总和不超过 12，不然会发生断行现象。

2.3 缩略图

缩略图最常出现的是在产品的展示页，最常见的比如一些购物网站的商品展示。

缩略图需要配合上面所介绍的栅格系统来使用，使用方法是把 <img class="img-responsive lazy" src="/static/imghw/default1.png" data-src="img/1.jpg" alt="Praktischer Kampf: Verwenden von Bootstrap zum Implementieren des Wasserfall-Flow-Layouts (mit Code)" > 标签包在带 .thumbnail 样式的容器里面，如果我们想添加一段文字描述，可以在里面添加一个样式为 .caption 的容器。

.thumbnail 示例：

<img class="img-responsive lazy"  src="/static/imghw/default1.png"  data-src="img/1.jpg"    alt="响应式图片">

Nach dem Login kopieren

.thumbnail 效果图：

Praktischer Kampf: Verwenden von Bootstrap zum Implementieren des Wasserfall-Flow-Layouts (mit Code)

2.4 响应式图片

为了让图片适应容器的大小，可以为图片添加 .img-responsive 样式。

.img-responsive 示例：

<!--代码部分-->
<div >
    <div >
        <div >
            <img class="img-responsive img-rounded lazy"  src="/static/imghw/default1.png"  data-src="img/1.jpg"    alt="圆角">
        </div>
        <div class="col-md-4">
            <img class="img-responsive img-circle lazy"  src="/static/imghw/default1.png"  data-src="img/1.jpg"    alt="圆形">
        </div>
        <div class="col-md-4">
            <img class="img-responsive img-thumbnail lazy"  src="/static/imghw/default1.png"  data-src="img/1.jpg"    alt="缩略图">
        </div>
    </div>
</div>

Nach dem Login kopieren

另外还可以添加 img-rounded/img-circle/img-thumbnailOffizielle Erklärung: Bootstrap bietet ein reaktionsfähiges, mobile-first Fluid-Grid-System, das sich mit zunehmender Bildschirm- oder Viewport-(Ansichtsfenster-)Größe ändert Das System teilt es automatisch in bis zu 12 Spalten auf. Es enthält vordefinierte Klassen, die einfach zu verwenden sind.

Um es einfach auszudrücken: Bootstrap hat drei Arten von Stilen von außen nach innen geschrieben, um ein schnelles Layout zu ermöglichen:

Die feste Breite der äußeren Ebene .container</code > oder 100 % Breite <code>.container-fluid style;
Row .row style, muss in .container enthalten sein oder .container-fluid;
Spalte .col-md-* (* kann hier 1 bis 12 sein stellt einen mittleren Bildschirm dar. Gemäß dieser Standardanzeige macht .col-md-1 1/12 von .row aus und .col-md-12</ code> macht <code> 12/12 von .row aus) oder Spaltenoffset .col-md-offset-* (* kann 1 bis 12 sein ), enthalten im .row-Container für ein schnelles Rasterlayout.

.col-md-* Beispiel:

<!--代码部分-->
<section class="container-fluid">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
        <!--这里放图片-->
        </div>
    </div>
</section>

Nach dem Login kopieren

.col-md-* Rendering: Praktischer Kampf: Verwenden von Bootstrap zum Implementieren des Wasserfall-Flow-Layouts (mit Code)

Spaltenoffset verwenden. col- md-offset-* Beispiel:

<!--代码部分-->
<section >
    <div >
        <div >
            <!--图片开始-->
            <div >
                <div >
                    <a href="javascript:void(0);">
                        <img  class="img-responsive img-rounded lazy"  src="/static/imghw/default1.png"  data-src="img/1.jpg"    alt="Praktischer Kampf: Verwenden von Bootstrap zum Implementieren des Wasserfall-Flow-Layouts (mit Code)" >
                    </a>
                    <div class="caption">
                        <h4 id="标题-nbsp-nbsp-实战">标题 - 实战</h4>
                        <p>
                            <small>阅读是运用语言文字来获取信息，认识世界，发展思维，并获得审美体验的活动。它是从视觉材料中获取信息的过程。视觉材料主要是文字和图片，也包括符号、公式、图表等。</small>
                        </p>
                    </div> 
                </div>
            </div>
            <div class="col-md-4">
                <div class="thumbnail">
                    <a href="javascript:void(0);">
                        <img  class="img-responsive img-rounded lazy"  src="/static/imghw/default1.png"  data-src="img/2.jpg"    alt="Praktischer Kampf: Verwenden von Bootstrap zum Implementieren des Wasserfall-Flow-Layouts (mit Code)" >
                    </a>
                    <div class="caption">
                        <h4 id="标题-nbsp-nbsp-实战">标题 - 实战</h4>
                        <p>
                            <small>阅读是运用语言文字来获取信息，认识世界，发展思维，并获得审美体验的活动。它是从视觉材料中获取信息的过程。视觉材料主要是文字和图片，也包括符号、公式、图表等。</small>
                        </p>
                    </div> 
                </div>
            </div>
            <div class="col-md-4">
                <div class="thumbnail">
                    <a href="javascript:void(0);">
                        <img  class="img-responsive img-rounded lazy"  src="/static/imghw/default1.png"  data-src="img/3.jpg"    alt="Praktischer Kampf: Verwenden von Bootstrap zum Implementieren des Wasserfall-Flow-Layouts (mit Code)" >
                    </a>
                    <div class="caption">
                        <h4 id="标题-nbsp-nbsp-实战">标题 - 实战</h4>
                        <p>
                            <small>阅读是运用语言文字来获取信息，认识世界，发展思维，并获得审美体验的活动。它是从视觉材料中获取信息的过程。视觉材料主要是文字和图片，也包括符号、公式、图表等。</small>
                        </p>
                    </div> 
                </div>
            </div>
            <!--第四到第九个缩略图-->
            ...
            ...
            ...
            ...
            ...
            ...
            <!--图片结束-->
        </div>
    </div>
</section>

Nach dem Login kopieren

.col-md-offset-* Rendering:

Außerdem ist zu beachten, dass unabhängig von .col-md-*< Unabhängig davon, wie Sie /code> und <code>.col-md-offset-* zusammen verwenden, stellen Sie sicher, dass die Summe von * 12 nicht überschreitet, da es sonst zu Zeilenumbrüchen kommt . 🎜

2.3 Miniaturansichten🎜🎜Miniaturansichten erscheinen am häufigsten auf Produktanzeigeseiten, wie z. B. Produktanzeigen auf einigen Shopping-Websites. 🎜🎜Thumbnails müssen in Verbindung mit dem oben vorgestellten Rastersystem verwendet werden. Die Verwendungsmethode besteht darin, das

<img  class="img-responsive img-rounded lazy"  src="/static/imghw/default1.png"  data-src="img/1.jpg"  alt="Praktischer Kampf: Verwenden von Bootstrap zum Implementieren des Wasserfall-Flow-Layouts (mit Code)" >

-Tag in einen Container mit dem .thumbnail einzuschließen Wenn wir eine Textbeschreibung hinzufügen möchten, können wir einen Container mit dem Stil .caption hinzufügen. 🎜🎜.thumbnail Beispiel: 🎜

<!--代码部分-->
<div >
    <div  id="container">
        <!--图片开始-->
        <div >
            <div >

Nach dem Login kopieren

🎜.thumbnail Rendering: 🎜🎜 Praktischer Kampf: Verwenden von Bootstrap zum Implementieren des Wasserfall-Flow-Layouts (mit Code)

🎜

2.4 Responsive Bilder🎜🎜Um das Bild an die anzupassen Containergröße können Sie dem Bild den Stil .img-responsive hinzufügen. 🎜🎜.img-responsive Beispiel: 🎜

<!--代码部分-->
#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; /*防止内容溢出导致布局错位*/
}

Nach dem Login kopieren

🎜Sie können auch img-rounded/img-circle/img-thumbnail hinzufügen Stellen Sie sicher, dass das Bild abgerundete Ecken/Kreis/Miniaturbildform hat. 🎜🎜Beispiel für das Ändern der Bildform:🎜

<!--代码部分-->
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;
}

Nach dem Login kopieren

🎜Ändern der Bildformwiedergabe:🎜🎜🎜🎜🎜3. Übung zum Wasserfall-Flusslayout🎜🎜3.1 Bilder anordnen🎜🎜Nachdem wir den obigen Inhalt gelesen haben, beginnen wir mit der eigentlichen Übung. Erstellen Sie zunächst mit einer Gitterstruktur einen Bereich für Bilder. Hier lassen wir links und rechts jeweils 1/12 des Platzes. 🎜

//页面加载完之后再加载瀑布流
window.onload = function(){
    //这里引用col-md-4是因为在盒子里包裹图片没有其他作用，如果不想冲突也可以创建其他Class
    loadWaterfall(&#39;container&#39;,&#39;col-md-4&#39;);
}

//加载瀑布流函数//思路来自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 = &#39;absolute&#39;;
            //距离顶部长度为这个缩略图上面那个缩略图的长度
            thumbnail[i].style.top = minHeight + &#39;px&#39;;
            //距离左边长度为这个缩略图上面那个缩略图距离左边的长度
            thumbnail[i].style.left = thumbnail[minIndex].offsetLeft + &#39;px&#39;;
            //更新最小高度
            thumbnailHeightArr[minIndex] += thumbnail[i].offsetHeight;
        }
    }
}

Nach dem Login kopieren

🎜Rendering:🎜

Praktischer Kampf: Verwenden von Bootstrap zum Implementieren des Wasserfall-Flow-Layouts (mit Code)

然后用上面所看到的带描述的缩略图样式，每个缩略图又占这中间 10/12（看作一个整体）的 4/12，每行放三个缩略图，放三行。缩略图里的图片用响应式图片的样式 .img-responsive 和圆角样式 .img-rounded 修饰下。

<!--代码部分-->
<section >
    <div >
        <div >
            <!--图片开始-->
            <div >
                <div >
                    <a href="javascript:void(0);">
                        <img  class="img-responsive img-rounded lazy"  src="/static/imghw/default1.png"  data-src="img/1.jpg"    alt="Praktischer Kampf: Verwenden von Bootstrap zum Implementieren des Wasserfall-Flow-Layouts (mit Code)" >
                    </a>
                    <div class="caption">
                        <h4 id="标题-nbsp-nbsp-实战">标题 - 实战</h4>
                        <p>
                            <small>阅读是运用语言文字来获取信息，认识世界，发展思维，并获得审美体验的活动。它是从视觉材料中获取信息的过程。视觉材料主要是文字和图片，也包括符号、公式、图表等。</small>
                        </p>
                    </div> 
                </div>
            </div>
            <div class="col-md-4">
                <div class="thumbnail">
                    <a href="javascript:void(0);">
                        <img  class="img-responsive img-rounded lazy"  src="/static/imghw/default1.png"  data-src="img/2.jpg"    alt="Praktischer Kampf: Verwenden von Bootstrap zum Implementieren des Wasserfall-Flow-Layouts (mit Code)" >
                    </a>
                    <div class="caption">
                        <h4 id="标题-nbsp-nbsp-实战">标题 - 实战</h4>
                        <p>
                            <small>阅读是运用语言文字来获取信息，认识世界，发展思维，并获得审美体验的活动。它是从视觉材料中获取信息的过程。视觉材料主要是文字和图片，也包括符号、公式、图表等。</small>
                        </p>
                    </div> 
                </div>
            </div>
            <div class="col-md-4">
                <div class="thumbnail">
                    <a href="javascript:void(0);">
                        <img  class="img-responsive img-rounded lazy"  src="/static/imghw/default1.png"  data-src="img/3.jpg"    alt="Praktischer Kampf: Verwenden von Bootstrap zum Implementieren des Wasserfall-Flow-Layouts (mit Code)" >
                    </a>
                    <div class="caption">
                        <h4 id="标题-nbsp-nbsp-实战">标题 - 实战</h4>
                        <p>
                            <small>阅读是运用语言文字来获取信息，认识世界，发展思维，并获得审美体验的活动。它是从视觉材料中获取信息的过程。视觉材料主要是文字和图片，也包括符号、公式、图表等。</small>
                        </p>
                    </div> 
                </div>
            </div>
            <!--第四到第九个缩略图-->
            ...
            ...
            ...
            ...
            ...
            ...
            <!--图片结束-->
        </div>
    </div>
</section>

Nach dem Login kopieren

效果图：

Praktischer Kampf: Verwenden von Bootstrap zum Implementieren des Wasserfall-Flow-Layouts (mit Code)

3.2 实现瀑布流

到这里已经把图片排列好了，但是看起来怪怪的，因为上下图片之间有一片空隙，看起来很不美观，我们的瀑布流的特点是宽度一致，高度自适应布局。目前已经实现了宽度一致，要想实现高度自适应要用到 CSS3 中的一个样式 column-width。

官方解释：设置或检索对象每列的宽度，对应的脚本特性为 columnWidth。

给容器加了 column-width 这个样式时，浏览器会给你计算容器里面的 <div> 应该显示多少列，计算一个相对合理的布局方式。

首先我们给缩略图外部的容器加一个 id="container"。

<!--代码部分-->
<div class="row">
    <div class="col-md-10 col-md-offset-1" id="container">
        <!--图片开始-->
        <div class="col-md-4">
            <div class="thumbnail">

Nach dem Login kopieren

然后为这个 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; /*防止内容溢出导致布局错位*/
}

Nach dem Login kopieren

效果图：

Praktischer Kampf: Verwenden von Bootstrap zum Implementieren des Wasserfall-Flow-Layouts (mit Code)

因为现在主流浏览器（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;
}

Nach dem Login kopieren

到这里我们的 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(&#39;container&#39;,&#39;col-md-4&#39;);
}

//加载瀑布流函数//思路来自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 = &#39;absolute&#39;;
            //距离顶部长度为这个缩略图上面那个缩略图的长度
            thumbnail[i].style.top = minHeight + &#39;px&#39;;
            //距离左边长度为这个缩略图上面那个缩略图距离左边的长度
            thumbnail[i].style.left = thumbnail[minIndex].offsetLeft + &#39;px&#39;;
            //更新最小高度
            thumbnailHeightArr[minIndex] += thumbnail[i].offsetHeight;
        }
    }
}

Nach dem Login kopieren

用 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基础教程！！

Das obige ist der detaillierte Inhalt vonPraktischer Kampf: Verwenden von Bootstrap zum Implementieren des Wasserfall-Flow-Layouts (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Beste grafische Einstellungen

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle -Lösung

2 Wochen vor By DDD

R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können

4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: Wie man alles in Myrise freischaltet

1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7500

CakePHP-Tutorial

1377

Wie lautet das Format des Kontonamens von Steam?

Win11 -Aktivierungsschlüssel dauerhaft

NYT -Verbindungen Hinweise und Antworten

Related knowledge

Wie man vertikale Zentrierung von Bootstrap macht Apr 07, 2025 pm 03:21 PM

Verwenden Sie Bootstrap, um die vertikale Zentrierung zu implementieren: FlexBox-Methode: Verwenden Sie den D-Flex, den Justify-Content-Center und die Ausrichtungsklassen aus Align-Item-Center, um Elemente in den Flexbox-Behälter zu platzieren. Methode für Ausstellungs-Iitem-Center-Klassen: Bei Browsern, die Flexbox nicht unterstützen, verwenden Sie die Klasse aus Align-items-Center-Klasse, vorausgesetzt, das übergeordnete Element hat eine definierte Höhe.

So erhalten Sie die Bootstrap -Suchleiste Apr 07, 2025 pm 03:33 PM

So verwenden Sie Bootstrap, um den Wert der Suchleiste zu erhalten: Bestimmt die ID oder den Namen der Suchleiste. Verwenden Sie JavaScript, um DOM -Elemente zu erhalten. Holen Sie sich den Wert des Elements. Führen Sie die erforderlichen Maßnahmen aus.

So fügen Sie Bilder auf Bootstrap ein Apr 07, 2025 pm 03:30 PM

Es gibt verschiedene Möglichkeiten, Bilder in Bootstrap einzufügen: Bilder direkt mit dem HTML -IMG -Tag einfügen. Mit der Bootstrap -Bildkomponente können Sie reaktionsschnelle Bilder und weitere Stile bereitstellen. Legen Sie die Bildgröße fest und verwenden Sie die IMG-Fluid-Klasse, um das Bild anpassungsfähig zu machen. Stellen Sie den Rand mit der img-beliebten Klasse ein. Stellen Sie die abgerundeten Ecken ein und verwenden Sie die IMG-Rund-Klasse. Setzen Sie den Schatten, verwenden Sie die Schattenklasse. Größen Sie die Größe und positionieren Sie das Bild im CSS -Stil. Verwenden Sie mit dem Hintergrundbild die CSS-Eigenschaft im Hintergrund.

So ändern Sie Bootstrap Apr 07, 2025 pm 03:18 PM

Um die Größe der Elemente in Bootstrap anzupassen, können Sie die Dimensionsklasse verwenden, einschließlich: Einstellbreite:.

So verwenden Sie die Bootstrap -Taste Apr 07, 2025 pm 03:09 PM

Wie benutze ich die Bootstrap -Taste? Führen Sie Bootstrap -CSS ein, um Schaltflächenelemente zu erstellen, und fügen Sie die Schaltfläche "Bootstrap" hinzu, um Schaltflächentext hinzuzufügen

So richten Sie das Framework für Bootstrap ein Apr 07, 2025 pm 03:27 PM

Um das Bootstrap -Framework einzurichten, müssen Sie die folgenden Schritte befolgen: 1. Verweisen Sie die Bootstrap -Datei über CDN; 2. Laden Sie die Datei auf Ihrem eigenen Server herunter und hosten Sie sie. 3.. Fügen Sie die Bootstrap -Datei in HTML hinzu; 4. Kompilieren Sie Sass/weniger bei Bedarf; 5. Importieren Sie eine benutzerdefinierte Datei (optional). Sobald die Einrichtung abgeschlossen ist, können Sie die Grid -Systeme, -Komponenten und -stile von Bootstrap verwenden, um reaktionsschnelle Websites und Anwendungen zu erstellen.

So schreiben Sie geteilte Zeilen auf Bootstrap Apr 07, 2025 pm 03:12 PM

Es gibt zwei Möglichkeiten, eine Bootstrap -Split -Zeile zu erstellen: Verwenden des Tags, das eine horizontale Split -Linie erstellt. Verwenden Sie die CSS -Border -Eigenschaft, um benutzerdefinierte Style Split -Linien zu erstellen.

So sehen Sie das Datum der Bootstrap Apr 07, 2025 pm 03:03 PM

ANTWORT: Sie können die Datumsauswahlkomponente von Bootstrap verwenden, um Daten auf der Seite anzuzeigen. Schritte: Stellen Sie das Bootstrap -Framework ein. Erstellen Sie ein Eingangsfeld für Datumsauswahl in HTML. Bootstrap fügt dem Selektor automatisch Stile hinzu. Verwenden Sie JavaScript, um das ausgewählte Datum zu erhalten.

See all articles

Praktischer Kampf: Verwenden von Bootstrap zum Implementieren des Wasserfall-Flow-Layouts (mit Code)

2.1.3 Da das JS-Plugin von Bootstrap auf jQuery basiert, müssen Sie, wenn Sie das JS-Plugin verwenden möchten, zuerst jQuery und dann bootstrap einführen im JS-Ordner .min.js.

2.2 Grid System

<head> 标签内引入 CSS 文件夹内的经过压缩的 bootstrap.min.css。

2.1.3 因为 Bootstrap 的 JS 插件是依赖 jQuery 的，所以想用他的 JS 插件必须先引入 jQuery ，然后再引入 JS 文件夹下的 bootstrap.min.js。

2.2 栅格系统

2.3 缩略图

2.4 响应式图片

3.2 实现瀑布流

3.3 扩展

四、总结

Heiße KI -Werkzeuge

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1

SublimeText3 chinesische Version

Senden Sie Studio 13.0.1

Dreamweaver CS6

SublimeText3 Mac-Version

Heiße Themen

2.1.3 Da das JS-Plugin von Bootstrap auf jQuery basiert, müssen Sie, wenn Sie das JS-Plugin verwenden möchten, zuerst jQuery und dann `bootstrap einführen im JS-Ordner .min.js`.

`<head>` 标签内引入 CSS 文件夹内的经过压缩的 `bootstrap.min.css`。

2.1.3 因为 Bootstrap 的 JS 插件是依赖 jQuery 的，所以想用他的 JS 插件必须先引入 jQuery ，然后再引入 JS 文件夹下的 `bootstrap.min.js`。