Putin ajutor Bootstrap

Am si eu 2 mici probleme.

  1. Dupa cum se poate vedea si in imagine am o dunga alba sub navbar si nu stiu de la ce e.
    Tind sa cred ca este un box-shadow pe nav bar, dar cand am folosit box-shadow: none; pe navbar in css nu s-a schimbat nimic, lucru care a mers pe link-urile de la butoane (text-shadow: none;) care si ele la randul lor aveau un drop shadow prestabilit.

Se poate vedea si aici problema de la pct.1
Dar aici am alta buba :smile:

Am folosit:

.navbar-brand,
.navbar-nav li a {
    line-height: 60px;
    height: 60px;
    padding-top: 0;
}

ca sa redimensionez navbar-ul, dar acel buto collaps s-a “descentrat” :blush:
Cum fac sa-l pozitionez pe centru navbar-ului.

Ce clase ai folosit pentru navbar? Pune si o structura html

1 Like

Daca ai putea sa pui site-ul undeva live sa putem sa vedem exact ce si cum ar fi de mare ajutor sau macar posteaza html-ul si css-ul undeva. Pana atunci nu prea stiu daca chiar putem sa te ajutam. Eventual daca nu ai un domeniu la dispozitie, pune-l pe koding.com sau pe codepen si posteaza linkul aici.

1 Like

Foloseste Inspect Element la ambele probleme si sigur o sa gasesti rezolvare. Foloseste-te de tool-urile care ti le pune la dispozitie browserul.

2 Likes

http://claudiux4x.zz.mu/NoName/

Am urcat acum pe un host fisierele :smile:

primul border alb este de la clasa:

.navbar-fixed-top {
   border-width: 0 0 1px;
}

pare ca asa e standard de la bootstrap. ca indent preformatted text by 4 spacessa-l schimbi o metoda e sa ajustezi clasa navbar-toggle.
momentan e:

.navbar-toggle {
   #other css rules...
   margin-top: 8px;
}

schimbat in 13px pare centrat la mine :smile:

1 Like

fără prea multă bătaie de cap.

 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
  </button>

adaugi un <center> </center>

 <center><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
  </button></center>

KISS :smiley:

Centrat pe height nu pe width :blush:

Ms oricum :slight_smile:

1 Like

atunci încearcă aşa:

button, input, optgroup, select, textarea {
  margin: 50%; aici pui 50%
  font: inherit;
  color: inherit;
}

şi la navbar-toggle un float left

.navbar-toggle {
   #other css rules...
   margin-top: 8px;
   float:left;
}

@Clau4x: scoate proprietățile astea din css:

.navbar-brand, .navbar-nav li a {
  line-height: 60px;
  height: 60px;
  padding-top: 0;
}
1 Like

Daca le scot cum maresc dimensiunea navbar-ului?

1 Like

padding-top/bottom pe navbar-header.

1 Like

Revin cu o alta problema :smile:
Am incercat sa fac fac un text, dintr-o anumita clasa responsiv in functie de dimensiunea ecranului.
Am cautat pe google si am gasit ceva, dar nu merge, la mine arata asa:

@media (max-width: @screen-md) {
  .slogan {
    font-size: 72px;
  }
}

@media (max-width: @screen-sm) {
  .slogan {
    font-size: 56px;
  }
}

@media (max-width: @screen-xs) {
  .slogan {
    font-size: 26px;
  }
}

Care e greseala?

Multumesc !

Poti folosi si jQuery pentru a modifica marimea font-ului in functie de dimensiunea ecranului.De asemenea poti folosi doar javascript, este destul de usor.

Exemplu foarte simplu folosind jQuery:

<!doctype html>
<html lang="en">
<head>
<title>Window resize example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function() {
	$(window).resize(function(){
		if($(window).width() > 1000) {
		      $('p').css('font-size', '300%');
        	        }
        	});
       });
</script>
</head>
<body>
<p>Hello World</p>
</body>
</html>

Exemplu acesta este doar ca o idee, (screen-sm, screen-md si screen-xs probabil au niste valori dupa care poti modifica exemplul mai sus ).

Da, dar daca vreau numai pentru anumite clase cum fac?

$(‘clasa_mea’).css(‘font-size’, ‘300%’);

si in loc de 1000, pot sa pun screen-md sau screen-xs? sau trebuie pun exact valorile care le foloseste bootstrap-ul?

Pentru clase faci in felul urmator:

$(’.clasaMea’).css(‘font-size’, ‘100px’);

Trebuie sa pui valorile folosite de bootstrap.
Uite aici niste informatii -> Link

Presupun ca pot sa pun mai multe if-uri in functia aia nu?
Ceva gen:

$(document).ready(function() {
	$(window).resize(function(){
		if($(window).width() > 1992) {
		      $('.clasa_mea').css('font-size', '72px');
        	        }

                if($(window).width() > 768) {
		      $('clasa_mea').css('font-size', '55px');
        	        }

                if($(window).width() > 480) {
		      $('clasa_mea').css('font-size', '36px');
        	        }

                if($(window).width() > 320) {
		      $('clasa_mea').css('font-size', '25px');
        	        }
        	});
       });

si daca bag toata chestia asta intr-un fisier .js nu e mai ok?

Da, dar parca mai bine este o structura de control cu mai multe ramnificatii, deoarece, gandeste-te, tu verifici mai multe optiuni, dar tie iti trebuie doar o singura optiune in functie de dimensiunea ecranului.

if ($(window).width() > 1992) {
 //... 
} else if ($(window).width() > 768) {
//...
}  else if ($(window).width() > 480) {
//...
}  else if ($(window).width() > 320) {
//...
} else {
 //...
}

Da, ai dreptate, Ms :smile:

Cu placere, daca mai ai alte probleme, te ajut cu mare drag.