Jak mohu použít komponenty Bootstrap na našem webu?
Pokud děláte cokoli souvisejícího s webem, pravděpodobně jste už o Bootstrapu slyšeli. Pokud stále nevíte, co je Bootstrap v tomto okamžiku. Jak můžeme zahrnout komponenty Bootstrap na náš web?
Nebo jen chcete získat lepší přehled o tom, co se stalo a nejvíce funguje, že jste na správném místě.
Jak můžeme zahrnout komponenty Bootstrap na náš web?
Plantilla HTML Bootstrap básica Una plantilla HTML básica de Bootstrap debería tener este aspecto: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap Template</title> <link href="https://miracomohacerlo.com/usar-componentes-bootstrap-web/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <h1>Hello, world!</h1> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
Je důležité začít jakýkoli HTML s deklarací HTML 5 Doctype, takže skenery vědí, jaký typ dokumentu očekávat.
Nadpis obsahuje tři značky důležité musí být nejprve deklarováno a po nich musí být přidány všechny další značky záhlaví.
Bootstrap šablony a komponenty uživatelského rozhraní
Bootstrap je dodáván se základními návrhovými šablonami HTML a CSS obsahujícími mnoho běžných komponent uživatelského rozhraní. Patří mezi ně typografie, tabulky, formuláře, tlačítka, glyfy, rozevírací nabídky, tlačítka a skupiny vstupů.
Navigace, stránkování, značky a odznaky, výstrahy, indikátory průběhu, mody, karty, akordeony, kolotoče a další. Většina z nich používá rozšíření JavaScriptu a doplňky jQuery.
Bootstrap Grid System
Mřížky poskytují strukturu návrhu, vodorovné směry a vertikální uspořádání obsahu a zvýšení okrajů.
Mřížky také poskytují divákům intuitivní strukturu, protože je snadné sledovat proud obsahu zleva doprava nebo zprava doleva při procházení stránkou.
V mřížkovém systému Bootstrap jsou čtyři úrovně: xs pro telefony (
V zásadě definují rozměry, ve kterých se sloupce zúží nebo horizontálně rozprostírají. Úrovně tříd lze použít v jakékoli kombinaci pro dynamické a flexibilní rozvržení.
Pokud bychom například chtěli získat dva řádky, jeden se dvěma sloupci a druhý se čtyřmi sloupci, mohli bychom napsat:
<div class="row"> <div class="col-md-6">First column</div> <div class="col-md-6">Second column</div> </div> <div class="row"> <div class="col-md-3">First column</div> <div class="col-md-3">Second column</div> <div class="col-md-3">Third column</div> <div class="col-md-3">Fourth column</div> </div>
Bootstrap typografie
Začínající vývojáři často vytvářejí vlastní čisté HTML a žádný styl nevypadá ve všech prohlížečích stejně.
Každý prohlížeč má bohužel vlastní «uživatelský agent»To platí pro HTML a žádné dva prohlížeče nemají stejné výchozí hodnoty.
Bootstrap nastavuje základní přehled, typografii a styly odkazů. Zvláště:
- Ustanovit barva pozadí: #fff; v těle
- Použijte atributy @ font-family-base, @ font-size-base a @ výška řádku-základna jako náš základ písma
- Nastavit barvu globálního odkazu na: @ barva odkazu a použít podtržítka odkazu pouze na:
- Tyto styly najdete v molo.
Čísla
Zatímco HTML5 nabízí řadu nových atributů formulářů, typů vstupů a dalších pomocníků, prohlížeče vizuální podobu moc nezlepšily.
To je jedna oblast, kde Bootstrap opravdu svítí, proč zarovnávat a stylizovat značky nebo položky, ověřování formulářů a prohlížení chybových zpráv může být bez pomoci obtížné.
Obrázky a ikony
Bootstrap přichází s více než 260 glyfy ve formátu písma, to je skvělé. Symboly písem mají oproti jednoduchým bitmapovým obrázkům mnoho výhod, jednou z nich je, že jsou škálovatelné.
Lze je také snadno přizpůsobit pomocí pouze CSSTakže změna velikosti nebo barvy nebo dokonce přidání odstínu je hračka.
Tlačítka, skupiny tlačítek a rozbalovací nabídky
Tlačítka jsou jednou z věcí, které každý prohlížeč nabízí úplně jinak. Pokud chcete mít konzistentní rozložení mezi prohlížeči, to je potenciálně velký problém.
Naštěstí, Bootstrap má efektní řešení i pro tlačítka. A kromě toho, že je dělá konzistentní, přináší spoustu variací na hraní.
Můžete použít C.lase .btn k prvkům a . Pomocí třídy můžete seskupit řadu tlačítek do jednoho řádku.skupina btn v
manažer.
S trochou pomoci z JavaScriptu můžete vytvářet chování rádiového stylu a zaškrtávací políčko na tlačítkách.
Nebo můžete tlačítka umístit do skupiny a proměnit je v rozevírací nabídky. .btn a poskytnutí příslušného označení nabídky ze seznamu netříděných položek.
