Bootstrap težave pozicioniranja @ Slo-Tech

Forum » Izdelava spletišč »
Bootstrap težave pozicioniranja

Bootstrap težave pozicioniranja

marjan_h :: 28. sep 2017, 01:15

Komaj sem začel uporabljati bootstrap, vendar ne vem kako narediti, da ko skrčim okno brskalnika, da je logotip zgoraj, potem se pa uredijo itemi (li značka) v meniju, eden za drugim vertikalno.

Pobrisal sem vso bootstrap kodo zato, da je bolj pregledno. Razred inner-meni, bi rad da je 65% ko je prikazano na računalniškem monitorju. Tukaj sem tudi pustil razred row, saj je to eden elementov bootstrapa. Poskusil sem narediti row znotraj row, vendar se vse skupaj podre.

Tukaj je koda:

<html>	
	<head>
		<style>
		
			.inner-meni {
				width:65%;
				height:145px;
				margin-left: auto;
				margin-right: auto;
				border: 1px solid gray;
			}
			
			.logo {
				background: url(logo.png) 50% 0 no-repeat;
				border: 1px solid red;
				min-height: 142px;
				width:200px;
				background-size: 200px 145px;
				min-width: 200px;
				float: left;
			}
			
			#slogmeni {
				height: 142px;
				padding-top:75px;
				float: left;
			}

			#slogmeni > ul {
				display: flex;
				margin: 0;
				padding: 10px 20px;
				border: 1px solid blue;
				float: left;
			}

			#slogmeni > ul > li {
				display: flex;
				margin-left: 30px;
			}

			#slogmeni > ul > li:first-of-type {
				margin-left: 0;
			}

			#slogmeni > ul > li > a {
				outline: none;
				font-size: 25px;
				display: flex;
				padding: 10px 1px;
				color: black;
			}
			
		</style>
	</head>



		<header>
			<div class="inner-meni row">
				<div class="logo"></div>			
				<nav>
					<div id="slogmeni" class="menu">
						<ul id="menu-primarni-glavni-meni" class="menu">
							<li id="item" class="menu-item"><a href="#">O znamki</a></li>
							<li id="item" class="menu-item"><a href="#">Zgodovina</a></li>
							<li id="item" class="menu-item"><a href="#">Za goste</a></li>
							<li id="item" class="menu-item"><a href="#">Za organizacije</a></li>
						</ul>
					</div>				
				</nav>
				
			</div>	
		</header>
</html>

Tole ni za službo, niti za šolo, ampak zato da se naučim uporabljati tudi to knjižnico. (Zato sem pustil tudi robove (border)).

Se zahvaljujem za pomoč.

kuall :: 28. sep 2017, 02:27

Najprej vključi boostrap.css.
Potem pa je bistvo bootstrapa container - row - column sistem
container: z njim daš elemente v center strani, pa lahko je full width ali z robovi na straneh
row: ena vrstica
column: določa, koliko vrstic bo v eni vrstici v različnih velikostih ekranov.
vsi ekrani imajo 12 enot širino. potem pa ko pride saldo/sum/seštevek širin prejšnjih kolon več kot 12 se prelomijo kolone v novo vrstico.
Primer, ki določa, da bodo v majhnih zaslonih (sm) 2 koloni na vrstico, v velikih pa 4:

<div clas="container">
<div class="row">
<div class="col-sm-6 col-lg-3"></div>
<div class="col-sm-6 col-lg-3"></div><!--tu se prelomi v novo vrstico v malih zaslonih-->
<div class="col-sm-6 col-lg-3"></div>
<div class="col-sm-6 col-lg-3"></div>
</div>
</div>

Če pa bi hotel, da so tudi v malih zaslonih 4 kolone v vrstici bi jim dal "col-sm-3" stil. Samo ena pa bi ji dal col-sm-12.
V bistvu določaš širino kolon v različnih velikostih zaslonov z bootstrapom. Pol ima pa še razne dodatke.
Drgač pa so za responsive strani zelo važne media queries. to je za telefone zdej pomembno.
@media (min-width: @screen-sm-min) { ... }
Z njimi customiziraš stile za različne velikosti zaslonov.
Če hočeš povečat font, velkost gumbov na telefonih npr.

Zgodovina sprememb…

spremenilo: kuall (28. sep 2017 ob 02:34)

marjan_h :: 28. sep 2017, 11:12

Hvala kuall. Sedaj imam takole, ne vem če je pametno da sem dal razred "col-sm-6" ne div znački, ampak nav znački. Problem nastane pri oblikovanju, ker nimam več iste oblike kot v prejšnjem primeru. Ne vem kako se reši problem, da ostane oblikovanje kot sem določil v CSS, pozicijo elementov pa takšno kot je določeno v bootstrap.

<html>	
	<head>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
		<style>
		
			.inner-meni {
				width:65%;
				height: auto;
				margin-left: auto;
				margin-right: auto;
				border: 1px solid gray;
			}
			
			.logo {
				background: url(logo.png) 50% 0 no-repeat;
				border: 1px solid red;
				min-height: 142px;
				width:200px;
				background-size: 200px 145px;
				min-width: 200px;
				float: left;
			}
			
			#slogmeni {
				height: 142px;
				padding-top:75px;
				float: left;
			}

			#slogmeni > ul {
				display: flex;
				margin: 0;
				padding: 10px 20px;
				border: 1px solid blue;
				float: left;
			}

			#slogmeni > ul > li {
				display: flex;
				margin-left: 30px;
			}

			#slogmeni > ul > li:first-of-type {
				margin-left: 0;
			}

			#slogmeni > ul > li > a {
				outline: none;
				font-size: 25px;
				display: flex;
				padding: 10px 1px;
				color: black;
			}
			
		</style>
	</head>



		<header>
			<div class="inner-meni row">
				<div class="logo col-sm-6 col-lg-3"></div>			
				<nav class="col-sm-6 col-lg-3">
					<div id="slogmeni row" class="menu">
						<ul id="menu-primarni-glavni-meni" class="menu col-sm-6 col-lg-6">
							<li id="item" class="menu-item"><a href="#">O znamki</a></li>
							<li id="item" class="menu-item"><a href="#">Zgodovina</a></li>
							<li id="item" class="menu-item"><a href="#">Za goste</a></li>
							<li id="item" class="menu-item"><a href="#">Za organizacije</a></li>
						</ul>
					</div>				
				</nav>
				
			</div>	
		</header>
</html>

Poglej kakšna je sedaj oblika:

marjan_h :: 28. sep 2017, 23:43

Aja, sem ugotovil kaj je bilo narobe. Keyword "row" sem dal parametru id namesto class. Sedaj je oblikovanje takšno kot sem določil.

Ampak še vedno se list itemi ne zložijo eden za drugim vertikalno kot bi želel, ko skrčim okno brskalnika. Je kdo tukaj strokovnjak za bootstrap?

FireSnake :: 5. jun 2023, 14:08

Da si izposodim temo:
ali se da povozit bootstrap barve brez uporabe !important
?
Ukolikor da, kako (ker že sam bootstrap uporablja !important)?

Poglej in se nasmej: vicmaher.si

s1ck :: 5. jun 2023, 14:56

Bootstrap omogoca variable, preko katerih lahko spreminjas vse - od barv, do paddingov, marginov, ... brez da overridas preko !important.

v5.x:
https://getbootstrap.com/docs/5.3/custo...
https://getbootstrap.com/docs/5.3/custo...

v4.x
https://getbootstrap.com/docs/4.6/getti...
https://getbootstrap.com/docs/4.6/getti...

Excavator :: 5. jun 2023, 15:48

FireSnake je 5. jun 2023 ob 14:08 izjavil:

Da si izposodim temo:
ali se da povozit bootstrap barve brez uporabe !important
?
Ukolikor da, kako (ker že sam bootstrap uporablja !important)?

Ponujajo tudi SASS obliko, kjer lahko dosti bolj elegantno spreminjaš barve, vključiš zadeve po potrebi ...

FireSnake :: 5. jun 2023, 23:54

OK, hvala za tole.
Se bo treba malo poigrati.
Še na kakem primeru.

Poglej in se nasmej: vicmaher.si

FireSnake :: 6. jun 2023, 07:54

Excavator je 5. jun 2023 ob 15:48 izjavil:

FireSnake je 5. jun 2023 ob 14:08 izjavil:
Da si izposodim temo:
ali se da povozit bootstrap barve brez uporabe !important
?
Ukolikor da, kako (ker že sam bootstrap uporablja !important)?

Ponujajo tudi SASS obliko, kjer lahko dosti bolj elegantno spreminjaš barve, vključiš zadeve po potrebi ...

To je to, kar je zgoraj s1ck omenil, ne?

Poglej in se nasmej: vicmaher.si

Excavator :: 6. jun 2023, 08:17

FireSnake je 6. jun 2023 ob 07:54 izjavil:

Excavator je 5. jun 2023 ob 15:48 izjavil:
FireSnake je 5. jun 2023 ob 14:08 izjavil:
Da si izposodim temo:
ali se da povozit bootstrap barve brez uporabe !important
?
Ukolikor da, kako (ker že sam bootstrap uporablja !important)?

Ponujajo tudi SASS obliko, kjer lahko dosti bolj elegantno spreminjaš barve, vključiš zadeve po potrebi ...

To je to, kar je zgoraj s1ck omenil, ne?

Hja, nisem dovolj dol scrollal v tistem postu :)
Nisem 100% če lahko samo s CSS tole povoziš: https://getbootstrap.com/docs/5.2/custo...

FireSnake :: 6. jun 2023, 18:27

s1ck je 5. jun 2023 ob 14:56 izjavil:

Bootstrap omogoca variable, preko katerih lahko spreminjas vse - od barv, do paddingov, marginov, ... brez da overridas preko !important.

v5.x:
https://getbootstrap.com/docs/5.3/custo...
https://getbootstrap.com/docs/5.3/custo...

v4.x
https://getbootstrap.com/docs/4.6/getti...
https://getbootstrap.com/docs/4.6/getti...

Entauženkrat hvala za tole!
Dela ko urca!

Poglej in se nasmej: vicmaher.si

Vredno ogleda ...

	Tema	Sporočila	Ogledi	Zadnje sporočilo
	Tema	Sporočila	Ogledi	Zadnje sporočilo
!	Vse, kar ste si želeli vprašati o CSS, pa si niste upali. (strani: 1 2 3 4 … 23 24 25 26 ) Tody Oddelek: Izdelava spletišč	1298	347239 (6376)	sunniegoldie 11. sep 2024 05:12:48
»	Kako narediti to stran "resposive"? zzbil Oddelek: Izdelava spletišč	5	1036 (927)	zzbil 16. jan 2017 19:33:12
»	Prikaz strani na različni resoluciji-Joomla jugostyle Oddelek: Izdelava spletišč	15	1950 (1678)	kr?en 26. jun 2014 18:57:18
»	poravnava li elementov boss-tech Oddelek: Izdelava spletišč	8	2155 (2020)	boss-tech 1. okt 2012 08:19:03
»	Wampserver in Firefox jonystar Oddelek: Izdelava spletišč	6	1857 (1737)	jonystar 4. maj 2012 07:59:32

Več podobnih tem

Zadnje novice

Zadnji članki

Išči:

Forum » Izdelava spletišč »
Bootstrap težave pozicioniranja

Bootstrap težave pozicioniranja