So erstellen Sie Ihre eigene Bootstrap-Vorlage
In diesem Artikel werden hauptsächlich Beispiele für die Erstellung Ihrer eigenen Bootstrap-Vorlage vorgestellt.
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <!-- Bootstrap不支持IE的兼容模式,加入此标签以确保在每个被支持的IE浏览器中保持最好的页面展现效果 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 由于Bootstrap 3是移动设备优先,加入此标签是为了确保适当的绘制和触屏缩放 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap-Template-01</title> <!-- 最新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="<a href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css</a>"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="<a href="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script">http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script</a>> <script src="<a href="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script">http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script</a>> <![endif]--> </head> <body> <h1>Hello, world!</h1> <!-- 所有 Bootstrap 插件都依赖 jQuery,因此jQuery必须在Bootstrap之前引入 --> <script src="<a href="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script">http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script</a>> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="<a href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script">http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script</a>> </body> </html>
Ich werde im Folgenden auf einige wichtige Punkte eingehen
【1】 Bootstrap verwendet Schauen Sie sich den HTML5-Dokumenttyp genauer an, um festzustellen, ob sich die erste Zeile von dem unterscheidet, was wir normalerweise schreiben.
【2】lang wird verwendet, wir sind in China, natürlich verwenden wir vereinfachtes Chinesisch, natürlich gibt es hier ein kleines Problem, ich habe gerade jemanden im Internet gesehen, der sagte, dass dieses zn-cn nicht mehr existiert Für die aktuelle Situation wenden Sie sich bitte speziell an Baidu.
【3】Ein einzelnes Tag ist nicht geschlossen. Schauen Sie sich einfach das Meta-Tag an.
[4] Kompatibilitätsverarbeitung hinzugefügt, wenn IE kleiner als 9 ist und HTML5 nicht sehr unterstützt. Wenn ich es tun würde, würde ich natürlich IE9 und niedriger blockieren und den Benutzern eine Seite geben. Aktualisieren Sie den Browser. Andernfalls sieht der Benutzer eine hässliche Seite. Warum sollte er sich die Mühe machen? ! !
【5】Warum verwendet JQuery Version 1.102 anstelle von Version 2.x? Es scheint, dass Version 1.9.x ie8 unterstützt, während Version 2.x ie9 und höher unterstützt. Daher verwende ich hier eine Version größer als 1.9.x. Natürlich müssen Sie ie8 nicht unterstützen, genau wie ich es in Schritt getan habe 4. Das Gleiche wie gesagt: Blockieren Sie Browser unter IE9.
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.
Verwandte Empfehlungen:
Über das Rastersystemprinzip von Bootstrap3.0
Wenn Sie die kostenlose Bootstrap-Vorlage herunterladen möchten, wenden Sie sich bitte an uns Besuchen Sie die Spalte Bootstrap-Vorlage!
Das obige ist der detaillierte Inhalt vonSo erstellen Sie Ihre eigene Bootstrap-Vorlage. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Heiße KI -Werkzeuge

Undress AI Tool
Ausziehbilder kostenlos

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Clothoff.io
KI-Kleiderentferner

Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Verschiedene Browser weisen Unterschiede in der CSS -Analyse auf, was zu inkonsistenten Anzeigeeffekten führt, hauptsächlich die Differenzentscheidung, die Berechnung des Boxmodells, die Flexbox- und Raster -Layout -Unterstützung und das inkonsistente Verhalten bestimmter CSS -Attribute. 1. Die Standardstilverarbeitung ist inkonsistent. Die Lösung besteht darin, CSSReset oder Normalize.css zu verwenden, um den anfänglichen Stil zu vereinen. 2. Die Box -Modellberechnung der alten Version von IE ist unterschiedlich. Es wird empfohlen, eine einheitliche Boxgröße: Border-Box zu verwenden. 3. Flexbox und Grid führen in Kantenfällen oder in alten Versionen unterschiedlich ab. Weitere Tests und verwenden Sie Autoprefixer; 4. Einige CSS -Attributverhalten sind inkonsistent. Caniuse muss konsultiert und herabgestuft werden.

Accent-Color ist ein Attribut, das in CSS verwendet wird, um die Highlight-Farben von Formularelementen wie Kontrollkästchen, Optionsfeldern und Schieberegler anzupassen. 1. Es ändert direkt die Standardfarbe des ausgewählten Status des Formularsteuerers, z. 2. Die unterstützten Elemente umfassen Eingangskästchen von Typ = "Kontrollkästchen", type = "radio" und type = "range"; 3. Die Verwendung von Akzentfarben kann komplexe benutzerdefinierte Stile und zusätzliche DOM-Strukturen vermeiden und die native Zugänglichkeit aufrechterhalten. 4. Es wird im Allgemeinen von modernen Browsern unterstützt, und alte Browser müssen herabgestuft werden. 5. Setzen Sie Accent-Col

Browser-Standardstile gewährleisten die grundlegende Lesbarkeit, indem Sie automatisch Margen, Füllungen, Schriftarten und Formelementstile anwenden, aber inkonsistente Cross-Browser-Layouts verursachen. 1. Der Standardrand und das Füllen ändern den Layoutfluss, wie den Abstand von Titeln, Absätzen und Listen; 2. Die Standard -Schrifteinstellungen wirken sich auf die Lesbarkeit aus, z. B. 16px -Schriftgröße und TimesNewroman -Schriftart; 3. Die Formelemente sind in verschiedenen Browsern sehr unterschiedlich, daher muss das Erscheinungsbild zurückgesetzt werden. 4. Einige Tags wie stark und sie haben Standard -Schwerpunkte und müssen explizit überschrieben werden. Zu den Workarounds gehört die Verwendung von Normalize.css, Zurücksetzen von Stilen oder global klaren Rändern und Füllungen, während Sie Schriftarten und Formestile für Konsistenz anpassen.

Um den Beginn eines Absatzes zur Verbesserung der visuellen Anziehungskraft zu verschönern, besteht eine gängige Praxis darin, Pseudoelemente von CSS zu verwenden oder das Dokument manuell zu stylen. In der Webentwicklung kann P :: Erste Buchstabe verwendet werden, um den ersten Buchstabenstil wie Vergrößerung, Fettdruck und Verfärbung festzulegen, aber es sollte beachtet werden, dass es nur für Elemente auf Blockebene geeignet ist. Wenn Sie die gesamte erste Zeile hervorheben möchten, verwenden Sie P :: First-Line, um Stile hinzuzufügen. In Dokumentsoftware wie Word können Sie das erste Buchstabenformat manuell anpassen oder Stilvorlagen erstellen, und InDesign verfügt über eine integrierte "Erstverkt" -Funktion, die für Veröffentlichungen und Design geeignet ist. Bei der Bewerbung müssen Sie auf Details achten, z. B. das Vermeiden komplexer Stile, die das Lesen beeinflussen und die Kompatibilität und Formatkonsistenz sicherstellen.

Thevertical-AlignPropertyincSalignSinlineTable-zellelementevertisch.1.itadjustselements LikeImagesorformInputswitintextLinesusingValues-ähnlich, Middle, Super und Sub.2.IntableCells, ItcontrolscontentalInmentWithtop, Middle, Orbottomvalues, oftes

CSS-Gegenaufnahme und Gegeninkrement werden zur automatischen Anzahl von HTML-Elementen verwendet. 1. Verwenden Sie das Gegenauflagen, um den Zähler zu initialisieren oder zurückzusetzen. 2. Inkrementieren Sie den Zähler durch Gegeninkrement, wie z. B. H3 {Gegeninkrement: Unterabschnitt;}, um jede H3-Titelnummer zu erhöhen; 3. Verwenden Sie das Inhaltsattribut, um Pseudoelemente zu kombinieren, um den Zähler anzuzeigen, wie z. B. H3 :: vor {Inhalt:

UseAtOMatedTools -LikepurgecsSoruncsStoscanandremoveUnusedCss; 2.IntegratepurgingIntoyourbuildProcessviawebpack, vite, ortailwind ’ScontentConfiguration; 3.AuditcsSuSageWithCromedevtoolSCoveragetabbeFeforenpurgingToAvoidReperingNeedstyles; 4. Safelistdynamic

Um die Textfarbe in CSS zu ändern, müssen Sie das Farbattribut verwenden. 1. Verwenden Sie das Farbattribut, um die Textvorderfarbe des Textes zu setzen und Farbnamen (z. B. rot), Hexadezimalcodes (wie #ff0000), RGB -Werte (wie RGB (255,0,0)), HSL -Werte (wie HSL (0,100%) und RGBA oder HSLA (0,100%) und RGBA oder HSLA mit Transparen (0,100%) und RGBA oder HSLA (0,100%) (255,0,0,0,0,0,0,0,0,0,0). 2. Sie können Farben auf jedes Element anwenden, das Text enthält, wie z. B. H1 auf H6 -Titel, Absatz P, Link A (beachten Sie die Farbeinstellungen verschiedener Zustände von A: Link, A: Besucht, a: hover, a: aktiv), Schaltflächen, Div, Span usw.; 3.. Die meisten
