IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskusia – 3. diel - Bootstrap - Typografia

Späť

Upozorňujeme, že diskusie pod našimi online kurzami sú nemoderované a primárne slúžia na získavanie spätnej väzby pre budúce vylepšenie kurzov. Pre študentov našich rekvalifikačných kurzov ponúkame možnosť priameho kontaktu s lektormi a študijným referentom pre osobné konzultácie a podporu v rámci ich štúdia. Toto je exkluzívna služba, ktorá zaisťuje kvalitnú a cielenú pomoc v prípade akýchkoľvek otázok alebo projektov.

Komentáre
Avatar
David Hartinger
Vlastník
Avatar
David Hartinger:7.11.2017 12:46

Do článku jsem doplnil specifikace Bootstrap breakpointů.

Odpovedať
7.11.2017 12:46
New kid back on the block with a R.I.P
Avatar
Jakub Podskalský
Člen
Avatar
Jakub Podskalský:10.7.2019 1:20

Musím říct, opravdu chválím tento kurz! Obvykle preferuji začínat s jinými zahraničními zdroji, zdejší kurzy většinou projíždím od začátku až když jsem na pokročilé úrovni, ať si trochu osvědčím i české názvy, "zvyky", hezky profesionálně zkritizuju... :D Teď jsem ale s tímhle kurzem natolik spokojen, že do toho možná půjdu naplno a nechám se vést Bootstrapem tady. Líbí se mi, že se začíná s úplnými začátky, což všude jen tak není. Začal jsem si o všech těch třídách psát dokonce poznámky, jinak to snad ani nemá smysl, člověk to po chvilce zapomene - hlavně když má plnou hlavu klasických stylů. Jen doufám, že nejsou články zastaralé, ještě s Bootstrapem 3. V minulé lekci ale byl odkaz na stažení beta verze nové 4, tak snad už byly články časem psané aspoň už v té plné verzi. Zatím mi ale všechny probrané třídy fungovaly. :) Těším se na další články! Děkuji za ně.

 
Odpovedať
10.7.2019 1:20
Avatar
Zdeněk Jeřábek
Člen
Avatar
Zdeněk Jeřábek:17.11.2021 15:20

U breakpointu chybi xs.... Coz ve vysledku nedava smysl pri 5 zarizenich jsou vypsana jen 4

 
Odpovedať
17.11.2021 15:20
Avatar
Martin Pakandl
Člen
Avatar
Martin Pakandl:30.4.2022 10:09

V případě psaní psaní tučného textu a kurzívy se v bootstrap 5 změnily třídy.

Momentálně je to správně takto:

<p class="fw-bold">tučný text</p>
<p class="fw-normal">běžná velikost textu</p>
<p class="fw-light">tenký text</p>
<p class="fst-italic">text kurzívou</p>

Stejně tak i v případě psaní textu doleva a doprava:

<p class="text-start">text vlevo</p>
<p class="text-end">text doprava</p>
Editované 30.4.2022 10:10
 
Odpovedať
30.4.2022 10:09
Avatar
Kamil Pajta
Člen
Avatar
Kamil Pajta:25.8.2022 15:00

Je to tu všeobecne popísané, ale žiadne príklady a návody, ako by ich bolo možné pre začiatočníka použiť.

 
Odpovedať
25.8.2022 15:00
Avatar
Anežka Ketta Hozdová
Člen
Avatar
Anežka Ketta Hozdová:20.12.2022 23:43

Bylo by fajn zaktualizovat informace, aby člověk nemusel hledat jinde. (Možná někomu pomůže: https://getbootstrap.com/…lities/text/)

 
Odpovedať
20.12.2022 23:43
Avatar
Radek Jindra
Člen
Avatar
Odpovedá na Kamil Pajta
Radek Jindra:7.1.2023 17:22

Taky jsem nad tím tápal. Možná ti pomůže co jsem sesmolil ,samozřejmě nevím jestli je to dobře. Jenom si nahraj zdroje css a js k indexu (css/bootstrap­.min.css a js/bootstrap.bun­dle.min.js):

<!DOCTYPE html>
<!--
Zdroj: https://www.itnetwork.cz/html-css/bootstrap/kurz/bootstrap-typografie
-->
<html>
 <head>
  <title>Lekce 3 - Bootstrap - Typografie</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link   href="css/bootstrap.min.css" rel="stylesheet" />
  <script src= "js/bootstrap.bundle.min.js"              ></script>
 </head>
<body>
    <!-- .h1-.h6  -->
    <h1 class="h1">Nadpisové třídy .h1</h1>
    <h2 class="h2">Nadpisové třídy .h2</h2>
    <h3 class="h3">Nadpisové třídy .h3</h3>
    <h3 class="h4">Nadpisové třídy .h4</h4>
    <h3 class="h5">Nadpisové třídy .h5</h5>
    <h3 class="h6">Nadpisové třídy .h6</h6>
    <!-- display-1 - display-4 -->
    <h1 class="display-1">Nadpisové třídy display-1</h1>
    <h1 class="display-2">Nadpisové třídy display-2</h1>
    <h1 class="display-3">Nadpisové třídy display-3</h1>
    <h1 class="display-4">Nadpisové třídy display-4</h1>
    <!-- zvýraznení odstavců  -->
    <p>Tento text obsahuje normální informaci</p>
    <p class="lead">Tento text obsahuje důležitou informaci a je lépe viditelný díky třídě .lead.</p>
    <!-- podnadpisy  -->
    <h1>
        Bootstrap kurz
        <small class="text-muted">Krok za krokem</small>
    </h1>
    <!-- zkratky  -->
    <p><abbr title="číslo">č.</abbr>10</p>
    <p><abbr class="initialism" title="Kaskádové styly">CCS</p>
    <!-- citace  -->
    <blockquote class="blockquote">
        <p>Internet? Ten nás nezajímá.</p>
        <footer class="blockquote-footer">Bill Gates, 1993</footer>
    </blockquote>
    <!-- seznamy bez odrážek  -->
    <ul class="list-unstyled">
        <li>První položka</li>
        <li>Druhá položka</li>
        <li>
            <ul>
                <li>První položka vnořeného seznamu</li>
                <li>Druhá položka vnořeného seznamu</li>
            </ul>
        </li>
        <li>Třetí položka</li>
    </ul>
    <!-- inline seznamy  -->
    <ul class="list-inline">
        <li class="list-inline-item">První položka</li>
        <li class="list-inline-item">Druhá položka</li>
        <li class="list-inline-item">Třetí položka</li>
    </ul>
  <!-- blokový kód   musíme převés HTML znaky na entity-->
  <pre class="pre-scrollable">
   <code>
    &lt;p&gt;Sample text here...&lt;/p&gt;
    &lt;p&gt;And another line of sample text here...&lt;/p&gt;
   </code>
  </pre>
  <!-- inline seznamy  -->
  <p>Uživatele necháme kód zkopírovat klávesovou zkratkou
   <kbd>ctrl</kbd> + <kbd>c</kbd>
   , čímž se nahraje do proměnné <code>vstup</code>
   . Program následně vypíše hlášku <samp class="font-italic">Text zkopírován do schránky</samp>
   .
  </p>
</body>
</html>
Odpovedať
7.1.2023 17:22
Rád se učím novým dovednostem
Avatar
Pavel Vaněk
Člen
Avatar
Pavel Vaněk:29.4.2023 14:40

Bootstrap má ukázkovou šablonu cheatsheet, kde je přehled všech vlastností - velmi poučné.

 
Odpovedať
29.4.2023 14:40
Avatar
Ľuboš Holčák
Člen
Avatar
Odpovedá na Radek Jindra
Ľuboš Holčák:26.5.2023 11:34

Díky moc! mě osobně tohle v článku chybělo

 
Odpovedať
26.5.2023 11:34
Avatar
Marek Jiříček
Člen
Avatar
Marek Jiříček:18.10.2023 13:33

Dokumentaci si snad umime precist sami. Tohle je vylozene jenom encyklopedicke vyjmenovavani faktu. To je nepedagogicke.

 
Odpovedať
18.10.2023 13:33
Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zatiaľ nikto nevložil komentár - buď prvý!