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.
http://www.mycity.rs/PHP/PHP-bootstrap-opsta-diskusija-pocetnik.html#p1769242







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.


https://angular-ui.github.io/bootstrap/
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 903 korisnika na forumu :: 6 registrovanih, 2 sakrivenih i 895 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: A.R.Chafee.Jr., Fog of War, mikrimaus, pein, Posmatrac77OKB, Trpe Grozni