Heim > Artikel > Web-Frontend > Was ist BootStrap? Einführung in die Struktur und Zusammensetzung von BootStrap
Was ist BootStrap? Einführung in die Struktur und Zusammensetzung von BootStrap
- 不言nach vorne
- 2018-10-13 15:51:163314Durchsuche
Der Inhalt dieses Artikels befasst sich mit der Frage, was BootStrap ist. Woraus besteht BootStrap? Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.
1. Einführung
Bootstrap ist ein Front-End-Framework, das auf HTML, CSS und JAVASCRIPT basiert. Es definiert eine Reihe von CSS-Stilen und entsprechenden JQuery-Code Responsives Layout (kompatibel mit mehreren Terminals), da er Medienabfrage (css3 Media Query) verwendet (Verwandte kostenlose Videoempfehlungen: Bootstrap-Tutorial)
2. BootStrap-Komposition
1.12 Rastersystem: Teilen Sie den Bildschirm in 12 Spalten auf, verwenden Sie Zeilen zum Organisieren von Elementen und platzieren Sie dann Inhalte in den Spalten
/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */
/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }
/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }
/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }
2. Grundlegende Layoutkomponenten: Verschiedene grundlegende Layoutkomponenten, die von Bootstrap bereitgestellt werden
(1) Einführung von
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <!-- Bootstrap --> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
(2) Standardstiltabelle (tr ist eine Zeile, td ist eine Spalte in einer Zeile, th ist die Titelspalte, die äquivalent zu td sein kann)
<table class="table"> <th scope="row">1</th>
(3 ) Umrandete Tabelle
<table class="table-bordered">
(4) Formular
<form> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div>
(5) Schaltfläche
<button type="submit" class="btn btn-default">Submit</button> <button type="submit" class="btn btn-primary">Transfer cash</button>
3.jquery: Alle Bootstrap-JavaScript-Plug-Ins hängen davon ab auf Jquery (Hinweis Einführung in die JQuery-Bibliothek)
4.css-Komponente: Bootstrap implementiert viele CSS-Komponenten für uns vor
5.Javascript-Plug-in: Bootstrap stellt uns einige js-Plug-ins zur Verfügung
6 .Responsives Design: kompatibel mit mehreren Terminals
Das obige ist der detaillierte Inhalt vonWas ist BootStrap? Einführung in die Struktur und Zusammensetzung von BootStrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!