Diskuze: Předělání webu pomocí Bootstrapu

HTML a CSS HTML a CSS Předělání webu pomocí Bootstrapu American English version English version

Avatar
Michal Kuba
Redaktor
Avatar
Michal Kuba:

Ahoj!
Hodlám se udělat jeden krok, podle mě docela důležitý, při úpravě webu. Chci, aby stránky byli responzivní a vypadaly pěkně na všech rozlišení displejů, od malých smartphonů přes tablety až k velkým obrazovkám PC. Prohlédl jsem si zdejší tutoriál (http://www.itnetwork.cz/…zivni-design) a prošel si i nějaké informace na w3schools ohledně Mobile first bootstrapu.

Chci se zeptat, jak přesně začít, abych se neubíral složitou a nebo špatnou cestou. Mám nějak zasáhnout samotného HTML kódu a nějak si postupně udělat několik divů a s těmi dále pracovat v CSS či jak?

Nahodím jen zhruba kód hlavní stránky, na které je v osmi políčkách rozděleno kategorie inzerátů a nahoře vodorovné menu, nad ním logo.

<header>

            <img id="logo" src="../img/logo.png">
            <nav>
                <ul>
                    <li><a href="#">Domů</a></li>
                    <li><a href="../../nejnovejsi.php">Nejnovější inzeráty</a></li>
                    <li><a href="kontakt.php">Kontakt</a></li>
                    <li><a href="podat_inzerat.php">Podat inzerát</a></li>
                    <li><a href="prihlaseni.php">Přihlásit se</a></li>
                </ul>
                </nav>

        </header>
<section>

               <table class="polozky"><tr><td class="auto"> <img class="ikony" src="../img/ikony/auto.png">

               <ul>
                   <li><h3>AUTO</h3></li>
                    <li><a href="../kategorie/automobily/osobni_automobily.php">Osobní automobily</a></li>
                    <li><a href="../kategorie/automobily/nakladni_automobily.php">Nákladní automobily</a></li>
                    <li><a href="../kategorie/automobily/dodavky.php">Dodávky</a></li>
                    <li><a href="../kategorie/automobily/privesy.php">Přívěsy</a></li>
                    <li><a href="../kategorie/automobily/nahradni_dily.php">Náhradní díly</a></li>
                    <li><a href="../kategorie/automobily/automobily_jine.php">Jiné</a></li>
               </ul></td>
               <td class="moto">  <img class="ikony" src="../img/ikony/motorka.png">
               <ul>
                   <li><h3>MOTO</h3></li>
                    <li><a href="../kategorie/moto/motorky.php">Motorky</a></li>
                    <li><a href="../kategorie/moto/ctyrkolky.php">Čtyřkolky</a></li>
                   <li><a href="../kategorie/moto/trikolky.php">Tříkolky</a></li>
                    <li><a href="../kategorie/moto/nahradni_dily.php">Náhradní díly</a></li>
                    <li><a href="../kategorie/moto/prislusenstvi.php">Příslušenství</a></li>
                    <li><a href="../kategorie/moto/jine.php">Jiné</a></li>

               </ul></td>
                   <td class="prace"><img class="ikony" src="../img/ikony/prace.png">
               <ul>
                   <li><h3>PRÁCE</h3></li>
                    <li><a href="../kategorie/prace/nabidky_prace.php">Nabídky práce</a></li>
                    <li><a href="../kategorie/prace/poptavky.php">Poptávky</a></li>
                    <li><a href="../kategorie/prace/brigady.php">Brigády</a></li>
                    <li><a href="../kategorie/prace/zahranicni_prace.php">Zahraniční práce</a></li>
                    <li><a href="../kategorie/prace/urady_prace.php">Úřady práce</a></li>
                    <li><a href="../kategorie/prace/jine.php">Jiné</a></li>
               </ul></td>
               <td class="reality"> <img class="ikony" src="../img/ikony/reality.png">
               <ul>
                   <li><h3>REALITY</h3></li>
                    <li><a href="../kategorie/reality/byty_na_prodej.php">Byty na prodej</a></li>
                    <li><a href="../kategorie/reality/domy_na_prodej.php">Domy na prodej</a></li>
                    <li><a href="../kategorie/reality/byty_k_pronajmu.php">Byty k pronájmu</a></li>
                    <li><a href="../kategorie/reality/kancelare.php">Kanceláře</a></li>
                    <li><a href="../kategorie/reality/pozemky.php">Pozemky</a></li>
                    <li><a href="../kategorie/reality/jine.php">Jiné</a></li>
               </ul></td></tr>
                   <tr><td class="stavba"> <img class="ikony" src="../img/ikony/stavba.png">
               <ul>
                   <li><h3>STAVBA</h3></li>
                    <li><a href="../kategorie/stavba/stavebniny.php">Stavebniny</a></li>
                    <li><a href="../kategorie/stavba/pracovni_stroje.php">Pracovní stroje</a></li>
                    <li><a href="../kategorie/stavba/poradenstvi.php">Poradenství</a></li>
                    <li><a href="../kategorie/stavba/stavebni_bunky.php">Stavební buňky</a></li>
                    <li><a href="../kategorie/stavba/vybava_vystaveneho_objektu.php">Výbava vystavěného objektu</a></li>
                    <li><a href="../kategorie/stavba/jine.php">Jiné</a></li>
               </ul></td>
               <td class="mobily">   <img class="ikony" src="../img/ikony/mobil.png">
               <ul>
                   <li><h3>MOBILY</h3></li>
                    <li><a href="../kategorie/mobily/koupim_mobil.php">Koupím mobil</a></li>
                    <li><a href="../kategorie/mobily/prodam_mobil.php">Prodám mobil</a></li>
                    <li><a href="../kategorie/mobily/prislusenstvi.php">Příslušenství k telefonům</a></li>
                    <li><a href="../kategorie/mobily/baterie_nabijecky.php">Baterie, nabíječky</a></li>
                    <li><a href="../kategorie/mobily/handsfree.php">Handsfree</a></li>
                    <li><a href="../kategorie/mobily/jine.php">Jiné</a></li>
               </ul></td>
                   <td class="pc"> <img class="ikony" src="../img/ikony/pocitace.png">
               <ul>
                   <li><h3>POČÍTAČE</h3></li>
                    <li><a href="../kategorie/pocitace/ntb.php">Notebooky</a></li>
                    <li><a href="../kategorie/pocitace/stolni_pc.php">Stolní počítače</a></li>
                    <li><a href="../kategorie/pocitace/tiskarny_skenery.php">Tiskárny, skenery</a></li>
                    <li><a href="../kategorie/pocitace/monitory.php">Monitory</a></li>
                    <li><a href="../kategorie/pocitace/tablety.php">Tablety</a></li>
                    <li><a href="../kategorie/pocitace/jine.php">Jiné</a></li>
               </ul></td>
               <td class="av"> <img class="ikony" src="../img/ikony/video.png">
               <ul>
                   <li><h3>A & V</h3></li>
                    <li><a href="../kategorie/audioVideo/televizory.php">Televizory</a></li>
                    <li><a href="../kategorie/audioVideo/fotoaparaty.php">Fotoaparáty</a></li>
                    <li><a href="../kategorie/audioVideo/videokamery.php">Videokamery</a></li>
                    <li><a href="../kategorie/audioVideo/zesilovace.php">Zesilovače</a></li>
                    <li><a href="../kategorie/audioVideo/radia.php">Rádia</a></li>
                    <li><a href="../kategorie/audioVideo/jine.php">Jiné</a></li>
               </ul></td></tr></table>
           </section>
 
Odpovědět 1.4.2015 23:17
Avatar
Odpovídá na Michal Kuba
Michal Žůrek (misaz):

tady není žádná cesta složitá a špatná. Některé jsou však horší a některé lepší. Začni, že si napíšeš media queries.

Nahoru Odpovědět 1.4.2015 23:50
Nesnáším {}, proto se jim vyhýbám.
Avatar
Peas
Člen
Avatar
Peas:

Ak si tam nahodi Bootstrap tak media queries bootstrepacke uz bude mat. Ci mu budu vyhovovat (co vo vacsine pripadov vyhovuju) alebo nie, to si moze donastavit dodatocne. Podla mna by skor mal zacat dodefinovavat pre DOM elementy bootstrepacke classy (napr col-sm-3...) a stranka vyzera, ze ma dost listov a tie bootstrap ma definovane, takze len samotnym natiahnutim bootstrapu sa zmenia, takze podla mna dalsim krokom je sa pozriet do ich dokumentacie listov.

 
Nahoru Odpovědět 2.4.2015 8:17
Avatar
Tomáš123
Člen
Avatar
Odpovídá na Michal Kuba
Tomáš123:

Responzívny dizajn nie je zložitá časť. A podľa mňa ani nie je dôležité, či robíme mobile alebo desktop first. Je to iba o prepisovaní deklarácií. S rovnakou HTML štruktúrou sa mobilný dizajn robí rovnako ľahko a desktopový. Ak si to ešte neprerobil do bootstrapu, ani neprerábaj. Nie je to potrebné.

Nahoru Odpovědět 2.4.2015 14:36
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Tomáš123
Honza Bittner:

Jestli děláš desktop-first či mobile-first je obrovský rozdíl, hlavně pro CSS.

Desktop first jsou samé přepisování a resetování hodnot, kdežto v mobile first, máš hodnoty resetovány již na začátku, takže jen přidáváš změny.

Nahoru Odpovědět 2.4.2015 14:55
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Tomáš123
Člen
Avatar
Odpovídá na Honza Bittner
Tomáš123:

Desktop first jsou samé přepisování a resetování hodnot
Skôr v desktop second. Platí teda, že mobile first = desktop first a mobile second = desktop second...

Alebo som zle pochopil tvoju myšlienku? Prosím o vysvetlenie.

Nahoru Odpovědět  -2 2.4.2015 15:03
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
tomasmanhal
Člen
Avatar
tomasmanhal:

Já bych se rozhodoval hlavně podle cílovky. Pokud jde o inzertní portál, tak bych na 99% zvolil "desktop first" řešení, protože cílovka bude v drtivé většině z desktopu (bude záležet na propagaci).

Desktop first také z důvodu, že prostě máme nějaký základní soubor funkcí, které na desktopu musí portál mít a na mobilu třeba některé nebudou vhodné. Takže je pořád jednodušší udělat desktop first se všemi funkcemi a až potom postupně "odřezávat" to, co bude na mobilu zbytečné.

Nahoru Odpovědět  ±0 2.4.2015 15:11
Kdyby nám dodali k životu zdrojový kód, vše by bylo jednodušší...
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Tomáš123
Honza Bittner:

Wut? Nějak nechápu kde jsi vytáhl ty second věci?

Nahoru Odpovědět 2.4.2015 15:22
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na tomasmanhal
Honza Bittner:

Dovolím si nesouhlasit.

V desktop-first / mobile-first je úpa jedno kde či jak chceš weby hlavně používat. Jde tam o postup při tvorbě.

V desktop-first musíš hodně vlastností u různých elementů měnit - a ostatní resetovat -, což je značně neefektivní a nepřehledné. Tady si to představ jako shluk nabalených věcí, které musíš složitě odřezávat.

V mobile-first stačí vždy nastavit jen vlastnosti navíc. Pokud něco na mobilech nechceš, úplně s přehledem si můžeš nastavit display: none. Tady si můžeš představit, že máš super malé jádro, na které následně nabaluješ a zobrazuješ jednotlivé prvky.

Za mě tedy mobile-first.

Nahoru Odpovědět 2.4.2015 15:26
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Tomáš123
Člen
Avatar
Odpovídá na Honza Bittner
Tomáš123:

Podstatou bolo, že či už robíš mobile first alebo desktop first, žiadne deklarácie prepisovať nemusíš (ak ponieme základné deklarácie prehliadača, ktoré sa musia restovať v oboch prípadoch).

V desktop-first musíš hodně vlastností u různých elementů měnit - a ostatní resetovat -
Aké ostatné, veď keď robím prvú verziu pre desktop, ešte nemám čo resetovať (ak nerátam pôvodné deklarácie prehliadača, ktoré sú aj tak v obidvoch prípadoch navyše - tam vzniklo second).

V mobile-first stačí vždy nastavit jen vlastnosti navíc
Ak súhlasíme s predvolenými vlastnosťami prehliadača, tak áno. Inak je to rovnaké ako desktop first.

Nahoru Odpovědět  -1 2.4.2015 15:36
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
tomasmanhal
Člen
Avatar
Odpovídá na Honza Bittner
tomasmanhal:

S těmi "display:none;" pomalu, protože sice schováváš prvky, ale prohlížeče je načítají společně se stránkou a tvoříš tak zbytečnou datovou zátěž navíc.

Nahoru Odpovědět 2.4.2015 16:03
Kdyby nám dodali k životu zdrojový kód, vše by bylo jednodušší...
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 11 zpráv z 11.