NOVINKA - Online rekvalifikační kurz Python programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
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í.

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
Avatar
David Hartinger
Vlastník
Avatar
David Hartinger:7.11.2017 12:46

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

Odpovědět
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ě.

 
Odpovědět
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

 
Odpovědět
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>
Editováno 30.4.2022 10:10
 
Odpovědět
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ť.

 
Odpovědět
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/)

 
Odpovědět
20.12.2022 23:43
Avatar
Radek Jindra
Člen
Avatar
Odpovídá 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>
Odpovědět
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é.

 
Odpovědět
29.4.2023 14:40
Avatar
Ľuboš Holčák
Člen
Avatar
Odpovídá na Radek Jindra
Ľuboš Holčák:26.5.2023 11:34

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

 
Odpovědět
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.

 
Odpovědět
18.10.2023 13:33
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 16.