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

David Hartinger

Vlastník

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

Jakub Podskalský

Člen

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... 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

Zdeněk Jeřábek

Člen

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

Martin Pakandl

Člen

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

Kamil Pajta

Člen

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

Anežka Ketta Hozdová

Člen

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

Radek Jindra

Člen

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.bundle.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

Pavel Vaněk

Člen

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

Ľuboš Holčák

Člen

Ľ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

Marek Jiříček

Člen

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ý!

Najčastejšie vyhľadávané

Diskusia – 3. diel - Bootstrap - Typografia