Diskuze: CSS a bootstrap pozice

HTML a CSS HTML a CSS CSS a bootstrap pozice American English version English version

Aktivity (1)
Avatar
Štěpán Karlovec:19. května 19:37

Ahoj, v bootstrapu jsem nový ale když v css pozicuji a potom zmenším stránku musím posouvat tím barem.
nevíte jak to smrsknout všechno pod sebe aby to bylo i pro mobilní verze?

 
Odpovědět 19. května 19:37
Avatar
xpoproci
Člen
Avatar
xpoproci:19. května 19:45

z obrázka css a html nevyčítame.

Nahoru Odpovědět 19. května 19:45
Motto
Avatar
Štěpán Karlovec:19. května 20:07

<body>
<div class="container">
<h1 style="color: white;">Regis­trace</h1>
</div>

<form class="container">
<div class="form-group">
<label style="color: white;" for="jmenoid">Jmé­no:</label>
<input type="text" class="form-control" style="width: 40%;" name="jmeno" id="jmenoid" placeholder="Jmé­no">
</div>
<div class="form-group">
<label style="color: white;" for="emailid">E­mail</label>
<input type="email" class="form-control" style="width: 40%;" name="email" id="emailid" placeholder="E­mail">
</div>
<div class="form-group">
<label style="color: white;" for="nickid">Nick ve hře</label>
<input type="text" class="form-control" style="width: 40%;" name="nick" id="nickid" placeholder="Nick ve hře">
</div>
<div class="form-group">
<label style="color: white;" for="hesloid">Hes­lo</label>
<input type="password" class="form-control" style="width: 40%;" name="heslo" id="hesloid" placeholder="Hes­lo">
</div>
<div class="form-group">
<label style="color: white;" for="heslozno­vuid">Znovu heslo</label>
<input type="password" class="form-control" style="width: 40%;" name="hesloznovu" id="znovuhesloid" placeholder="Heslo znovu">
</div>
<div class="form-group">
<input type="checkbox" required>
<p style="color: white;">Souhlasím s podmínkami</p>
</div>
<input type="submit" class="btn btn-primary">
</form>
*** <div class="" style="position: absolute; top: 175; left: 1000;">
<h2 style="color: white;">Už jseš zaregistrovaný?</h2>
</div>***
</body>

Editováno 19. května 20:08
 
Nahoru Odpovědět 19. května 20:07
Avatar
Petr Čech
Redaktor
Avatar
Odpovídá na Štěpán Karlovec
Petr Čech:19. května 23:51

Ahoj, tak zaprvé, používej tlačítko pro vkládání kódu - to "</>", mnohem lépe se to potom luští.
Očividně používáš Bootstrap, tak nepoužívej něco jako absolutní pozicování, Bootstrap určitě má lepší nástroj.
Kde chceš, aby se to zobrazilo? Přes celý formulář?, nad ním?, pod ním?
Další věc: takto se atribut style nepoužívá, udělej se css třídu. Style se ideálně nepoužije vůbec, nebo se použije velice zřídka na něco, co se třeba generuje dynamicky a nedá se to definovat v CSS souboru. Tady bys měl udělat něco jako

styles.css

.my-input{
        color: white;
}
.my-label{
        width: 40%;
}

html:

<div class="form-group">
        <label class="my-label" for="hesloid">Heslo</label>
        <input type="password" class="form-control my-input" name="heslo" id="hesloid" placeholder="Heslo">
</div>

A ještě jedna věc: "Už jseš zaregistrovaný?" není česky, předpokládal bych, že to má být "Jsi už zaregistrovaný?" ;)

Nahoru Odpovědět 19. května 23:51
the cake is a lie
Avatar
Odpovídá na Petr Čech
Štěpán Karlovec:19. května 23:56

Jo neumím česky:D ne teď jsem za totálního idiota ale já se naučil jen základy a šel jsem na php. Potřebuju to dát vedle registračního formuláře. A nevím jak umí Bootstrap pozicovat. Maximálně vím container

 
Nahoru Odpovědět 19. května 23:56
Avatar
Petr Čech
Redaktor
Avatar
Odpovídá na Štěpán Karlovec
Petr Čech:19. května 23:59

Tak se nauč víc než základy, bez toho to vážně nepůjde.
Bootstrap pozicovat umí, doporučuji přečíst si dokumentaci - alespoň prolistovat si, co to umí, abys to věděl a potom se k tomu vrátil. Jedna z nejlepších věcí, co Bootstrap umí je grid systém - nastuduj si to a nic jako pozicování už hodně dlouho potřebovat nebudeš, dokud se nerozhodneš udělat něco hodně exotického.

Akceptované řešení
+20 Zkušeností
+1 bodů
Řešení problému
Nahoru Odpovědět 19. května 23:59
the cake is a lie
Avatar
Odpovídá na Petr Čech
Štěpán Karlovec:20. května 0:01

o tom jsem něco slyšel. Diky za odpověď a omlouvám za můj dementní dotaz :D.

 
Nahoru Odpovědět 20. května 0:01
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:21. května 15:51

U bootstrapu jsem si oblibil starou dokmentaci k verzi 2.3
Tady mas krasne vysvetlene, jak se to classuje, abys to mel vedle sebe. Jen si budes muset dohledat podobnou stranku pro svou verzi :) Jo, pripadne si klinki pak v menu na layout, taky. A pak mas uplne nahore Base CSS, taky zajimave.
https://getbootstrap.com/…folding.html#…
https://getbootstrap.com/…folding.html#…
https://getbootstrap.com/…ase-css.html

Editováno 21. května 15:52
 
Nahoru Odpovědět 21. května 15:51
Avatar
Štěpán Karlovec:21. května 18:52

diky

 
Nahoru Odpovědět 21. května 18:52
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 9 zpráv z 9.