Rozciągnięte obrazy i wyśrodkowane treści za pomocą Bootstrap

Potrzebuję ułożyć stronę internetową z dwoma obrazami, które muszą rozciągać się, aby wypełnić dostępne okno przeglądarki, ale z treścią tekstową wyśrodkowaną na stronie. Do tej pory jedynymi sposobami, jakimi zdołam to zrobić, są: a) połączenie dwóch obrazów w jeden i ustawienie go jako obrazu tła dla body, a następnie ostrożnie ułożenie w pionie środkowego pasma zawartości w celu dopasowania do luki między obrazami lub b) do zagnieżdżenia container (ustalonego) elementu div wewnątrz container-fluid, w którym znajduje się obraz, a stały tekst zawiera treść tekstową. Dostrzegłem jednak straszne ostrzeżenia i pogardę dla tych, którzy popierają zagnieżdżanie pojemników typu bootstrap.Rozciągnięte obrazy i wyśrodkowane treści za pomocą Bootstrap

Ten obraz może pomóc przekazać to, czego potrzebuję:

enter image description here

„Obraz 1” należy rozciągnąć na całej okna z zawartością pozostałych skoncentrowane, to samo z „obrazu 2”, z równiny pasmo bieli w pionie między obrazami i zwykły pas szarości po prawej stronie ekranu u dołu.

Źródło

2015-04-19 ProfK

użycie pozycjonowanie bezwzględne dla zawartości div – Awena

Można spróbować zrobić to tak:

http://jsfiddle.net/kqoonr24/1/

Być może trzeba będzie dostosować go do swoich potrzeb, ale jest to podstawowa idea. :-)

Zasadniczo, chcesz mieć element div, który działa jak tło i mieści poszczególne elementy div, które składają się na każdy element tła.

Następnie, po tym będziesz chciał mieć div pierwszoplanowy, który mieści rzeczywistą treść.

html, 
 
body, 
 
.wrapper, 
 
.foreground, 
 
.background { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
.foreground { 
 
    background-color: green; 
 
    max-width: 400px; 
 
    margin: 0 auto; 
 
} 
 
.background { 
 
    position: absolute; 
 
    z-index: -1; 
 
} 
 
.background > * { 
 
    height: 33%; 
 
    content: ''; 
 
} 
 
.background-element-1 { 
 
    background-color: blue; 
 
} 
 
.background-element-2 { 
 
    background-color: red; 
 
} 
 
.background-element-3 { 
 
    background-color: orange; 
 
}

<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 

 
<body> 
 
    <div class="wrapper"> 
 
    <div class="background"> 
 
     <div class="background-element-1"></div> 
 
     <div class="background-element-2"></div> 
 
     <div class="background-element-3"></div> 
 
    </div> 
 
    <div class="foreground"> 
 
     <div class="foreground-inner"> 
 
     I am your text! 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>

Najprawdopodobniej trzeba dostosować go jako Zrobiłem sporo założenia, daj mi znać, jeśli potrzebujesz więcej pomocy.

Źródło

2015-04-19 06:41:52

Dzięki @Nikk, wygląda to zajmie trochę regulacji, jak sugerowaną zajęcia nie uwzględniają istniejących klas bootstrap, jak 'kontener na pierwszym planie„ "rzeczy, ale zobaczę, co mogę zrobić. – ProfK

Tak. Będziesz musiał zmodyfikować klasy css i html, aby odzwierciedlić te z bootstrap. Chciałem tylko przedstawić ogólny pomysł :-) –

Możesz spróbować.

Należy pamiętać, że należy zastosować niestandardowe css zgodnie z wymaganiami projektu. Naśladowania:

.container-fluid { 
 
    padding: 0; 
 
} 
 
.container-fluid.wrapper { 
 
    padding-top: 100px; 
 
} 
 
.ht33 { 
 
    height: 200px; 
 
} 
 
.container.content { 
 
    width: 970px; 
 
    position: absolute; 
 
    height: 800px; 
 
    background: gray; 
 
    color: #fff; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
}

<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 
<div class="container-fluid wrapper"> 
 
    <div class="container content"></div> 
 
    <div class="container-fluid bg-primary ht33"></div> 
 
    <div class="container-fluid bg-warning ht33"></div> 
 
    <div class="container-fluid bg-danger ht33"></div> 
 
</div>

Screenshot

Źródło

2015-04-23 06:16:50 webtuts4u

Dzięki. Wygląda na to, że w końcu będę musiał zagnieździć pojemniki div. – ProfK

użyłem row klasę BGS mieć Siatka czuć na nich, a także wyeliminować wyściółkę.

HTML

<div class="container-fluid wrapper"> 
    <div class="container content bg-primary"></div> 
    <div class="row bg-success bg"></div>   
    <div class="row bg-warning bg"></div>   
    <div class="row bg-danger bg"></div>   
</div>

CSS

.container-fluid.wrapper { 
    padding-top: 100px; 
} 
.bg { 
    height: 200px; 
} 
.container.content { 
    width: 970px; 
    position: absolute; 
    height: 800px; 
    color: #fff; 
    top: 0; 
    left: 0; 
    right: 0; 
    margin: 0 auto; 
}

Źródło

2015-04-27 07:10:24

Najprostszy przykład, że mogę myśleć, że zakłada się, że nie wiem o wielkości obrazów w tle, dlatego ułóż je wewnątrz elementu div, który nie wpływa na przepływ strony, a na górze jest zawartość naturalna.

Demo

<div class="images-wrapper"> 
    <img src="..." alt=""> 
    <img src="..." alt=""> 
</div> 

<div class="container"> 
     ....... 
</div> <!-- /container --> 

body { 
    background:#ccc; 
} 
.images-wrapper { 
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    background:#fff; 
    z-index:0; 
} 
.images-wrapper img { 
    display:block; 
    width:100%; 
    height:auto; 
    margin-top:30px; 
} 

.container { 
    z-index:2; 
    position:relative; 
    background:#fff; 
}

Źródło

2015-04-28 17:38:25

A ponieważ nie wiem, czy dobrze cię rozumiem, spójrz również na to: http://jsfiddle.net/7obaL8pw/3/ –

Rozciągnięte obrazy i wyśrodkowane treści za pomocą Bootstrap

Odpowiedz

Powiązane problemy