Buttons bootstrap

Pearljam:
„tak vložím do HEAD v HTML níže uvedený kód“
A načo? Dosť ťažký kaliber na vzhľad jedného tlačidla... Nestačilo by skopírovať jednu deklaráciu onej triedy? Prípadne, sám si to nakódovať, vôbec nepotrebuješ bootstrap triedu.

Pearljam:
„Aby tlačítka byly ve stylu Bootstrap tak vložím do HEAD v HTML níže uvedený kód, ale stránka se mi rozhodí, nadpisy H1,H2 se mi změní.“
Když přidáš styl pro celý bootstrap, tak se nemůžeš divit, že ovlivní i jiné elementy. Budeš si muset vytvořit svůj speciální. Stáhneš si zdrojové lesy soubory bootstrapu a zkompiluješ si co potřebuješ (nejspíše jen buttons.less). Hlavní je ve výsledném souboru nemít definice z normalize.less protože tam by měly být definice co ovlivňují elementy přímo. Ostatní by měly ovlivňovat jen přes třídy. Což by mohlo kolidovat jen v případě, že by třídy ve tvém stylopisu se jmenovaly náhodou stejně jako ty z bootstrapu.

Ty less soubory jsou vlastně zdrojové kódy, ze kterých vznikne se dá vytvořit CSS. Je to vlastně takové CSS na steroidech. Můžou se tam používat funkce, proměnné atp. Ale tento zdrojový kód je potřeba pak přeložit do finálního CSS. K tomu slouží program jménem Less. Na linuxu by nejjednodušší překlad pak vypadal takto lessc buttons.less buttons.css. Na lesscss.org/usage je popsáno i spoustu jiných možností pro různé operační systémy.

Pearljam:
„teď jsem si procházel soubor bootstrap.min.css a zkusil jsem odmazat všechny nadpisy H a pomohlo to“
To je sice taky možnost ovšem asi ta nejhorší možná. Je to pracné, náchylné na chyby. Bootstrapu taky kromě nadpisů resetuje další elementy, ty jsi taky odmazal? A taky ti tam zbyly nepotřebné třídy.

Pearljam:
„ale vždy když tak zkopíruji ten less soubor vypíše to pár chyb v souboru“
To je pravda. Je to dáno tím, že jak je to css na steroidech a používá to ty funkce a proměnné tak ty jsou definované v jiných souborech. Přesněji řečeno v 5ti dalších souborech.

To se dá ale lehce vyřešit pomocí importu. Vytvořím si soubor main.less s obsahem
A to si nechám zkompilovat. Pokud to děláš online, tak těch 5 souborů na kterých je button.less závislý prostě postupně před něj nakopíruješ.

Já jsem je hledal tak, že jsem si vzal ten soubor buttons.less a nechal si ho zkompilovat. Zahlásilo mi to, že mi tam chybí určitá proměnná. Tak jsem si v repositáři na GitHubi nechal vyhledat, ve kterých všech souborech se vyskytuje. Vyhodili mi to asi 10 souborů a bylo vidět, že je definována ve variables.less. Tak jsem ho přidal k původnímu souboru. Znovu jsem si to nechal zkompilovat a tentokrát to neznalo nějakou funkci. Tak jsem zase našel ve kterém souboru je definovaná a zen jsem zase přidal. A kompiloval znova. No a prostě po 5ti přidaných souborech už kompilace dopadla v pořádku.