引导3网站的版面图格

您好，我放在一起，其具有与英雄形象的图片库和较小的图像引导3网站的版面图格

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是有点出乎我可以任何人帮助。

来源

2014-12-30 Justin Erswell

为先使用

background-size:100%;

为第二，自举是没有更多钞票，以德兴你需要，你必须创建使用您的宽度和高度porcent，为什么自定义视图？ bootstrap工作resposive desing，工作适配器，例如：cols-md-6在视图中，例如宽度980px，他有一个50％的值;在宽度显示一个200像素或更低的cols-md-6具有100％的值

来源

2014-12-30 17:10:50 Luis

感谢您的回复 –

请正确回答？ xD，问候！ – Luis

要在图像上创建悬停效果，请在图像标记中添加一个id选择器并添加以下css类。

#chrish:hover { 
    -webkit-filter: grayscale(100%); 
} 


    <span id="chrish"class="img-responsive hero-image" style="background-image: url('http://media.melty.fr/article-2004405-ajust_930/chris-hemsworth-va-etre-comble.jpg');"></span>

来源

2014-12-30 17:07:52 Denise

我不认为这是OP的主要关注点......试着回答标题中描述的问题：** Bootstrap 3 Site Layout Image Grid。** –

引导3网站的版面图格

回答

相关问题