Bootstrap 3

4

Bootstrap 3

offline
  • m4rk0  Male
  • Administrator
  • Administrator tech foruma
  • Marko Vasić
  • Gladijator - Maximus Decimus Meridius
  • Pridružio: 14 Jan 2005
  • Poruke: 15766
  • Gde živiš: Majur (Colosseum)

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.



Registruj se da bi učestvovao u diskusiji. Registrovanim korisnicima se NE prikazuju reklame unutar poruka.
offline
  • Pridružio: 25 Mar 2015
  • Poruke: 548

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.



offline
  • m4rk0  Male
  • Administrator
  • Administrator tech foruma
  • Marko Vasić
  • Gladijator - Maximus Decimus Meridius
  • Pridružio: 14 Jan 2005
  • Poruke: 15766
  • Gde živiš: Majur (Colosseum)

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

Ako sam te uopste razumeo sta si hteo.

offline
  • Pridružio: 25 Mar 2015
  • Poruke: 548

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

offline
  • Pridružio: 25 Mar 2015
  • Poruke: 548

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

offline
  • m4rk0  Male
  • Administrator
  • Administrator tech foruma
  • Marko Vasić
  • Gladijator - Maximus Decimus Meridius
  • Pridružio: 14 Jan 2005
  • Poruke: 15766
  • Gde živiš: Majur (Colosseum)

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.

offline
  • Pridružio: 25 Mar 2015
  • Poruke: 548

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; }

offline
  • m4rk0  Male
  • Administrator
  • Administrator tech foruma
  • Marko Vasić
  • Gladijator - Maximus Decimus Meridius
  • Pridružio: 14 Jan 2005
  • Poruke: 15766
  • Gde živiš: Majur (Colosseum)

Citat:Prvi pasus da odvojim od jumbotrona bootstrapfruits

Onda samo stavi padding-top umesto padding-bottom.

offline
  • Pridružio: 25 Mar 2015
  • Poruke: 548

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

offline
  • m4rk0  Male
  • Administrator
  • Administrator tech foruma
  • Marko Vasić
  • Gladijator - Maximus Decimus Meridius
  • Pridružio: 14 Jan 2005
  • Poruke: 15766
  • Gde živiš: Majur (Colosseum)

background:0.5;

Sta ti predstavlja ova linija koda ?

Ko je trenutno na forumu
 

Ukupno su 984 korisnika na forumu :: 25 registrovanih, 1 sakriven i 958 gosta   ::   [ Administrator ] [ Supermoderator ] [ Moderator ] :: Detaljnije

Najviše korisnika na forumu ikad bilo je 3466 - dana 01 Jun 2021 17:07

Korisnici koji su trenutno na forumu:
Korisnici trenutno na forumu: amstel, babaroga, Bobrock1, brundo65, cemix, Djordje29, DonRumataEstorski, Futog 74, ILGromovnik, Kriglord, krkalon, LUDI, m0nstrum_, milenko crazy north, Mixelotti, mkukoleca, paja69, Parker, pein, powSrb, sabros, Shilok, slonic_tonic, sovanova95, tubular