close

Bootstrap (rámec)

Přejít na navigaci Přejít na hledání
Bootstrap
Bootstrap logo.svg
Obecná informace
vývojář Cvrlikání
První vydání 19. srpna 2011
Licence Licence MIT ( licence Apache 2.0 před 3.0.1)
Skutečný stav Aktivní
Technické informace
Naplánováno v HTML , CSS , LESS (v3), Sass (v4) a JavaScript
Verze
Nejnovější stabilní verze 5.0.2 ( info ) (22. června 2021 (1 rok, 3 měsíce a 25 dní))
Nejnovější verze v testech 2021 ()
historie verzí
Odkazy

Bootstrap je open source multiplatformní knihovna nebo sada nástrojů pro návrh webových stránek a webových aplikací . Obsahuje šablony návrhů s typografií, formuláři, tlačítky, rámečky, navigačními nabídkami a dalšími prvky návrhu založenými na HTML a CSS a také další rozšíření JavaScriptu . Na rozdíl od mnoha webových frameworků se zabývá pouze vývojem front-endu .

Bootstrap je druhým nejvýznamnějším projektem na GitHubu [ 1 ] a mimo jiné jej využívají NASA a MSNBC . [ 2 ] ​[ 3 ]

Původ

Bootstrap, původně nazvaný Twitter Blueprint , byl vyvinut Markem Otto a Jacobem Thorntonem z Twitteru jako rámec pro podporu konzistence mezi interními nástroji. Před Bootstrapem se pro vývoj uživatelského rozhraní používalo několik knihoven, což vedlo k nekonzistencím a velké zátěži údržby. Podle vývojáře Twitteru Marka Otta čelí těmto výzvám:

"...super malá skupina vývojářů a já jsme se dali dohromady, abychom navrhli a postavili nový interní nástroj a viděli jsme příležitost udělat něco jiného. Během tohoto procesu jsme viděli, že vytváříme něco mnohem podstatnějšího než jiný interní nástroj. Měsíce pak skončili jsme s ranou verzí Bootstrapu jako způsobu, jak dokumentovat a sdílet společné designové vzory a aktiva v rámci společnosti."
Mark Otto [ 4 ]

První vývoj v reálných podmínkách nastal během prvního „ Hackweeku “ Twitteru. [ 5 ]​ Mark Otto některým kolegům ukázal, jak pomocí pracovního nástroje urychlit vývoj svých projektů. V důsledku toho byly do rámce zavedeny desítky témat.

V srpnu 2011 Twitter vydal Bootstrap jako open source. V únoru 2012 se stal nejoblíbenějším vývojářským projektem na GitHubu.

Verze

Verze
Verze 1 v1.4.0, v1.3.0, v1.2.0, v1.1.1, v1.1.0, v1.0.0
verze 2 v2.3.2 , v2.3.1, v2.3.0, v2.2.2, v2.2.1, v2.2.0, v2.1.1, v2.1.0, v2.0.4, v2.0.3, v2.0.2, v2.0.1, v2. 0,0
verze 3 v3.3.7 , v3.3.6, v3.3.5, v3.3.4, v3.3.2, v3.3.1, v3.3.0, v3.2.0, v3.1.1, v3.1.0, v3.0.3, v3.0.2, v3. 0.1, v3.0.0
verze 4 v4.6.0 , v4.5.3, v4.5.2, v4.5.1, v4.5.0, v4.4.1, v4.4.0, v4.3.1, v4.3.0, v4.2.1, v4.2.0, v4.1.3, v4. 1.2, v4.1.1, v4.1.0, v4.0.0
verze 5 v5.0.1 , v5.0.0- beta2 , v5.0.0-beta1, v5.0.0-alpha3, v5.0.0-alpha2, v5.0.0-alpha1

Funkce

Bootstrap má relativně neúplnou podporu pro HTML5 a CSS3 , ale je kompatibilní s většinou webových prohlížečů. Základní informace o kompatibilitě webových stránek nebo aplikací jsou dostupné pro všechna zařízení a prohlížeče. Existuje koncept částečné kompatibility, která zpřístupňuje základní informace webové stránky všem zařízením a prohlížečům. Například vlastnosti zavedené v CSS3 pro oblé rohy, přechody a stíny používá Bootstrap navzdory nedostatku podpory ve starších prohlížečích. To rozšiřuje funkčnost nástroje, ale není nutné pro jeho použití.

Od verze 2.0 také podporuje responzivní web design . To znamená, že grafický design stránky je dynamicky upravován s ohledem na vlastnosti použitého zařízení (počítače, tablety nebo mobilní telefony).

Funkce a struktura

Příklad webové stránky využívající Bootstrap Framework
Příklad webové stránky využívající Bootstrap Framework vykreslenou v Mozilla Firefox

Bootstrap je modulární a v podstatě se skládá ze série stylů LESS , které implementují různé komponenty nástroje. Seznam stylů nazvaný bootstrap.less obsahuje komponenty šablony stylů. Vývojáři mohou přizpůsobit samotný soubor Bootstrap výběrem komponent, které chtějí ve svém projektu použít.

Nastavení je možné v omezené míře prostřednictvím centrální konfigurační šablony stylů. Hlubší změny umožňují MÉNĚ prohlášení.

Použití jazyka stylů LESS umožňuje použití proměnných, funkcí a operátorů, vnořených selektorů a také tříd mixin.

Od verze 2.0 má nastavení Bootstrap v dokumentaci také speciální možnost „Přizpůsobit“. Na druhou stranu si vývojáři vybírají ve formě požadované komponenty a nastavení a v případě potřeby hodnoty různých možností, aby vyhovovaly jejich potřebám. Následně vygenerovaný balíček již obsahuje dříve zkompilovanou šablonu stylů CSS.

Grid systém a responzivní design

Bootstrap je dodáván se standardním rozložením mřížky o šířce 940 pixelů. Alternativně může vývojář použít rozložení s proměnnou šířkou. Pro oba případy má nástroj čtyři varianty pro využití různých rozlišení a typů zařízení: mobilní telefony, formát na výšku a na šířku, tablety a počítače s nízkým a vysokým rozlišením (širokoúhlý). Tím se automaticky upraví šířka sloupců.

Pochopení šablony stylů CSS

Bootstrap poskytuje sadu stylů, které poskytují základní definice stylů pro všechny prvky HTML. To dává jednotnost prohlížeči a systému šířky, dává moderní vzhled formátování textových prvků, tabulek a formulářů.

Opakovaně použitelné komponenty

Kromě běžných prvků HTML obsahuje Bootstrap další běžně používané prvky rozhraní. Patří sem tlačítka s pokročilými funkcemi (např. skupina tlačítek nebo tlačítka s možností rozevírací nabídky, navigační seznamy, horizontální a vertikální štítky, navigační cesta, stránkování atd.), štítky, pokročilé možnosti typografických miniatur, formátování pro výstražné zprávy a ukazatele průběhu.

JavaScript pluginy

Komponenty JavaScriptu pro Bootstrap jsou založeny na knihovně JavaScript jQuery . Zásuvné moduly se nacházejí v nástroji zásuvných modulů jQuery . Poskytují další prvky uživatelského rozhraní, jako jsou dialogy, popisky nástrojů a karusely. Rozšiřují také funkčnost některých stávajících prvků rozhraní, včetně například funkce automatického doplňování pro vstupní pole. Verze 2.0 podporuje následující pluginy JavaScriptu : Modální, Dropdown, Scrollspy, Tab, Tooltip, Popover, Alert, Button, Collapse, Carousel a Typeahead.

K dispozici je také implementace Bootstrap pomocí sady nástrojů Dojo . Jmenuje se Dojo Bootstrap [ 6 ] ​[ 7 ]​ a je portem zásuvných modulů Twitter Bootstrap. Využívá 100% kód Dojo a má podporu AMD ( Asynchronous Module Definition [ 8 ] ).

Historie

Rané začátky

Po několika měsících vývoje malou skupinou začalo mnoho vývojářů Twitteru přispívat do projektu v rámci haackweeku , 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. [ 9 ] Mark Otto, Jacob Thornton a malá skupina klíčových vývojářů a také velká komunita přispěvatelů.

Bootstrap 2 a 3

31. ledna 2012 byl vydán Bootstrap 2, který přidal vestavěnou podporu pro glyphicons , několik nových komponent a také změny mnoha existujících komponent. Tato verze podporuje responzivní webdesign, což znamená, že rozložení webových stránek se dynamicky přizpůsobuje s ohledem na vlastnosti použitého zařízení (ať už jde o stolní počítač, tablet nebo mobilní telefon). [ 10 ] Další hlavní verze, Bootstrap 3, byla vydána 19. srpna 2013. Přepracovala komponenty tak, aby využívaly plochý design a mobilní přístup. [ 11 ]

Bootstrap 4

Mark Otto oznámil Bootstrap 4 29. října 2014. [ 12 ] První alfa verze Bootstrapu 4 byla vydána 19. srpna 2015. [ 13 ] První beta verze byla vydána 10. srpna 2017. Mark pozastavil práce na Bootstrapu 3 dne 6. září 2016, aby se uvolnil čas na práci na Bootstrap 4. Bootstrap 4 byl ukončen 18. ledna 2018. [ 14 ]

Mezi důležité změny patří:

  • Přepsání hlavního kódu
  • Nahrazení méně za Sass
  • Přidání Reboot, kolekce změn CSS specifických pro jednotlivé prvky v jediném souboru na základě Normalize
  • Zrušte podporu pro IE8, IE9 a iOS 6
  • Podpora flexibilních boxů CSS
  • Přidejte možnosti přizpůsobení navigace
  • Přidání rozumné velikosti a roztečí utilit
  • Přepněte z pixelové jednotky v CSS na kořenové ems
  • Zvětšená globální velikost písma ze 14px na 16px pro zlepšení čitelnosti
  • Odhoďte panel, miniaturu, lokátor a komponenty studny
  • Drop Icon Písma Glyphicons
  • Velké množství [kvantifikovat] užitných tříd
  • Vylepšený styl formuláře, tlačítka, rozevírací seznamy, mediální objekty a třídy obrázků

Bootstrap 4 je kompatibilní s nejnovějšími verzemi Google Chrome , Firefox , Internet Explorer , Opera a Safari (kromě Windows). Kromě toho podporuje IE10 a nejnovější verzi rozšířené podpory (ESR) Firefoxu . [ 15 ]

Bootstrap 5 Alpha

Bootstrap 5 Alpha byl oficiálně vydán 16. června 2020. [ 16 ]

Mezi důležité změny patří [ 17 ] ​[ 18 ] ​[ 19 ] ​:

  • Zrušte jQuery ve prospěch vanilkového JavaScriptu
  • Přepište mřížku tak, aby podporovala sloupce mimo řádky a citlivé okapy
  • Migrujte dokumentaci z Jekylla do Huga
  • Zrušte podporu pro IE10 a IE11
  • Přesun testovací infrastruktury z QUnit do Jasmine
  • Přidejte vlastní sadu ikon SVG
  • Přidejte vlastní vlastnosti CSS
  • Vylepšené API
  • Vylepšený systém mřížky
  • Vylepšené přizpůsobení dokumentů
  • aktualizované formuláře

Celkem byly vydány 3 verze Bootstrap Alpha [ 20 ]

Bootstrap 5 Beta

Bootstrap 5 Beta byl oficiálně vydán 7. února 2021, tři týdny po vydání třetí alfy.

Verze 5 Beta 2 je aktuálně nejnovější verzí balíčku.

Mezi důležité změny patří [ 21 ] ​[ 20 ] ​:

  • Podpora RTL - zobrazení textu "zprava doleva" např. Např. arabské jazyky
  • Přejmenované třídy pro logické vlastnosti
  • Aktualizujte na Popper.js v2
  • Jmenné datové atributy
  • Vylepšení JavaScriptu a opravy chyb.
  • Vylepšené API: stavy v utilitách

Vyhodnocované změny [ 16 ] ​:

  • Modulový systém Sass
  • Rozšířené používání vlastních vlastností CSS
  • Vložte SVG do HTML namísto CSS

Případy raného použití

verze Bootstrap 5 Beta se objevila několik dní po oficiálním vydání, mezi ty nejdůležitější patří:

  • MDB 5 – Material Design UI Kit pro Bootstrap 5. [ 22 ]

MDB bylo také první, kdo integroval nejnovější verzi Bootstrapu s populárními front-end technologiemi jako Angular , React a Vue . [ 23 ]

Bootstrap 5

Bootstrap verze 5 byla oznámena Markem Ottou 21. prosince 2018 [ 24 ] a po 3 alfa a 3 beta verzích byla oficiálně vydána 5. května 2021. [ 25 ] O několik dní později, 13. května, byla vydána první oprava vydáno, v5.0.1, [ 26 ] , což by byla poslední stabilní verze.

Nové změny a doplňky byly následující:

  • Testování infrastruktury se přesouvá z QUnit do Jasmine.
  • Zahrnutí nové sady ikon SVG a nových vlastností CSS.
  • Vylepšené API .
  • Vylepšený systém mřížky.
  • Vytvoření sekce formulářů včetně nových formulářů.
  • Podpora RTL (zprava doleva) pro systémy psaní zprava doleva.
  • Implementace Dart Sass.

Použití

Chcete-li použít Bootstrap na stránce HTML , vývojář si stačí stáhnout šablonu stylů Bootstrap CSS a odkázat na ni v souboru HTML . Další možností by bylo zkompilovat soubor CSS ze stažené šablony stylů LESS nebo SASS . To lze provést pomocí speciálního kompilátoru.

Pokud chce vývojář používat také komponenty JavaScriptu, musí na ně odkazovat spolu s knihovnou jQuery v dokumentu HTML.

Následující příklad ukazuje, jak to funguje. HTML kód definuje jednoduchý vyhledávací formulář a seznam výsledků v tabulkové podobě. Stránka se skládá z běžných a sémantických prvků HTML 5 a některých dalších informací o třídě CSS podle dokumentace Bootstrap. Obrázek ukazuje znázornění dokumentu v prohlížeči Mozilla Firefox 10 . 

<!DOCTYPE html> 
< html > 
  < head > 
    < title > Příklad bootstrapu </ title >

    <!-- Bootstrap CSS --> 
   < odkaz  rel = "stylesheet"  href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"  integrita = "sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmzUcwg+ /K68vbdEjh4u"  crossorigin = "anonymní" >

   < meta  http-equiv = "Content-Type"  content = "text/html; charset=utf-8" >

  </ hlava >
 
  < body > 
    < div  class = "container" > 
      < h1 > Hledat </ h1 > 
      < label > Příklad jednoduchého vyhledávacího formuláře </ label >

      <!-- Vyhledávací formulář se vstupním polem a tlačítkem --> 
      < class class = "well form  -search" > < input type = "text" class = "input-medium search-query" > < button type = " odeslat" class = "btn btn-primary" > Hledat </ tlačítko > </ formulář >
          
          
      
 
      < h2 > Výsledky </ h2 >
 
      <!-- Tabulka se střídajícími se buňkami barvy pozadí a rámečkem --> 
      < table  class = "table table-stripped table-bordered" > 
        < thead > 
          < tr > 
            < th > # </ th > 
            < th > Title </ th > 
          </ tr > 
        </ thead > 
        < tbody > 
          < tr > 
            < td > 1 </ td > 
            < td > Lorem ipsum pain sit amet. </ td > 
          </ tr > 
          < tr > 
            < td > 2 </ td > 
            < td > Consetetur sadipscing elitr. </ td > 
          </ tr > 
          < tr > 
            < td > 3 </ td > 
            < td > At vero eos et accusam. </ td > 
          </ tr > 
        </ tbody > 
      </ table > 
    </ div >

    <!-- jQuery --> 
    < skript  src = "https://code.jquery.com/jquery-2.2.4.min.js" ></ skript >

    <!-- Bootstrap JS --> 
    < script  src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"  integrita = "sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZTGous"8gUPGanc "PDACDnym"  8gUPGanoc = " PDACDnym"8gUPGanc ></ script > 
  </ body > 
</ html >

Vytvoření pevné mřížky rozvržení 

    < div  class = "row" > 
      < div  class = "col-md-4" > ... </ div > 
      < div  class = "col-md-8" > ... </ div > 
    </ div >

Vytvoření pevné mřížky rozvržení s vnořenou mřížkou tekutého rozvržení 

    < div  class = "row" > 
      < div  class = "col-md-12" > 
        < div  class = "4" > ... </ div > 
        < div  class = "4" > ... </ div > 
        < div  class = "4" > ... </ div > 
      </ div > 
      < div  class = "col-md-8" > ... </ div > 
    </ div >

Reference

  1. ↑ „GitHub: Populární sledovaná úložiště“ . Archivováno z originálu 19. dubna 2010 . Staženo 26. července 2012 . 
  2. ^ "NASA - Spot The Station" . 6. listopadu 2012. Archivováno z originálu 24. srpna 2013 . Staženo 17. února 2013 . 
  3. ↑ "MSNBC-Beaking News" . 6. listopadu 2012. 
  4. ↑ Mark Otto (17. ledna 2012). "Bootstrap in A List Apart #342" . Staženo 5. března 2012 . 
  5. ↑ Mark Otto (19. srpna 2011). Bootstrap z Twitteru . Archivováno z originálu 12. května 2012 . Staženo 27. dubna 2012 . 
  6. ↑ Blog: Použití Twitter Bootstrap s Dojo . Získáno 18. 9. 2012
  7. ↑ Dojo Toolkit implementace Twitter Bootstrap . Získáno 18. 9. 2012
  8. ↑ AMD pro asynchronní načítání modulů a jeho závislostí . Získáno 18. 9. 2012
  9. ↑ „Bootstrap z Twitteru“ . blog.twitter.com (v americké angličtině) . Staženo 15. března 2021 . 
  10. ^ "Pozdravte Bootstrap 2.0" . blog.twitter.com (v americké angličtině) . Staženo 15. března 2021 . 
  11. ↑ Otto, Mark (19. srpna 2013). Vydán Bootstrap 3 . Bootstrap Blog . Staženo 15. března 2021 . 
  12. ↑ Otto, Mark (29. října 2014). Vydán Bootstrap 3.3.0 . Bootstrap Blog . Staženo 15. března 2021 . 
  13. ↑ Otto, Mark (19. srpna 2015). Bootstrap 4 alpha . Bootstrap Blog . Staženo 15. března 2021 . 
  14. ↑ Otto, Mark (18. ledna 2018). Bootstrap 4 . Bootstrap Blog . Staženo 15. března 2021 . 
  15. ↑ přispěvatelé, Mark Otto, Jacob Thornton a Bootstrap. „Úvod“ . getbootstrap.com (v angličtině) . Staženo 15. března 2021 . 
  16. ^ a b Otto, Mark (16. června 2020). "Bootstrap 5 alpha!" . Bootstrap Blog . Staženo 15. března 2021 . 
  17. ↑ Otto, Mark (21. prosince 2018). "Bootstrap 4.2.1" . Bootstrap Blog . Staženo 15. března 2021 . 
  18. ↑ Otto, Mark (11. února 2019). Bootstrap 4.3.0 . Bootstrap Blog . Staženo 15. března 2021 . 
  19. ↑ "Bootstrap 5 grid by MartijnCuppens · Pull Request #28517 · twbs/bootstrap" . GitHub (v angličtině) . Staženo 15. března 2021 . 
  20. ^ a b "Bootstrap 5 beta 2 - Shrnutí, stažení, návod a další verze" . MDB - Material Design pro Bootstrap . Staženo 15. března 2021 . 
  21. ↑ Otto, Mark (7. prosince 2020). "Bootstrap 5 Beta 1" . Bootstrap Blog . Staženo 15. března 2021 . 
  22. ^ "Bootstrap 5 & Material Design 2.0" . MDB - Material Design pro Bootstrap . Staženo 15. března 2021 . 
  23. ↑ „Material Design for Bootstrap 5 & 4 – nejoblíbenější a bezplatný UI KIT“ . Material Design pro Bootstrap . Staženo 15. března 2021 . 
  24. ↑ Otto, Mark (21. prosince 2018). "Bootstrap 4.2.1" . Bootstrap Blog . Staženo 23. května 2021 . 
  25. ↑ Otto, Mark (5. května 2021). Bootstrap 5 . Bootstrap Blog . Staženo 23. května 2021 . 
  26. ↑ Otto, Mark (13. května 2021). Bootstrap 5.0.1 . Bootstrap Blog . Staženo 23. května 2021 . 

Bibliografie

  • Angel Escobar, Alvarez Carmona a Alvarez Ocampo, David, Juan Esteban a Daniel (14. srpna 2019). Twitter Bootstrap Web Development (1. vydání). Packt Publishing . p. 100. ISBN  978-1849518826 . Archivováno z originálu 25. října 2013 . Staženo 17. února 2013 . 

Externí odkazy

Získáno z « https://es.wikipedia.org/w/index.php?title=Bootstrap_(framework)&oldid=146456710 »