Bootstrap 3

• 1Ovo se svidja korisniku: dejnik978
  
  Registruj se da bi pohvalio/la poruku!

Napisano: 24 Apr 2015 20:08

@dejnik978

Kad planiras da izradjujes sajt moras da imas u glavi layout sajta (izgled). Ako planiras da ti glavni baner bude odredjenih dimenzija i hoces sliku da uglavis stavljajuci je kao kao background image, potrebno je naci sliku tih proporcija ili je u photoshopu iseci u te dimenzije (planirane dimenzije banera). Kolko vidim kod tebe je prostor za baner duplo manji od visine slike koju hoces da "uguras". Nek je height banera 350px; Znaci, ti ces iseci sliku (u photoshopu il gde oces vec) na dimenzije 1280x350px.

Nakon toga u css stavljas sledece:
background: url("../img/poljapsenice.jpg") no-repeat; min-height: 350px;

kao sto vidis u background-image pod min-height stavljas vrednost koja je jednaka visini slike i tako ne mozes pogresiti. Bice prikazana cela slika preko celog banera. Ako stavis background-size:cover tacno je da ce ceo baner biti "popunjen" slikom, ali neces videti sve delove slike ako ti ona nije odgovarajucih dimenzija.

U buducnosti uvek gledaj da ti sirina slike za glavni baner bude 1920px, jer je fullhd vec odavno standard.

Dopuna: 24 Apr 2015 20:27

Citat:1.Kako da odvojim delove jumbotron od prvog pasusa

oznaci na slici sta od cega hoces da odvojis, posto ne razumem.

Citat:2.Kako da delovi budu prozirni, a da tekst ostane isti


treba da koristis rgba kao background. Kod njega su prve tri vrednosti boja (100,54,54), a poslednja transparentnost (0.5)

background: rgba(200, 54, 54, 0.5);

U ovom slucaju je to crvena boja koja je transparentna 50%. Na taj nacin ce samo pozadina biti transparentna bez uticaja na tekst.

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

Ovako nesto nisam lepo iseko, da se odvoje delovi. Ok za obradu sika u photoshopu, mislio sam da to moze preko css-a. Od sad radim tako.

• 1Ovo se svidja korisniku: dejnik978
  
  Registruj se da bi pohvalio/la poruku!

#prvipasus {
padding-bottom: 40px; //ili koliko hoces vec
}

Ako sam te uopste razumeo sta si hteo.

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

Za ovaj container kao na slici malina, kupina, jagoda
html
<div class="container">       <div class="row">          <div class="pozadinacontainera">             <div class="col=xs-4 col-sm-4">                <b class="glyphicon glyphicon-book"></b>                <h2 class="wow fadeInLeft">Maline</h2>                <p class="wow fadeInLeft"> The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains.                </p>             </div>             <div class="col=xs-4 col-sm-4">                <b class="glyphicon glyphicon-book"></b>                <h2 class="wow fadeInUp">Kupina</h2>                <p class="wow fadeInUp"> The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains.                </p>             </div>             <div class="col=xs-4 col-sm-4">                  <b class="glyphicon glyphicon-book"></b>                <h2 class="wow fadeInRight">Jagoda</h2>                <p class="wow fadeInRight"> The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains.                </p>             </div>          </div>       </div>    </div>
css
.pozadinacontainera { background-color:#fff; text-align:center; } kako da container bude proziran, neznam kako da ovo primenim background: rgba(200, 54, 54, 0.5); probao sam razne varijante ali nista

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

Prvi pasus da odvojim od jumbotrona bootstrapfruits
#prvipasus { text-align:center; padding-bottom: 40px; } ovo nece

• 1Ovo se svidja korisniku: dejnik978
  
  Registruj se da bi pohvalio/la poruku!

Napisano: 24 Apr 2015 21:24

Umesto

.pozadinacontainera { background-color:#fff; text-align:center; }

stavi

.pozadinacontainera { background: rgba(200, 54, 54, 0.5); text-align:center; }

Dopuna: 24 Apr 2015 21:26

Ili jos bolje, posto hoces belu transparentnu pozadinu

background: rgba(255, 255, 255, 0.5)

Dopuna: 24 Apr 2015 21:29

Transparentnost regulises sa poslednjom cifrom. Kao sto rekoh 0.5 je sredina iliti 50% transparentnosti.
0.9 ti je najblaza transparentnost, a 0 najveca transparentnost. Kada je poslednja cifra 1 tu nema transparentnosti.

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

Nece, da ne potire jedno drugo
body { background-image:url(../img/vocnasalata.jpg); padding:20px; background:0.5; } .jumbotron { text-align:center; color:#800645; height:150px; padding-top:30px; margin:0px; } #prvipasus { text-align:center; padding-bottom: 40px; } .pozadinacontainera { background: rgba(200, 54, 54, 0.5); text-align:center; }

• 1Ovo se svidja korisniku: dejnik978
  
  Registruj se da bi pohvalio/la poruku!

Citat:Prvi pasus da odvojim od jumbotrona bootstrapfruits

Onda samo stavi padding-top umesto padding-bottom.

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

Gde kod da stavim kod background: rgba(255, 255, 255, 0.5) dobijem belu boju, npr u body izgubi mi se slika pozadina i pojavi se bela boja i sl, uvek se dobije bela boja nema providnosti. Ove fajlove imam u css folderu

• 1Ovo se svidja korisniku: dejnik978
  
  Registruj se da bi pohvalio/la poruku!

background:0.5;

Sta ti predstavlja ova linija koda ?