Diskuze – Lekce 3 - Bootstrap - Typografie

Zpět

Upozorňujeme, že diskuze pod našimi online kurzy jsou nemoderované a primárně slouží k získávání zpětné vazby pro budoucí vylepšení kurzů. Pro studenty našich rekvalifikačních kurzů nabízíme možnost přímého kontaktu s lektory a studijním referentem pro osobní konzultace a podporu v rámci jejich studia. Toto je exkluzivní služba, která zajišťuje kvalitní a cílenou pomoc v případě jakýchkoli dotazů nebo projektů.

Komentáře

Nejnovější komentáře jsou na konci poslední stránky.

David Hartinger

Vlastník

David Hartinger:7.11.2017 12:46

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

Odpovědět

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

Odpovědět

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

Odpovědět

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>

Editováno

Odpovědět

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

Odpovědět

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/)

Odpovědět

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>

Odpovědět

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

Odpovědět

Ľuboš Holčák

Člen

Ľuboš Holčák:26.5.2023 11:34

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

Odpovědět

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.

Odpovědět

Nejnovější komentáře jsou na konci poslední stránky.

Naučíme tě pracovat na home-office.

Zjistit více...

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 10 zpráv z 20.

Nejčastěji vyhledáváné

Diskuze – Lekce 3 - Bootstrap - Typografie