html - Bootstrap 3 站点布局图像网格-6ren

html - Bootstrap 3 站点布局图像网格

转载作者：太空宇宙更新时间：2023-11-04 03:22:19

你好，我正在组建一个网站，其中有一个包含主图和小图的图片库

http://codepen.io/erswelljustin/pen/wBzVXJ

HTML

<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <span class="navbar-brand brand-icon"><i class="fa fa-info"></i></span>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-ex1-collapse">
        <form class="navbar-form navbar-left" role="search">
            <div class="form-group">
                <input type="text" class="form-control navbar-search" placeholder="&nbsp;">
            </div>
        </form>
        <ul class="nav navbar-nav">
            <li><a href="#">Dashboard</a></li>
            <li class="active"><a href="#">Interviews</a></li>
            <li><a href="#">Purchases</a></li>
            <li><a href="#">Account</a></li>
        </ul>
        <ul class="nav navbar-nav pull-right hidden-xs hidden-sm">
            <a class="navbar-brand" href="#">
                <img alt="Brand" class="user-avatar img-rounded" src="je.jpg">
            </a>
        </ul>
    </div><!-- /.navbar-collapse -->
</nav>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-3 sidebar hidden-xs hidden-sm">
            <div class="show-filter">
                <h2><span>Show</span></h2>
                <div class="filter-block text-center">
                    <div class="btn-group" role="group" aria-label="...">
                        <button type="button" class="btn btn-filter active">All</button>
                        <button type="button" class="btn btn-filter">Latest</button>
                        <button type="button" class="btn btn-filter">Popular</button>
                    </div>
                </div>
            </div>
            <div class="filters">
                <h2><span>Filters</span></h2>
                <div class="filter-block">
                    <button type="button" class="btn btn-filter">Film</button>
                    <button type="button" class="btn btn-filter">Sports</button>
                    <button type="button" class="btn btn-filter">Television</button>
                    <button type="button" class="btn btn-filter">Actor</button>
                    <button type="button" class="btn btn-filter">Musician</button>
                    <button type="button" class="btn btn-filter">Art</button>
                    <button type="button" class="btn btn-filter">Polotics</button>
                    <button type="button" class="btn btn-filter">Actress</button>
                    <button type="button" class="btn btn-filter">Lifestyle</button>
                    <button type="button" class="btn btn-filter">Pop</button>
                </div>
            </div>
            <div class="info">
                <h2><span>Info</span></h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
        <div class="col-md-9 col-md-offset-3 main">
            <div class="main-header">
                <div class="row">
                    <div class="col-md-11">
                        <h2>All Interviews</h2>
                    </div>
                    <div class="col-md-1">
                        <div class="view-switcher pull-right"><i class="fa fa-th"></i></div>
                        <div class="view-switcher pull-right inactive"><i class="fa fa-th-list"></i></div>
                    </div>
                </div>
            </div>
            <div class="main-content">
                <div class="row">
                    <div class="col-md-6">
                        <span class="img-responsive hero-image" style="background-image: url('http://media.melty.fr/article-2004405-ajust_930/chris-hemsworth-va-etre-comble.jpg');">
                            <div class="item-title-hero">
                                <h2>Chris Hemsworth</h2>
                                <span class="item-subtitle-hero">
                                    The Avengers: Age of Ultron
                                </span>
                            </div>
                            <div class="item-image-count">
                                <i class="fa fa-camera"></i> 3
                            </div>
                        </span>
                    </div>
                    <div class="col-md-6">
                        <div class="row">
                            <div class="col-md-6 bordered">
                                <span class="img-responsive grid-image" style="background-image: url('http://i.dailymail.co.uk/i/pix/2014/09/23/1411504187666_wps_53_blake_lively_guy_aroch_ph.jpg');">
                                    <div class="item-title">
                                        <h2>Blake Lively</h2>
                                        <span class="item-subtitle">
                                            Health and Career With&hellip;
                                        </span>
                                    </div>
                                    <div class="item-image-count">
                                        <i class="fa fa-camera"></i> 4
                                    </div>
                                </span>
                            </div>
                            <div class="col-md-6 bordered">
                                <span class="img-responsive grid-image" style="background-image: url('http://cdn.images.express.co.uk/img/dynamic/79/590x/david_beckham_lead-434102.jpg');">
                                    <div class="item-title">
                                        <h2>David Beckham</h2>
                                        <span class="item-subtitle">
                                            Life after football
                                        </span>
                                    </div>
                                    <div class="item-image-count">
                                        <i class="fa fa-camera"></i> 2
                                    </div>                                      
                                </span>
                            </div>
                            <div class="col-md-6 bordered">
                                <span class="img-responsive grid-image" style="background-image: url('http://upload.wikimedia.org/wikipedia/commons/7/7b/Ryan_Gosling_-_Cannes_Film_Festival_-_01.jpg');">
                                    <div class="item-title">
                                        <h2>Ryan Gosling</h2>
                                        <span class="item-subtitle">
                                            I'm a sexy man
                                        </span>
                                    </div>
                                    <div class="item-image-count">
                                        <i class="fa fa-camera"></i> 1
                                    </div>                                      
                                </span>
                            </div>
                            <div class="col-md-6 bordered">
                                <span class="img-responsive grid-image" style="background-image: url('http://assets8.heart.co.uk/2014/05/kelly-brook-new-look-lingerie-2014-2-1391522988-view-0.jpg');">
                                    <div class="item-title">
                                        <h2>Kelly Brook</h2>
                                        <span class="item-subtitle">
                                            Does my bum look big
                                        </span>
                                    </div>
                                    <div class="item-image-count">
                                        <i class="fa fa-camera"></i> 10
                                    </div>                                      
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3 bordered">
                        <span class="img-responsive grid-image" style="background-image: url('http://hep.mobi/wp-content/uploads/rocket-raccoon-bradley-cooper-11.jpg');">
                            <div class="item-title">
                                <h2>Bradley Cooper</h2>
                                <span class="item-subtitle">
                                    Hungover? nah limitless
                                </span>
                            </div>
                        </span>
                    </div>
                    <div class="col-md-3 bordered">
                        <span class="img-responsive grid-image" style="background-image: url('http://www.billboard.com/files/styles/promo_650/public/media/do-no-reuse-taylor-swift-the-beat-bb36-sarah-barlow-billboard-650.jpg');">
                            <div class="item-title">
                                <h2>Taylor Swift</h2>
                                <span class="item-subtitle">
                                    Life songs and fame
                                </span>
                            </div>
                        </span>
                    </div>
                    <div class="col-md-3 bordered">
                        <span class="img-responsive grid-image" style="background-image: url('http://www.vanyaland.com/wp-content/uploads/2014/09/Rihanna-4-1170x731.jpg');">
                            <div class="item-title">
                                <h2>Rhianna</h2>
                                <span class="item-subtitle">
                                    Umberella, ella eh?
                                </span>
                            </div>
                        </span>
                    </div>
                    <div class="col-md-3 bordered">
                        <span class="img-responsive grid-image" style="background-image: url('http://the-talks.com/wp-content/uploads/2012/01/Ewan-McGregor-001.jpg');">
                            <div class="item-title">
                                <h2>Ewan McGregor</h2>
                                <span class="item-subtitle">
                                    Use the force!
                                </span>
                            </div>
                        </span>
                    </div>                      
                </div>
            </div>
        </div>
    </div>
</div>

CSS

*/

html, body {
    margin: 0px;
    padding: 0px;
    max-height: 100%;
    max-width: 100%;
    height: auto;
    width: auto;
    font-family:'AvenirNextLTW01-Regular'
}
.container-fluid {
    height: 100%;
    margin-top: 50px;
}

/* Custom Bootstrap Styles */
.navbar-custom {
    background-color: #404040;
    border-color: #2f2f2f;
    border-radius: 0px !important;
}
.navbar-custom .navbar-brand {
    color: #7f7f7f;
}
.navbar-custom .navbar-brand:hover, .navbar-custom .navbar-brand:focus {
    color: #666666;
    background-color: transparent;
}
.navbar-custom .navbar-text {
    color: #7f7f7f;
}
.navbar-custom .navbar-nav > li:last-child > a {
    border-right: 1px solid #404040;
}
.navbar-custom .navbar-nav > li > a {
    color: #7f7f7f;
    border-left: 1px solid #404040;
}
.navbar-custom .navbar-nav > li > a:hover, .navbar-custom .navbar-nav > li > a:focus {
    color: #ffffff;
    background-color: transparent;
}
.navbar-custom .navbar-nav > .active > a, .navbar-custom .navbar-nav > .active > a:hover, .navbar-custom .navbar-nav > .active > a:focus {
    color: #ffffff;
    background-color: #404040;
}
.navbar-custom .navbar-nav > .disabled > a, .navbar-custom .navbar-nav > .disabled > a:hover, .navbar-custom .navbar-nav > .disabled > a:focus {
    color: #cccccc;
    background-color: transparent;
}
.navbar-custom .navbar-toggle {
    border-color: #dddddd;
}
.navbar-custom .navbar-toggle:hover, .navbar-custom .navbar-toggle:focus {
    background-color: #dddddd;
}
.navbar-custom .navbar-toggle .icon-bar {
    background-color: #cccccc;
}
.navbar-custom .navbar-collapse, .navbar-custom .navbar-form {
    border-color: #2e2e2e;
}
.navbar-custom .navbar-nav > .dropdown > a:hover .caret, .navbar-custom .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: #ffffff;
    border-bottom-color: #ffffff;
}
.navbar-custom .navbar-nav > .open > a, .navbar-custom .navbar-nav > .open > a:hover, .navbar-custom .navbar-nav > .open > a:focus {
    background-color: #2f2f2f;
    color: #ffffff;
}
.navbar-custom .navbar-nav > .open > a .caret, .navbar-custom .navbar-nav > .open > a:hover .caret, .navbar-custom .navbar-nav > .open > a:focus .caret {
    border-top-color: #ffffff;
    border-bottom-color: #ffffff;
}
.navbar-custom .navbar-nav > .dropdown > a .caret {
    border-top-color: #7f7f7f;
    border-bottom-color: #7f7f7f;
}

.btn-filter {
    color: #FFFFFF;
    background-color: #40D1B0;
    border-color: #FFFFFF;
    height: 26px;
    padding-top: 2px;
    border-radius: 0px;
    box-shadow: none !important;
    text-transform: uppercase;
    margin: 4px 0px;
    font-family:'AvenirNextLTW01-Medium';
    font-style: 8px !important;
}
.btn-filter:hover, .btn-filter:focus, .btn-filter:active, .btn-filter.active, .open .dropdown-toggle.btn-filter {
    color: #40D1B0;
    background-color: #FFF;
    border-color: #FFFFFF;
}
.btn-filter:active, .btn-filter.active, .open .dropdown-toggle.btn-filter {
    background-image: none;
}
.btn-filter.disabled, .btn-filter[disabled], fieldset[disabled] .btn-filter, .btn-filter.disabled:hover, .btn-filter[disabled]:hover, fieldset[disabled] .btn-filter:hover, .btn-filter.disabled:focus, .btn-filter[disabled]:focus, fieldset[disabled] .btn-filter:focus, .btn-filter.disabled:active, .btn-filter[disabled]:active, fieldset[disabled] .btn-filter:active, .btn-filter.disabled.active, .btn-filter[disabled].active, fieldset[disabled] .btn-filter.active {
    background-color: #40D1B0;
    border-color: #FFFFFF;
}
.btn-filter .badge {
    color: #40D1B0;
    background-color: #FFFFFF;
}
.btn-filter .active {
    color: #40D1B0;
    background-color: #FFF;
    border-color: #FFFFFF;
}



.navbar-search {
    border-radius: 20px;
    height: 30px;
    background-color: #404040;
    font-size: 14px;
    outline: none;
    box-shadow:none !important;
    border:1px solid #7f7f7f !important;
    transition: all 0.9s ease;
    margin-top: 2px;
    width: 279px !important;
}

.navbar-search::-webkit-input-placeholder::before {
    font-family: 'fontAwesome';
    content: '\f002  ';
    color: #7f7f7f
}
.navbar-search::-moz-placeholder::before {
    font-family: 'fontAwesome';
    content: '\f002  ';
    color: #7f7f7f
}
/* firefox 19+ */

.navbar-search:-ms-input-placeholder::before {
    font-family: 'fontAwesome';
    content: '\f002  ';
    color: #7f7f7f
}
/* ie */

.navbar-search:-moz-placeholder::before {
    font-family: 'fontAwesome';
    content: '\f002  ';
    color: #7f7f7f
}
.navbar-search:focus {
    outline: none;
    background-color: #fff;
    border-color: #7f7f7f;
}

.brand-icon {
    height: 30px;
    width: 30px !important;
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
    padding: 5px 12px 5px 12px;
    background-color: #40d1b0;
    color: #fff !important;
    border-radius: 6px;
    transition: all 0.9s ease
}
.brand-icon:hover {
    cursor: pointer;
    background-color: #34ab90;
}

.user-avatar {
    height: 30px;
    width: 30px;
    margin-top: -4px;
}

/*
* Sidebar Styles
*/
.sidebar {
    background-color: #40d1b0;
    height: 100%;
    position: fixed;
}
.sidebar h2 {
    color: #f7f7f7;
    width: 100%;
    font-size: 24px;
    position: relative;
}

.sidebar h2 span {
    background-color: #40d1b0;
    padding-right: 2px;
}
.sidebar h2:after {
    content:"";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0.22em;
    border-top: 1px solid rgba(0,0,0,0.10);
    z-index: -1;
}

.filter-block {
    width: 100%;
    margin-top: 30px;
    margin-bottom: 60px;
}

.sidebar p {
    font-family:'Minion W01 It';
    color: #f7f7f7;
}

/* Main Panel Styles */
.main h2 {
    font-size: 24px;
    color: #404040;
}

.view-switcher {
    width: 24px;
    height: 24px;
    margin-right: 4px;
    color: #6b6b6b;
    border: 1px Solid #6b6b6b;
    padding: 2px 4px 0px 4px;
    margin-top: 16px;
    transition: all 0.9s ease
}
.view-switcher.inactive {
    color: #bbb;
    border-color: #bbb;
}

.view-switcher:hover {
    color: #40d1b0;
    border-color: #40d1b0;
    cursor: pointer;
}

.hero-image {
    width: 100%;
    max-width: 510px; 
    height: 497px; 
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border-radius: 4px;
}
.grid-image {
    width: 100%;
    max-width: 238px;
    height: 244px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border-radius: 4px;
}

.bordered {
  margin-bottom: 10px;
}

.item-title-hero {
    bottom: 0px;
    text-align: center;
    background-color: rgba(0,0,0,0.20);
    border-radius: 4px;
    position: absolute;
    max-width: 510px;
    width: 100%;
    height: 100%;
}
.item-title-hero h2 {
    color: #f7f7f7;
    font-size: 32px;
    font-family: 'Avenir Next LT W01 Demi';
    width: 100%;
    bottom: 40px;
    position: absolute;
}
.item-title {
    bottom: 0px;
    text-align: center;
    background-color: rgba(0,0,0,0.20);
    border-radius: 4px;
    position: absolute;
    max-width: 238px;
    width: 100%;
    height: 100%;
}
.item-title h2 {
    color: #F7F7F7;
    font-size: 22px;
    font-family: "Avenir Next LT W01 Demi";
    width: 100%;
    bottom: 18px;
    position: absolute;
}
.item-subtitle-hero {
    bottom: 20px;
    position: absolute;
    color: #F7F7F7;
    width: 100%;
    max-width: 510px;
    left: 0px;
    font-family: "Minion W08 Md Cd It";
    font-size: 20px;
}
.item-subtitle {
    bottom: 6px;
    position: absolute;
    color: #F7F7F7;
    width: 100%;
    max-width: 238px;
    left: 0px;
    font-family: "Minion W08 Md Cd It";
    font-size: 16px;
}

.item-image-count {
    color: #F7F7F7;
    position: absolute;
    right: 30px;
    top: 6px;
    font-size: 20px
}

@media (max-width: 767) {
    .navbar-custom .navbar-nav .open .dropdown-menu > li > a {
        color: #7f7f7f;
    }
    .navbar-custom .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-custom .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #ffffff;
        background-color: transparent;
    }
    .navbar-custom .navbar-nav .open .dropdown-menu > .active > a, .navbar-custom .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-custom .navbar-nav .open .dropdown-menu > .active > a:focus {
        color: #ffffff;
        background-color: #2f2f2f;
    }
    .navbar-custom .navbar-nav .open .dropdown-menu > .disabled > a, .navbar-custom .navbar-nav .open .dropdown-menu > .disabled > a:hover, .navbar-custom .navbar-nav .open .dropdown-menu > .disabled > a:focus {
        color: #cccccc;
        background-color: transparent;
    }
}

.navbar-custom .navbar-link {
    color: #7f7f7f;
}
.navbar-custom .navbar-link:hover {
    color: #ffffff;
}

我在这里遇到了一些问题。

如果浏览器的尺寸不同，我需要使图像尺寸增大/减小。
连接到 1 我需要使叠加层相对于它们的图像框保持在正确的位置。

我使用了背景图像，因为此应用程序中的图像方向不同，我需要使它们保持一致，但我不知道这是否是正确的方法。

代码在上面但可能太长所以我添加了一个可待因链接

我的目标是这个

enter image description here

我想我已经很接近了，但是 CSS 有点超出我的能力范围，任何人都可以提供帮助。

最佳答案

首次使用

background-size:100%;

其次，boostrap 无法满足您的需求，您必须使用宽度和高度的 porcent 创建自定义 View ，为什么？ bootstrap 工作到响应式设计，工作到适配器，例如:cols-md-6 在 View 中，例如宽度 980px，他的值为 50%；在宽度显示中，200px 或更低的 cols-md-6 的值为 100%

关于html - Bootstrap 3 站点布局图像网格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27709124/

文章推荐： javascript - 当 css 设置为显示 :none 时，slideDown() 不起作用

文章推荐： python - 时间戳转换为日期时间 Python, Pandas

文章推荐： python - 如何从多项式拟合中提取导数？

文章推荐： python - 使用 lambda 的列表理解中的 If 语句

.htaccess - 将旧链接(HTML 站点)重定向到新页面(PHP 站点)
最近我用 php 建立了一个网站，但他们的旧网站都是 HTML 格式的。所以现在我不知道使用 .htaccess 将所有这些旧链接重定向到新站点(可能将所有带有 HTML 的链接重定向到主域)的最佳方
wordpress - 将 WordPress 站点 'A' 完全重定向到 WordPress 站点 'B'
我创建了一个新的 WordPress 网站，它是我旧网站的更名版本。它有一个新的域和一个新的设计。除此之外，其他一切都是相同的，包括内容和链接结构。现在我想完全重定向旧链接。与旧帖子一样，标签和类别
asp.net - 使用 WatiN 测试 ASP.NET 站点。是否可以在本地以编程方式部署 ASP.net 站点？
我想使用 WatiN测试我正在开发的网站的功能。理想情况下，我会在测试开始运行之前以编程方式部署网站 (asp.net MVC3)，然后在每次测试之前刷新数据。这可能吗？最佳答案在此处阅读有关使用
.net - 为什么即使页面的 EnableSessionState ="False"ASP.NET 仍然访问状态服务器，但仅适用于 VB.NET 站点，而不适用于 C# 站点？
我们的网站使用我们自己定制的 session 状态管理，与 ASP.NET session 状态分开。但是由于少数特殊页面使用 SQL Server Reporting Services，我们还需要启
带有工作示例的 JavaScript 站点
不久前我看到一个网站，其中有 JavaScript/HTML/CSS 栏目，下面有实际代码的样子。有点像 jsFiddle，但它有用户示例和演示。有谁知道这个网站的名字吗？我到处都找不到它!谢谢! 最
Sitecore 站点/项目发布在初始化时挂起
我们的核心数据库出现问题，该数据库已由前一天的备份数据库恢复。此后，网站工作正常，但我们在发布任何更改时遇到问题。一旦点击发布按钮，“发布正在初始化..”消息就会持续很长时间。截至“发布开始/结束”
Sitecore 站点/项目发布在初始化时挂起
我们的核心数据库出现问题，该数据库已由前一天的备份数据库恢复。此后，网站工作正常，但我们在发布任何更改时遇到问题。一旦点击发布按钮，“发布正在初始化..”消息就会持续很长时间。截至“发布开始/结束”
【Maven基础入门教程】Maven site(站点)
Maven 不仅仅是一款项目构建和依赖管理工具，它还能够聚合项目信息，促进项目团队间地交流。POM 中可以包含各种项目信息，例如：项目描述、SCM 地址、许可证信息，开发者信息等。用户可以使用 Mav
java - 抓取 Cloudflare 站点
关闭。这个问题需要更多focused .它目前不接受答案。想改进这个问题吗？更新问题，使其只关注一个问题 editing this post . 关闭上个月。 Improve this ques
.net - 面向公众的高流量 Silverlight 站点
您知道哪些网站正在使用 Silverlight？此信息将帮助我们决定何时采用 Silverlight 平台。这些网站应该是面向公众的并且被认为是高流量的。 (每月至少 300,000 次点击)。我
.net - 站点 DLL 似乎在发布时间歇性锁定
我尝试通过 VS2017 中的发布上下文菜单将我的 .net 核心站点部署到 Azure，偶尔(大约三分之一的部署)，我收到以下错误。 Web deployment task failed. (Web
django - 具有共享代码库和数据库的多个 Django 站点
我为 20 个不同的国家/地区创建了一个包含 20 个站点(每个站点一个不同的域)的 Django 项目。这些站点共享所有内容:代码库、数据库、网址、模板等。他们唯一不共享的是我在每个站点设置文件中
web - 将电子商务添加到 Jekyll 站点
如何将商店页面添加到我使用 jekyll 和基础构建的网站？任何自动化平台/方法都可以做到这一点。谢谢。最佳答案您可以使用 snipcart .有一个blog post和一个 demo sit
azure - 在服务结构上托管多个公共(public)站点
我部署了一个服务结构集群，域为 foo.northcentralus.cloudapp.azure.com 它具有单一节点类型和单一公共(public) IP 地址/负载均衡器。假设我部署了以下
typo3 - 在typo3中创建没有冗余文本的 "multilanguage"站点
我不是一个大的typ3 专家，也无法访问我正在使用的typ3 实例中的typoscript 选项(这是一个非常大的站点，我没有这样做的授权)。所以我希望这个问题适合 stackoverflow(如果没
Drupal 站点 - Memcache 连接错误
我们正在对我们的 Drupal 站点进行性能调整。我们正在使用 Siege 来衡量性能(作为 drupal 访问者)。环境: Nginx + FastCGI + Memcache Siege 运行
sharepoint - 批量复制文件到 SharePoint 站点
我搜索了 SO、SU 和 SP.SE寻求解决方案，但找不到我需要的东西。我正在寻找一个解决方案，它可能是一个脚本或一些其他非编码方法/工具。我正在尝试编写一个脚本(供其他人使用)或某种其他形式的自动
django - 搜索引擎如何看待本地化的 Django 站点？
我有一个 Django 站点，它使用本地化中间件与 gettext 和 trans/blocktrans 模板标签相结合，根据用户代理字符串中的首选语言向访问者显示不同的页面(这似乎是在 Django
deployment - 是否可以部署已构建的 Drupal 站点？
我是 Drupal 新手。是否可以设置所有内容并在服务器上部署 Drupal？我的意思是像放入内容、设置模块等...，然后将它们全部放到生产服务器上？最佳答案当然。复制所有文件编辑数据库凭证(
jekyll - 有没有办法检查本地是否正在提供 jekyll 站点？
我想将以下行添加到我的 head.html仅在运行时 jekyll serve本地: 如果可能的话，我正在考虑使用一些简单的液体检查。最佳答案当你做 jekyll serve本地默认 {{

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - Bootstrap 3 站点布局图像网格