Array ( [0] => 15586815 [id] => 15586815 [1] => cswiki [site] => cswiki [2] => Bootstrap [uri] => Bootstrap [3] => [img] => [4] => [day_avg] => [5] => [day_diff] => [6] => [day_last] => [7] => [day_prev_last] => [8] => [oai] => [9] => [is_good] => [10] => [object_type] => [11] => 0 [has_content] => 0 [12] => [oai_cs_optimisticky] => ) Array ( [0] => {{Infobox - software}} [1] => [[Soubor:Twitter Bootstrap Under Firefox 32.png|náhled|Příklad webové stránky používající Bootstrap v [[Mozilla Firefox]]|upright=1.3]] [2] => '''Bootstrap''' je [[Svobodný a otevřený software|svobodná a otevřená]] sada nástrojů [[Kaskádové styly|kaskádových stylů]] pro tvorbu [[World Wide Web|webu]] a webových aplikací.{{Citace elektronické monografie [3] => | titul = Bootstrap tutorial [4] => | vydavatel = W3school [5] => | datum_přístupu = 2014-11-11 [6] => | url = http://www.w3schools.com/bootstrap/ [7] => }} Obsahuje návrhářské šablony založené na [[Hypertext Markup Language|HTML]] a [[Kaskádové styly|CSS]], sloužící pro úpravu [[typografie]], formulářů, tlačítek, navigace a dalších komponent rozhraní, stejně jako další volitelná rozšíření programovacího jazyka [[JavaScript]]u. Pro použití Bootstrapu jsou nutné základní znalosti HTML a CSS, interaktivní prvky jako jsou tlačítka, boxy, menu a další kompletně nastavené a graficky zpracované elementy je totiž možné vložit pouze pomocí HTML a CSS.{{Citace elektronické monografie [8] => | titul = Bootstrap [9] => | vydavatel = Bootstrap [10] => | datum_přístupu = 2013-05-30 [11] => | url = http://getbootstrap.com/ [12] => }} [13] => [14] => == Dějiny == [15] => [16] => === Rané začátky === [17] => Bootstrap, původně pojmenovaný Twitter Blueprint, vyvinuli Mark Otto a Jacob Thornton na Twitteru jako rámec pro podporu konzistence mezi interními nástroji. Před Bootstrapem se pro vývoj rozhraní používaly různé knihovny, což vedlo k nekonzistencím a vysoké zátěži údržby. Podle vývojáře Twitteru Marka Otta: [18] => [19] => Se super malou skupinou vývojářů jsme se dali dohromady, abychom navrhli a postavili nový interní nástroj a viděli jsme příležitost udělat něco víc. Prostřednictvím tohoto procesu jsme viděli sami sebe vybudovat něco mnohem podstatnějšího než jiný interní nástroj. O měsíce později jsme skončili s ranou verzí Bootstrap jako způsob, jak dokumentovat a sdílet společné designové vzory a aktiva v rámci společnosti.{{Citace monografie [20] => | příjmení = Roget [21] => | jméno = Peter Mark [22] => | titul = 2031 FROM PETER MARK ROGET 23 February 1809 [23] => | url = http://dx.doi.org/10.1093/oseo/instance.00066314 [24] => | vydavatel = Oxford University Press [25] => }} [26] => [27] => Po několika měsících vývoje malou skupinou začalo do projektu přispívat mnoho vývojářů z Twitteru v rámci Hack Week, týdne ve stylu hackathonu pro vývojový tým Twitteru. Byl přejmenován z Twitter Blueprint na Bootstrap a vydán jako open-source projekt 19. srpna 2011.{{Citace monografie [28] => | příjmení = Hsieh [29] => | jméno = Yuli Patrick [30] => | příjmení2 = Murphy [31] => | jméno2 = Joe [32] => | titul = Total Twitter Error [33] => | url = http://dx.doi.org/10.1002/9781119041702.ch2 [34] => | vydavatel = John Wiley & Sons, Inc. [35] => | místo = Hoboken, NJ, USA [36] => | strany = 23–46 [37] => }} Nadále jej udržují Mark Otto, Jacob Thornton, malá skupina hlavních vývojářů a velká komunita přispěvatelů.{{Citace monografie [38] => | příjmení = Carlyle [39] => | jméno = Thomas [40] => | titul = CROWN-PRINCE RETRIEVED: LIFE AT CUSTRIN NOVEMBER 1730-FEBRUARY 1732 [41] => | url = http://dx.doi.org/10.1017/cbo9780511694677.004 [42] => | vydavatel = Cambridge University Press [43] => | místo = Cambridge [44] => | strany = 342–406 [45] => }} [46] => [47] => == Původ == [48] => Slovo ''bootstrap'' původně znamenalo poutko u boty, štrupli.HAIS, Karel; HODEK, Břetislav. Velký anglicko-český slovník. I., A–M. V nakl. Leda 1. vyd., v nakl. Academia 3., přeprac. vyd. Voznice: Leda; Praha : Academia, 1997. 1504 s. ISBN 80-85927-35-7, ISBN 80-200-0673-7. [49] => [50] => V oblasti informačních technologií ''bootstrap'' představili Mark Otto a Jacob Thornton jako [[framework]] podporující konzistenci mezi interními nástroji. Před Bootstrapem byla pro vývoj [[Rozhraní (informatika)|rozhraní]] využívána řada [[Knihovna (programování)|knihoven]], což vedlo k nekonzistenci [[Zdrojový kód|zdrojových kódů]] a velké náročnosti na údržbu. Vývojář Mark Otto o něm prohlásil: „''Velmi malá skupina vývojářů společně se mnou měla za úkol navrhnout a vybudovat nový interní nástroj a viděla příležitost udělat něco více. Skrze tento proces jsme chtěli vytvořit něco o moc důležitějšího než další nástroj pro vnitřní využití. O měsíc později jsme skončili s první verzí Bootstrapu jako metodou k dokumentaci a sdílení běžných designových vzorů a přínosů ve společnosti.''“{{citace elektronické monografie|url=http://www.markdotto.com/2012/01/17/bootstrap-in-a-list-apart-342 |vydavatel=Mark Otto|titul=Bootstrap in A List Apart #342 |datum vydání=2012-01-17 |datum přístupu=2012-03-05}} [51] => [52] => V srpnu 2011 byl vydán Twitter Bootstrap jako [[otevřený software]] a v únoru 2012 se stal nejoblíbenějším developerským projektem na [[GitHub]]u. [53] => [54] => == Funkce == [55] => Výhodou tohoto souboru nástrojů je snadné zpracování jakéhokoliv uživatelského rozhraní ve webové aplikaci a nerozhoduje, zda to je například uživatelské rozhraní v administraci back-endových nebo front-endových aplikací. Bootstrap je kompatibilní s poslední verzí všech hlavních prohlížečů a elegantně se přizpůsobuje použití na starších prohlížečích jako je [[Internet Explorer]] 8. Od verze 2.0 také podporuje [[Responzivní web design|responzivní design]]. To znamená, že se rozložení stránky dynamicky přizpůsobuje s ohledem na používané zařízení (stolní počítač, tablet, mobilní telefon). [56] => [57] => Bootstrap má otevřenou licenci a je dostupný na [[GitHub]]u. Vývojáři jsou povzbuzováni k účasti na projektu a vytváření jejich vlastního podílu na platformě. Nedávno členové komunity přeložili dokumentaci Bootstrapu do mnoha různých jazyků, včetně čínštiny, španělštiny a ruštiny. Česká verze prozatím chybí. [58] => [59] => == Struktura a funkce == [60] => Bootstrap je modulární a sestává v zásadě ze série [[LESS]] kaskádových stylopisů (html stránek), které implementují různorodé komponenty sad nástrojů. Komponenty bootstrapu jsou zahrnuty ve stylopisu bootstrap.less. Vývojáři si mohou přizpůsobit soubor Bootstrap samostatně výběrem komponent, které chtějí použít pro svůj projekt. Nastavení jsou možná do určité míry skrze centrální konfigurační stylopis. Hlubší změny jsou možné pomocí LESS deklarací. Užití jazyka stylopisu LESS umožňuje používání proměnných, funkcí, vnořených selektorů atd. [61] => [62] => Základní forma Bootstrapu jsou kompilované soubory, které lze použít na kterémkoliv webovém projektu. Bootstrap poskytuje kompilované [[Kaskádové styly|CSS]] a JS (bootstrap.*), stejně jako kompilované a minimalizované CSS a JS soubory (bootstrap.min.*). Obrázkové soubory jsou komprimované pomocí [[ImageOptim]], což je [[Mac OS|Mac]] aplikace pro komprimování [[PNG]] souborů. Twitter Bootstrap je závislý na javascriptové knihovně [[jQuery]]. [63] => [64] => Od verze 2.0 obsahuje konfigurace Bootstrapu v dokumentaci také speciální volbu „Customize“. Navíc vývojáři mohou volit formu požadovaných součástí a jejich nastavení, pokud je třeba. Následně vygenerovaný balík již obsahuje před-vytvořený CSS stylopis. Systém mřížek a [[Responzivní web design|responzivní webový design]] je standardně s 1170 px širokým mřížkovým [[layout]]em. Případně může vývojář použít šířku layoutu řízenou proměnnou. Pro oba případy má sada nástrojů čtyři variace vytváření různých rozlišení a typů zařízení: mobilní telefony, portrét a krajina, tablety a počítače s nízkým a vysoký rozlišením. Každá varianta reguluje s šířkou sloupců. [65] => [66] => Po stažení a rozbalení souboru naleznete tuto strukturu: [67] => bootstrap/ [68] => ├── css/ [69] => │ ├── bootstrap.css [70] => │ ├── bootstrap.min.css [71] => ├── js/ [72] => │ ├── bootstrap.js [73] => │ ├── bootstrap.min.js [74] => └── img/ [75] => ├── glyphicons-halflings.png [76] => └── glyphicons-halflings-white.png [77] => [78] => Adresáře se stylopisy, skripty a obrázky si lze ve vlastním projektu přejmenovat (a adekvátně k tomu urovnat odkazy k nim). Od novějších verzí Bootstrap opustil cestu vlastních obrázků a od verze 4.0 i vektorové grafiky prostřednictvím vlastních fontů. [79] => [80] => === Stylopis CSS === [81] => Bootstrap poskytuje sadu stylopisů, které poskytují základní definice stylů pro všechny klíčové části [[HyperText Markup Language|HTML]]. Ty poskytují jednotný, moderní vzhled pro formátování textu, tabulek a formulářových prvků. [82] => [83] => === Znovu využitelné komponenty === [84] => Vedle obvyklých HTML prvků, bootstrap obsahuje další běžně využívané prvky uživatelského rozhraní. To zahrnuje tlačítka s pokročilými možnostmi nastavení a funkcemi (např. seskupování tlačítek nebo tlačítka s [[drop-down menu]], vytváření navigačních listů, horizontální, či vertikální záložky, navigace, [[drobečková navigace]], [[stránkování]], atd.), štítky, pokročilé možnosti typografie, generování [[náhled]]ů, varovná oznámení a panel průběhu. [85] => [86] => === Komponenty === [87] => [[Soubor:Sample_Alert_Messages_in_Bootstrap.png|náhled|400px|Upozornění v Bootstrapu (úspěch, informace, varování, chyba/nebezpečí)]] [88] => Bootstrap je dostupný s několika JavaScriptovými komponenty ve formě [[jQuery]] [[plug-in]]ů. Ty poskytují rozšiřující možnosti uživatelského rozhraní jako [[Dialogové okno|dialogová okna]], [[tooltipy]], atd. Také rozšiřují funkcionalitu dosavadních prvků uživatelského rozhraní, to zahrnuje např. funkci auto-doplňování pro vstupní formulářová pole. Ve verzi 4.0 jsou podporovány následující tyto komponenty: [89] => [90] => * Alerts (zprávy o chybě, úspěchu, varování, informaci), [91] => * Badge (notifikační texty typu: počet nepřečtených zpráv) [92] => * Breadcrumb (drobečková navigace) [93] => * [[Tlačítko (počítač)|Buttons]] (tlačítka), [94] => * Button group (skupina tlačítek) [95] => * Card (štítky/kartičky) [96] => * Carousel („kolotoč“ obrázků) [97] => * Collapse (efekt pro smrsknutí obsahu elementu), [98] => * Dropdowns (rozbalovací políčka s nabídkou), [99] => * Forms (formuláře) [100] => * Input group (skupina vstupních/formulářových prvků) [101] => * Jumbotron (největší prvek stránky) [102] => * List group (stylizované seznamy) [103] => * Media (styly pro zobrazení médií – obrázků, videí, …) [104] => * Modal ([[Modální okno|modální]] [[Dialogové okno|dialogová okna]]/layovery), [105] => * Navs (prvky v navigační liště) [106] => * Navbar (navigační lišta) [107] => * Pagination (stránkování) [108] => * Popovers (otevírací okna), [109] => * Progress (znázornění průběhu nějaké operace nebo procesu) [110] => * Scrollspy (ukazatel nadpisu, k němuž je aktuálně posunutá stránka), [111] => * Tabs (přepínatelné prvky, z nichž je zobrazen právě jeden), [112] => * Tooltips (bublinková nápověda), [113] => [114] => Řada z těchto komponent má implementované JavaScriptové funkce, pomocí kterých je lze ovládat. Pro některé z nich Bootstrap definuje též události, na které si uživatelé mohou „navěsit“ spuštění vlastního kódu (např. při vyvolání nebo zavření modálního okna). [115] => [116] => === Mřížkový systém === [117] => Bootstrap už od jedné z prvotních verzí implementoval tzv. mřížkový systém. Ten funguje v součinnosti se zlomovými body pro šířku okna. [118] => V mřížkovém systému lze jednotlivým elementům říci, jaký zlomek z šířky rodičovského elementu mají zabírat. To se dělá přidáváním správné třídy správným elementům. [119] => [120] => [121] =>
[122] =>
[123] => Postranní panel [124] =>
[125] =>
[126] => Hlavní panel [127] =>
[128] =>
[129] => [130] => [131] => Ve výše uvedeném příkladu se dva elementy v rodičovském elementu (postranní a hlavní panel) nastylují tak, aby pro velikost (nebo rozsah šířek oken) ''lg'' (large) zabíraly 3/12 (tj. 1/4) resp. 9/12 (tj. 3/4) šířky rodičovského elementu a pro velikost ''md'' (medium) byl tento poměr 4/12 a 8/12, tedy 1/3 a 2/3. Pro velikost ''sm'' (small) a ''xs'' (extra small) nebudou vedle sebe, ale pod sebou (implicitní chování). Jmenovatel těchto zlomků, 12, lze v konfiguraci změnit, ale vzhledem k jeho dobré dělitelnosti to většinou není potřeba. A současně, přesnost rozdělení na dvanáctiny stejně jako možnost rovnoměrného rozdělení prvků po celé šířce na poloviny, třetiny, čtvrtiny, šestiny a dvanáctiny stačí pro naprostou většinu případů. [132] => [133] => == Příklad == [134] => Běžná HTML šablona: [135] => [136] => [137] => [138] => [139] => [140] => Bootstrap vzor [141] => [142] => [143] => [144] =>

Ahoj, světe!

[145] => [146] => [147] => [148] => [149] => [150] => Pokud chceme ze šablony vytvořit se šablonou Bootstrapu, stačí vložit vhodné JS a CSS soubory: [151] => [152] => [153] => [154] => [155] => [156] => Bootstrap vzor [157] => [158] => [159] => [160] => [161] => [162] => [163] => [164] =>

Ahoj, světe!

[165] => [166] => [167] => [168] => [169] => == Použití == [170] => K využití Bootstrapu na svojí stránce musí vývojáři stáhnout [[Kaskádové styly|CSS]] stylopis Bootstrapu a odkázat na něj v hlavičce HTML souboru. (Také je možno kompilovaný formát CSS souboru ze stažených LESS stylopisů.) Pro využití JavaScriptových komponentů je nutné je v HTML dokumentu definovat až po knihovně jQuery. [171] => [172] => == Odkazy == [173] => === Reference === [174] => {{Překlad| jazyk = en| článek = Bootstrap (front-end framework)| revize = 609469245}} [175] => [176] => [177] => === Související články === [178] => * [[Bootstrapping]] [179] => [180] => === Externí odkazy === [181] => * {{Commonscat|Bootstrap (framework)}} [182] => * [http://getbootstrap.com/ Bootstrap] – Oficiální stránky, obsahují dokumentaci a soubory ke stažení [183] => {{Autoritní data}} [184] => {{Portály|Internet|Svobodný software}} [185] => [186] => [[Kategorie:Webové aplikační frameworky]] [187] => [[Kategorie:Webdesign]] [188] => [[Kategorie:Svobodný software]] [] => )
good wiki

Bootstrap

upright=1. 3 Bootstrap je svobodná a otevřená sada nástrojů kaskádových stylů pro tvorbu webu a webových aplikací.

More about us

About

Expert Team

Vivamus eget neque lacus. Pellentesque egauris ex.

Award winning agency

Lorem ipsum, dolor sit amet consectetur elitorceat .

10 Year Exp.

Pellen tesque eget, mauris lorem iupsum neque lacus.

You might be interested in

,'Kaskádové styly','jQuery','Dialogové okno','GitHub','Responzivní web design','Kategorie:Webdesign','Bootstrapping','Tlačítko (počítač)','Soubor:Twitter Bootstrap Under Firefox 32.png','Internet Explorer','plug-in','Svobodný a otevřený software'

Bootstrapping

GitHub

JQuery

Kategorie:Webdesign