MyCity » Web dizajn / HTML » Bootstrap 3

Bootstrap 3

Napisano na dan: 9.4.2015
13

Bootstrap 3
Pagination Prethodna strana
Sledeća strana Pagination

Idi na vrh

Poslao: 24 Jul 2015 01:37
Idi na vrh
offline
  • Pridružio: 25 Mar 2015
  • Poruke: 548

Reseno za full prikaz slike Smile
background-repeat:no-repeat; background-size:110% auto; ili 100%




Registruj se da bi učestvovao u diskusiji. Registrovanim korisnicima se NE prikazuju reklame unutar poruka.
Poslao: 25 Jul 2015 00:01
Idi na vrh
offline
  • Pridružio: 25 Mar 2015
  • Poruke: 548

Slika u pozadini je responsiv i pomera se kako razvlacim browser , problem je siva pozadina koja se pocinje pojavljivati na rezoluciji 597px



Kad se doda no repeat pojavi se siva pozadina evo primera




.jumbotron { background-image:url(../img/header.jpg); background-repeat:no-repeat; text-align:center; min-height:600px; padding-top:140px; margin-bottom:0px; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%;  background-size:110% auto; }



Poslao: 28 Jul 2015 22:36
Idi na vrh
offline
  • Pridružio: 25 Mar 2015
  • Poruke: 548

Mislim da je resen problem sive pozadine
A i pozadina je responziv.
background-size:cover; background-position:50%;





Ako ima neko bolje resenje, svima bi znacilo, pozdrav

Poslao: 30 Jul 2015 14:59
Idi na vrh
offline
  • Pridružio: 25 Mar 2015
  • Poruke: 548

Iskodirao sam ovako nesto pa sad bi da odradim login sa modal funkcijom i prihvaat podataka putem php-a.




Sve primedbe i predloge mozete da postovati u ovoj temi ispod, da ne dupliram.
[Link mogu videti samo ulogovani korisnici]







Poslao: 01 Avg 2015 02:44
Idi na vrh
offline
  • Pridružio: 25 Mar 2015
  • Poruke: 548

Postovanje imam pitanje, hvala

1. kako da uklonim prostor izmedju dva row-a ove velike cetiri slike, uklonio sam izmedju dve evo koda, da li moze ovako?
.col-md-6 {     width: 50%;     padding: 0px !important; }

2. da li moze ovako da se odradi za podesavanje slika unutar container-a.

.img-responsive { width:300px; height:200px; border-style: solid; border-width: 10px; float:left; margin:5px 15px 10px 0; } .fotogallery .img-responsive { width:100%; height:auto; border-style: none; }
<div class="fotogallery">       <div class="container-fluid">          <div class="row">             <div class="col-md-6">                <img src="img/1.jpg" class="img-responsive">             </div>             <div class="col-md-6">                <img src="img/2.jpg" class="img-responsive">             </div>                </div>          <div class="row">             <div class="col-md-6">                <img src="img/4.jpg" class="img-responsive">             </div>             <div class="col-md-6">                <img src="img/3.jpg" class="img-responsive">             </div>          </div>       </div>    </div>

3. Koju velicinu slika sacuvate u photoshopu, ova na quality 10 je oko 600kb, a full na 12 je oko 1,3megabajta?



Probao sa i ovako uklonio jedan row i slike smestio u jedan div
<div class="col-md-3">                <img src="img/1.jpg" class="img-responsive">                <img src="img/2.jpg" class="img-responsive">                   <img src="img/4.jpg" class="img-responsive">                <img src="img/3.jpg" class="img-responsive">             </div>
ali slike idu jedna ispod druge i ima razmak.

Reseno ovako Smile
.fotogallery .img-responsive {     width: 100%;     height: auto;     border-style: none;     margin-bottom: 0px;     margin-top:0px; }
Dodao sam margin-bottom:0px;margin-top:0px;
Da li moze ovako?




Na malim rezolucijama nije ok, , kako resiti prikaz 4 slike, neki link na sta se ovo odnosi, hvala pozdrav.

Poslao: 04 Avg 2015 18:04
Idi na vrh
offline
  • Pridružio: 25 Mar 2015
  • Poruke: 548

This repository contains a set of native AngularJS directives based on Bootstrap's markup and CSS.


[Link mogu videti samo ulogovani korisnici]
AngularJS (requires AngularJS 1.3.x, tested with 1.4.3)
Bootstrap CSS (tested with version 3.1.1).

Sta mislite vredi li odavde poceti uciti angularjs i njegovu primenu u bootstrapu. Znam da postoje online free cursevi, yt, zvanicna stranica itd. Ovo me konkretno zanima. Hvala i pozdrav

Poslao: 05 Avg 2015 23:34
Idi na vrh
offline
  • m4rk0  Male
  • Administrator
  • Administrator tech foruma
  • Marko Vasić
  • Gladijator - Maximus Decimus Meridius
  • Pridružio: 14 Jan 2005
  • Poruke: 15766
  • Gde živiš: Majur (Colosseum)

dejnik978 ::Postovanje imam pitanje, hvala

1. kako da uklonim prostor izmedju dva row-a ove velike cetiri slike, uklonio sam izmedju dve evo koda, da li moze ovako?
.col-md-6 {     width: 50%;     padding: 0px !important; }


To nije pametno raditi na takav nacin jer ce ti onda svuda na projektu gde god budes imao .col-md-6 (a verujem da ces imati na dosta mesta) sve biti bez padinga. Ako si se vec odlucio da na takav nacin maknes te gapove onda ga gadjaj ovako:

. fotogallery .col-md-6 {     padding: 0px !important; }

Citat:2. da li moze ovako da se odradi za podesavanje slika unutar container-a.

.img-responsive { width:300px; height:200px; border-style: solid; border-width: 10px; float:left; margin:5px 15px 10px 0; } .fotogallery .img-responsive { width:100%; height:auto; border-style: none; }
<div class="fotogallery">       <div class="container-fluid">          <div class="row">             <div class="col-md-6">                <img src="img/1.jpg" class="img-responsive">             </div>             <div class="col-md-6">                <img src="img/2.jpg" class="img-responsive">             </div>                </div>          <div class="row">             <div class="col-md-6">                <img src="img/4.jpg" class="img-responsive">             </div>             <div class="col-md-6">                <img src="img/3.jpg" class="img-responsive">             </div>          </div>       </div>    </div>


Opet ista greska ko u prvom primeru. Zadajes vrednosti direktno na .img-responsive klasu. Izbegavaj direktno zadavanje vrednosti opstim bootstrap klasama i html elementima. Svrha .img-responsive klase je da ucini sliku da bude responsive a ti si upravo suprotno uradio, zadao si fixu sirinu i visinu. I ako vec hoces nesto da zadas .img-responsive klasi onda to u tvom slucaju radi iskljucivo preko

.fotogallery .img-responsive { }

inace u tvom kodu ima viska elemenata. Klasa .img-responsive sama po sebi ima height: auto, pa si je samo bez potrebe duplirao. Takodje nema potrebe da zadajes float:left; jer je se u tvom slucaju .img-responsive klasa nalazi u .col-md-6 klasi koja vec sama po sebi floatuje levo (kao i sve druge .col-* bootstrap klase).


Citat:3. Koju velicinu slika sacuvate u photoshopu, ova na quality 10 je oko 600kb, a full na 12 je oko 1,3megabajta?



Zavisi od slucaja, Ali od 8-10 je neki optimum.

Citat:Probao sa i ovako uklonio jedan row i slike smestio u jedan div
<div class="col-md-3">                <img src="img/1.jpg" class="img-responsive">                <img src="img/2.jpg" class="img-responsive">                   <img src="img/4.jpg" class="img-responsive">                <img src="img/3.jpg" class="img-responsive">             </div>
ali slike idu jedna ispod druge i ima razmak.

Pa ima razmak zato sto si stavio razmak:

Citat:.img-responsive {
margin:5px 15px 10px 0;
}

Citat:Reseno ovako Smile
.fotogallery .img-responsive {     width: 100%;     height: auto;     border-style: none;     margin-bottom: 0px;     margin-top:0px; }
Dodao sam margin-bottom:0px;margin-top:0px;
Da li moze ovako?




Na malim rezolucijama nije ok, , kako resiti prikaz 4 slike, neki link na sta se ovo odnosi, hvala pozdrav.


Pobrisi to sve i uradi ovako:

.fotogallery .col-md-6 {   margin: 0!important;   padding: 0!important; } .fotogallery .img-responsive {   width: 100%;   margin: 0!important;   padding: 0!important; }

<div class="fotogallery">     <div class="container-fluid">       <div class="row">         <div class="col-md-6">           <img src="img/1.jpg" class="img-responsive">         </div>         <div class="col-md-6">           <img src="img/2.jpg" class="img-responsive">         </div>          </div>       <div class="row">         <div class="col-md-6">           <img src="img/4.jpg" class="img-responsive">         </div>         <div class="col-md-6">           <img src="img/3.jpg" class="img-responsive">         </div>       </div>     </div>   </div>

Ili ako zelis i na manjim rezolucijama prikaz sve cetiri slike :

.fotogallery .col-md-6, .fotogallery .col-sm-6 {   margin: 0!important;   padding: 0!important; } .fotogallery .img-responsive {   width: 100%;   margin: 0!important;   padding: 0!important; }

<div class="fotogallery">     <div class="container-fluid">       <div class="row">         <div class="col-sm-6 col-md-6">           <img src="img/1.jpg" class="img-responsive">         </div>         <div class="col-sm-6 col-md-6">           <img src="img/2.jpg" class="img-responsive">         </div>          </div>       <div class="row">         <div class="col-sm-6 col-md-6">           <img src="img/4.jpg" class="img-responsive">         </div>         <div class="col-sm-6 col-md-6">           <img src="img/3.jpg" class="img-responsive">         </div>       </div>     </div>   </div>

Ili i treci slucaj - ako zelis da ti slike budu spojene u bilo kojoj kombinaciji:

.fotogallery [class*='col-'] {   margin: 0!important;   padding: 0!important; } .fotogallery .img-responsive {   width: 100%;  margin: 0!important;   padding: 0!important; }

Poslao: 06 Avg 2015 00:32
Idi na vrh
offline
  • Pridružio: 25 Mar 2015
  • Poruke: 548

Smanjio sam malo border mada i nemora. Hvala Marko majstorski




Poslao: 06 Avg 2015 12:13
Idi na vrh
offline
  • Pridružio: 25 Mar 2015
  • Poruke: 548

Ovde imam odradjen cod za full prikaz videa u containeru bootstrap i pitanje ako je neko radio. Kako prikazati tekst i dugmice u video container, svima ce dobro doci

Poslao: 08 Avg 2015 13:19
Idi na vrh
offline
  • Pridružio: 25 Mar 2015
  • Poruke: 548

Ubacio sam button dugme


Da li moze ovako kod
 <header>         <div class="header-container">          <div class="video-container">             <video width="100%" height="auto" controls>                <source src="video/train.mp4" type="video/mp4">                <source src="movie.ogg" type="video/ogg">                Your browser does not support the video tag.             </video>             <div id="button-position">                <div class="container">                <a href="#"><img src="styleimage/button_1.png" class="img-responsive"></a>                <a href="#"><img src="styleimage/button_2.png" class="img-responsive"></a>                </div>             </div>                   </div>       </div>        </header>

posebno ovaj deo za button
<div id="button-position">                <div class="container">                <a href="#"><img src="styleimage/button_1.png" class="img-responsive"></a>                <a href="#"><img src="styleimage/button_2.png" class="img-responsive"></a>                </div>             </div>

Posebno css pozicioniranje
#button-position {     position: absolute;     bottom: 20%;     right: 0;     width: 300px; } #button-position .img-responsive {    padding:5px; }

MyCity » Web dizajn / HTML » Bootstrap 3

Ko je trenutno na forumu
 

Ukupno su 994 korisnika na forumu :: 177 registrovanih, 15 sakrivenih i 802 gosta   ::   [ Administrator ] [ Supermoderator ] [ Moderator ] :: Detaljnije

Najviše korisnika na forumu ikad bilo je 19602 - dana 30 Mar 2026 00:11

Korisnici koji su trenutno na forumu:
Korisnici trenutno na forumu: 33 bren, 357magnum, _Rade, _stipa_, acov34, aleksjevt, Alen-Delon-u-boji, aleph_one, Alojzije, asdfjklc, Aska, Ben Roj, bobpp, Bojan198527, bojan313, bojcistv, BORUTUS, boxbole, bozomotika, branko7, celeron, celik, Chainsaw, coaaco, Comyymoc, cuvarkuca, cvrle312, dane007, Dare, DeerHunter, Dejan_vw, dejandr, dekiz, del boy, Denaya, DezurniOperativni, djonsule, DJUNTA, dmrdc, Dovla, dragoljub11987, Drugard72, Duh sa sekirom, Duk011, dunavzed, duro1990duro, DuškoMraz, Dvojac005, Dzigy, Fog of War, Futurama, Gargantua, GH69, GrammaticalAnalysis, Great White, Gudza, Hans Gajger, Holy Saber, ibssa, iceburn, ikan, ILGromovnik, Imperator_Aleksandr_lll, Ivan Germanovic, ivicasimo, JK, joca83, Jose, Još malo pa deda, jugoslav.70, Karla, kirucar, KizJ, kljajajunior, kljift, koliko, komsija1, Koridor, Lelemood, Lester Freamon, Leteća Krofna, Ljusa, LUDI, luka35, M1los, M74AB3, Malahit, MarijaC84, marko.markovic, MarkoJ-Nis, markolopin, marsi, Maruti, mat, matejman, matrix_1, maxim_von_burdengate, mačković, MB120mm, mean_machine, mercedesamg, Metanoja, mexo, Mi lao shu, milos.cbr, mir juzni, MK10, Mldo, moldway, morava_01, museum, Naj-Turs, Ne doznajem se u oružje, nebkv, Nemanja.M, nevjerna beba, nixos, nizam, Ognjen D., Orc, paja69, Patent, pein, Pekman, Pilence, pisac12, Plavi Jadran, Povratak1912, precan, procesor, proka1ng, Pururin, pzoca, Radula, rambod, Resnica, Rok A Bit, royst33, samocitam, sekula80, Shajlok, shlauf, siwoti, Smiljkovich, Smor, ss10, stalja, StankoVrankovic, Stoilkovic, Str2022, tachinni, Totem, travisrise, trpche, trutcina, tubular, Tvrtko I, US_Rank_0, vargas, vathra, vidra boy, Vlada1389, vobo, Vojin, Vojkan Petrovic, Vrač, Vucko11, vukajlo71, YesYesMan1, Zanzibar, Zdilar, zdrebac, zexon, zil10, zmajbre, zziko, Žoržo