21. září bude sraz! Od 18.00 v restauraci Tradice v Praze u Anděla
Autor Zpráva
Pearljam
Profil
Připravuji si webové stránky (HTML,CSS) které nemám na šabloně Bootstrap, ale chtěl bych použít některá tlačítka a ikonky z Bootstrap.
Když do HTML vložím tlačítko, tak se mi zobrazí klasické tlačítko.
<button type="button" class="btn btn-success btn-block">Medium</button>

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í.
Nevíte kde může být chyba ? Nebo musím ještě něco v kódu dodat aby se mi pouze stylovalo tlačítko?
Je vůbec možné využít jednotlivé komponenty aniž bych použil celou šablonu Bootstrap ?

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Tomáš123
Profil
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.
Keeehi
Profil
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.
Pearljam
Profil
Tlačítek budu mít samozřejmě na webu více a různých, nedělám to jen kvůli tlačítek ale využiji i nějaký input.
Na Bootstrap jsem narazil nedávno, teď jsem si procházel soubor bootstrap.min.css a zkusil jsem odmazat všechny nadpisy H a pomohlo to. Moc nerozumím těm souborům .less, stáhnul jsem si celou složku a je tam soubor buttons.less ale jak to můžu zkompilovat s HTML ?
Keeehi
Profil
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
Profil
Máš pravdu, tím že jsem něco odmazal tak se problém odtranil pouze částečně, protože tam zůstalo ještě spousta dalších tříd které mi mění vzhled. Na stránkách jsem našel pár online kompilatorů, ale vždy když tak zkopíruji ten less soubor vypíše to pár chyb v souboru. Asi to udělám jednoduše a nastyluji si to sám přes css. A děkuji za rady a ochotu.
Keeehi
Profil
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.
variables.less
mixins/vendor-prefixes.less
mixins/tab-focus.less
mixins/opacity.less
mixins/buttons.less

buttons.less

To se dá ale lehce vyřešit pomocí importu. Vytvořím si soubor main.less s obsahem
@import "variables.less";
@import "mixins/vendor-prefixes.less";
@import "mixins/tab-focus.less";
@import "mixins/opacity.less";
@import "mixins/buttons.less";

@import "buttons.less";
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š.
Pearljam
Profil
Keeehi:
Udělal jsem to přesně podle tvého návodu pomocí importu, online se mi to nedařilo tak jsem si vyhledal skvělý program Koala který mi potřebné soubory převedl. Mám ještě dotaz jak mohu zjistit které soubory jsou potřeba pro danou funkci importovat ? Chtěl jsem zkompilovat input a alert a opět error ? Moc děkuji
Keeehi
Profil
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.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0