NOVINKA: Kurz kybernetické bezpečnosti s akreditací MŠMT, nyní již od 0 Kč. Staň se žádaným profesionálem. Zjisti více:
NOVINKA: Staň se datovým analytikem a získej jistotu práce, lepší plat a nové kariérní možnosti. 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
Nejnovější komentáře jsou na konci poslední stránky.
Avatar
Jan Brinar
Člen
Avatar
Jan Brinar:26. ledna 17:27

Jelikož se tu množí dotazy, že si chce vyzkoušet, tak mě se osvědčilo toto - můžete to brát jako inspiraci / zadání.

  1. Stáhni Bootstrap, rozbal ve složce v Dropboxu (to už máte z minula)
  2. Vytvoř ve stejné složce složku Ukazky a otevři ji ve VS Code
  3. Ve složce Ukazky vytvoř soubor test.html (zatím prázdný)
  4. Začni vytvářet šablonu ve formátu JSON, kterou budeš testovat v souboru test.html ad. 4) Ve VS Code klikni na File (Soubor) > Preferences (Předvolby) >Configure Snippets (Konfigurace fragmentů kódu) > Zadej "html json" > stiskni 'Enter'
  5. Šablona je prázdná, kromě komentářů, je potřeba ji opatřit tvým kódem. Použij kód z ukázek ze seriálu (např. <button>"Tlačít­koL</button>) avšak pozor, uvozovky se musí escapovat pomocí

` \ `
jinak kód nebude fungovat.

Ukázka 'htmlBootstrap' šablony ve formátu JSON:

{
"HTML5 with Bootstrap": {
                "prefix": "htmlBootstrap",
                "body": [
                        "<!DOCTYPE html>",
                        "<html lang=\"cs\">",
                        "<head>",
                        "  <meta charset=\"UTF-8\">",
                        "  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
                        "  <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
                        "  <title>$1</title>",
                        "  <link href=\"css/bootstrap.min.css\" rel=\"stylesheet\">",
                        "<!-- Bootstrap Icons CSS @online -->",
                        "<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css\">",
                        "  <script src=\"js/bootstrap.bundle.min.js\" defer></script>",
                        "</head>",
                        "<body>",
                        "<div class=\"container py-4\">",

                        "  <h1>Vítej! <i class=\"bi bi-alarm\"></i></h1>",
                        "</div>",
                        "</body>",
                        "</html>"
                ],
                "description": "Vlož HTML5 šablonu s odkazy na CSS a JS"
        }
}

Šablona se vyvolá voláním htmlBootstrap v prázdném souboru html.

Bootstrap je lokální, ale všimněte si, že ikony jsou linkovány ze vzdáleného úložiště.

Odpovědět
Nikdy se nevzdávej!
Nejnovější komentáře jsou na konci poslední stránky.
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 1 zpráv z 21.