bootstrap 网格_在10分钟内使用Salvattore和Bootstrap构建动态网格

最新推荐文章于 2024-08-13 08:03:46 发布

daique1908

最新推荐文章于 2024-08-13 08:03:46 发布

阅读量266

点赞数

文章标签： javascript python java css matlab ViewUI

bootstrap 网格

Salvattore自称为jQuery Masonry替代品，但有一个重要区别：它使用CSS配置而不是JavaScript。这些网格可以在网上看到，也许最有名的是在Pinterest上。

今天，我们将Salvattore与Twitter Bootstrap 3结合使用，以构建出令人赞叹的流动网格结构。

入门：您需要的

首先，你需要抓住Salvattore JavaScript库（精缩或源）。接下来，您需要链接Twitter BootstrapCSS。我们将直接从NetDNA的BootstrapCDN借用而不是下载和托管我们自己的副本。

<html> 
    <head> 
        <link rel="stylesheet" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
        <title>Salvattore + Bootstrap</title> 
    </head> 
    <body> 
    
    <!-- This is where the magic happens! --> 
    
    <script src="salvattore.js"></script> 
    
    </body> 
</html>

一旦完成，就可以开始配置Salvattore了！

接下来，您将在标题中使用外部样式表或<style type='text/css'>标记。我们的大部分工作将在样式表中完成。

注意：必须包含type和rel属性，Salvattore才能正常工作。

快速启动网格入门

Twitter Bootstrap提供了强大，灵活的网格结构，该结构专注于自底向上的媒体查询。让我们看一看常见的列行。

<div class="row"> 
    <div class="col-xs-12 col-md-4"></div> 
    <div class="col-xs-6 col-sm-3 col-md-4"></div> 
    <div class="col-xs-6 col-sm-3 col-md-4"></div> 
    <div class="col-xs-12 col-sm-3 col-md-4"></div> 
    <div class="col-xs-6 col-md-4"></div> 
    <div class="col-xs-6 col-md-4"></div> 
</div>

您会在上面的标记中注意到col-[size]-[column number] 。使用xs ， sm ， md和lg可用大小，我们可以为不同的断点设置不同的列大小，而无需编写特定的媒体查询。看一下这个示例，该示例显示列如何在不同的屏幕宽度下移动。

引导面板

我们将使用Bootstrap的面板组件创建一个流动的网格。创建面板的标记是这样构建的：

<div class="panel panel-primary"> 
    <div class="panel-heading">Panel heading without title</div> 
    <div class="panel-body">Panel content</div> 
</div>

将其与Salvattore Magic结合在一起

现在我们有了所需的Bootstrap零件，我们将把它们与Salvattore放在一起。现在，我们将从六个空白面板开始；稍后，我们将为每个面板提供一些动态内容。

为了使Salvattore正常工作，我们的网格容器需要一个data-columns属性。这是我们当前的标记外观：

<div id="grid" data-columns> 
    <div class="panel panel-primary"> 
        <div class="panel-heading">Panel heading without title</div>
        <div class="panel-body"> Panel content </div> 
    </div> 
    
    <!-- repeat the panel as many times as you'd like --> 
    
</div>

接下来，我们将转到样式表，并通过伪元素添加以下标签：

@media screen and (min-width: 1px) and (max-width: 767px){
    #columns[data-columns]::before {
        content: '2 .col-xs-6';
    }
}
@media screen and (min-width:768px) and (max-width: 991px){
    #columns[data-columns]::before {
        content: '3 .col-sm-4';
    }
}
@media screen and (min-width:992px) and (max-width: 9999px){
    #columns[data-columns]::before {
        content: '4 .col-md-3';
    }
}

我们选择的断点直接映射到Bootstrap的媒体查询。 Salvattore使用::before伪元素和content属性定义所创建列的类，然后尝试将元素均匀地拆分为这些列。

使其动态

到目前为止，我们一直严格限制CSS内的内容，但是如果您想加倍努力，JavaScript可以提供一些帮助。

Salvattore通过提供附加功能使事情更进一步。通过这些功能以及与API的连接（我们使用Google的Book API通过Ernest Hemingway提取图书），我们可以构建一个动态网格。这是我们将使用JavaScript：

function append(title, content) {
    // build/select our elements
    var grid = $('#columns')[0];
    var item = document.createElement('div');
    // build the html
    var h = '<div class="panel panel-primary">';
    h += '<div class="panel-heading">';
    h += title;
    h += '</div>';
    h += '<div class="panel-body">';
    h += content;
    h += '</div>';
    h += '</div>';
    salvattore['append_elements'](grid, [item])
    item.outerHTML = h;
}
$.getJSON("https://www.googleapis.com/books/v1/volumes?q=inauthor:Ernest+Hemingway&callback=?", function (data) {
    $(data.items).each(function (i, book) {
        append(book.volumeInfo.title, book.volumeInfo.description);
    });
});

注意：需要jQuery

首先，我们创建一个append函数，该函数获取标题和内容，并将其包装在面板标记中。然后，我们使用salvattore['append_elements'](grid, [item])函数将该项添加到网格中。最后，我们运行AJAX调用以提取动态数据。

为了使其正常工作，我们将希望删除网格固定器中的所有内容。

<div id="grid" data-columns></div>

Salvattore将为我们填写列。

我们的最终标记如下所示：

<!DOCTYPE html>

<html>
<head>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        @media screen and min-width 1px and max-width 767px {
            #columns[data-columns]::before {
                content: '2 .col-xs-6';
            }
        
        }
        
        @media screen and min-width768px and max-width 991px {
            #columns[data-columns]::before {
                content: '3 .col-sm-4';
            }
        
        }
        
        @media screen and min-width992px and max-width 9999px {
            #columns[data-columns]::before {
                content: '4 .col-md-3';
            }
        
        }       
    </style>

    <title></title>
</head>

<body>
    <div class="container">
        <h1 class="col-xs-12">Books by Ernest Hemingway</h1>

        <div data-columns="" id="columns">
            <div></div> 
            <div></div> 
            <div></div>          
        </div>
    </div>
    
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="salvattore.js"></script>
    <script>
        function append(title, content) {
            var grid = document.querySelector('#columns');
            var item = document.createElement('div');
            var h = '<div class="panel panel-primary">';
            h += '<div class="panel-heading">';
            h += title;
            h += '</div>';
            h += '<div class="panel-body">';
            h += content;
            h += '</div>';
            h += '</div>';
            salvattore['append_elements'](grid, [item]) item.outerHTML = h;
        }
        $.getJSON("https://www.googleapis.com/books/v1/volumes?q=inauthor:Ernest+Hemingway&callback=?", function (data) {
            $(data.items).each(function (i, book) {
                append(book.volumeInfo.title, book.volumeInfo.description);
            });
        });
    </script>
</body>
</html>