Bootstrap-Typografie

Bootstrap verwendet Typografie, um Überschriften, Absätze und andere Inline-Elemente anzuzeigen. Es legt fest, wie der Inhalt im Hauptteil angezeigt werden soll, die Hintergrundfarbe im Hauptteil, verwendet Schriftgröße und Zeilenhöhe, um Ränder, Abstände usw. zu erstellen. Bootstrap bietet Entwicklern praktische Typografiefunktionen, die es ihnen erleichtern, Überschriften, Absätze usw. zu erstellen. Listen und andere Inline-Elemente, die für die Leser attraktiv wären.

  • Bootstrap-Setup
  • Einführung in Node.js
  • Bower-Paketmanager

Der Standard-Schriftartenstapel ist Helvetica Neue, Helvetica, Arial und Sans-Serif. Die typografische Skala basiert auf Less-Variablen: @font-family-base, @font-size-base Und @line-height-base Dadurch werden der Schriftartname, die Ränder, die Abstände und die Zeilenhöhen für die Variablen erstellt. Der Bootstrap enthält alle Typografie-Tags, die wir formatieren möchten, alles von einem

-Tag bis zu

und der gesamten Überschriftenhierarchie.

Bootstrap-Überschriften

Beginnen wir mit den Überschriften. Betrachten Sie das folgende Beispiel mit allen HTML-Überschriften von h1 bis h6. Wir werden sehen, wie sie mithilfe von Bootstrap angezeigt werden.

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
   <link rel="stylesheet" type="text/css" href="myclass.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
   <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
   <h2>Heading Example</h2>
   <div  >
      <h1>My Heading One</h1>
      <h2>My Heading Two</h2>
      <h3>My Heading Three</h3>
      <h4>My Heading Four</h4>
      <h5>My Heading Five</h5>
      <h6>My Heading Six</h6>
   </div>
</body>
</html>
  • Führen Sie die Bootsrap Headings-Demo aus

Bootstrap-Überschriftenbild

Bootstrap-Unterüberschriften

Wir können jeder Überschrift auch Inline-Unterüberschriften hinzufügen, indem wir verwenden Markieren Sie die Elemente, um kleineren Text mit heller Farbe zu erhalten. Betrachten Sie das folgende Beispiel:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
   <link rel="stylesheet" type="text/css" href="myclass.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
   <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
   <div  >
   <h2>Bootstrap Inline SubHeadings</h2>
      <h1>My Heading One <small style="color:orange;">My small heading one</small></h1>
      <h2>My Heading Two <small style="color:orange;">My small heading one</small></h2>
      <h3>My Heading Three <small style="color:orange;">My small heading one</small></h3>
      <h4>My Heading Four <small style="color:orange;">My small heading one</small></h4>
      <h5>My Heading Five <small style="color:orange;">My small heading one</small></h5>
      <h6>My Heading Six <small style="color:orange;">My small heading one</small></h6>
   </div>
</body>
</html>
  • Führen Sie Bootsrap aus Unterüberschriften-Demo

Unterüberschriften Bild

Körper Kopie

Wie wir wissen, beträgt die Standardschriftgröße von Bootstrap 14 Pixel und die Zeilenhöhe 1,7 cm. Wir können HTML-Inhalte mit einigen einfachen Stilen erstellen. Um dies durchzuführen, verwenden wir class .führen Dadurch werden Inhalte mit größerer Schriftgröße, geringerem Gewicht und höherer Höhe erstellt, wie im folgenden Beispiel gezeigt:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
   <link rel="stylesheet" type="text/css" href="myclass.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
   <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
   <div  >
   <h2>Lead Body Copy Example</h2>
   <p   >The Bootstrap is most popular front end framework for creating websites and web applications.
    Bootstrap is a powerful front end framework which makes faster and easier web development.
    It includes CSS and HTML for typography, icons, forms, buttons, tables, layout grids and other interface components, as well as   optional JavaScript extensions.</p>
   </div>
</body>
</html>
  • Führen Sie Bootstrap aus Body-Copy-Demo

Körperkopiebild

Schwerpunkt

Bootstrap bietet einige Klassen an, die zur Hervorhebung verwendet werden können. Wir können HTML-Inhalte mit einigen einfachen Stilen erstellen, indem wir -Tags, -Tags, -Tags usw. verwenden, die dem Inhalt unterschiedliche Stile verleihen. Betrachten Sie das folgende Beispiel mit verschiedenen Stilen:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
   <link rel="stylesheet" type="text/css" href="myclass.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
   <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
   <div  >
    <h2>Emphasis Content Example</h2>
    <small>Bootstrap is a front end framework which makes faster and easier web development.</small><br><br>
    <strong>Bootstrap is a front end framework which makes faster and easier web development.</strong><br><br>
    <em>Bootstrap is a front end framework which makes faster and easier web development.</em><br><br>
    <p  >The Bootstrap is most popular front end framework for creating websites and web applications.</p>
    <p  >The Bootstrap is most popular front end framework for creating websites and web applications.</p>
    <p  >The Bootstrap is most popular front end framework for creating websites and web applications.</p>
    <p  >The Bootstrap is most popular front end framework for creating websites and web applications.</p>
    <p  >The Bootstrap is most popular front end framework for creating websites and web applications.</p>
   </div>
</body>
</html>

Das obige Skript erklärt, wie Sie verschiedene Stile für den HTML-Inhalt verwenden. Es umfasst Stile wie fetten Text, kursiven Text und kleinen Text sowie Klassen von Hinweisstilen wie Primär-, Erfolgs-, Info-, Warn- und Gefahrenklassen.

  • Führen Sie Bootstrap aus Betonungsdemo

Schwerpunktbild

Abkürzungen

Eine Abkürzung ist eine verkürzte Form eines Wortes oder einer Phrase. Es bezeichnet eine Abkürzung oder ein Akronym wie WHO, HTTP usw. Wir verwenden Tag, um die vollständige Version der Abkürzung oder des Akronyms anzuzeigen, wenn wir mit der Maus darüber fahren Element. Um Zeit und Platz zu sparen, werden häufig Abkürzungen verwendet. Betrachten wir das folgende Beispiel für die Abkürzung:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
   <link rel="stylesheet" type="text/css" href="myclass.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
   <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
   <div  >
      <h2>Abbreviation Example</h2>
      <abbr title="World Health Organization"><strong>WHO</strong> is the directing authority for health within the United Nations System.</abbr>
   </div>
</body>
</html>

Das obige Skript zeigt, wie man eine Abkürzung für ein Wort oder eine Phrase festlegt. Wir haben das Wort verwendet WER das eine Abkürzung anzeigt, wenn wir mit der Maus darüber fahren Element auf der Seite.

  • Führen Sie Bootstrap aus Abkürzungen Demo

Abkürzungsbeispiel

Adressen

Wenn wir Kontaktinformationen auf der Webseite anzeigen möchten, können wir dies nutzen Adresse Etikett. Es hilft Lesern und Suchmaschinen, physische Adressen und Telefonnummern im Text zu finden. Das

-Tag sollte nicht zur Beschreibung einer Postanschrift verwendet werden, es sei denn, es ist Teil der Kontaktinformationen. Es sollte nicht mehr Informationen als die Kontaktinformationen wie Veröffentlichungsdatum usw. enthalten. Betrachten Sie das folgende Beispiel für Etikett:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
   <link rel="stylesheet" type="text/css" href="myclass.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
   <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
   <div  >
      <h2>Address Example</h2>
      <address>
         <strong>MVN Industries</strong><br>
         #111, 12th main, 4th cross <br>
         Vijay Nagar, Belagum, Karnataka-591103<br>
         India<br><br>
         <span  ></span>
		  Call us at:(0831) 234-8678 <br><br>
         <span  ></span>
		 Email:[email protected] <br><br>
		 <span  ></span>
		 Monday - Saturday 10:00 AM to 7:00 PM<br><br>
	  </address>
      </div>
</body>
</html>

Wie im Skript gezeigt, wird das Adress-Tag verwendet, um Kontaktinformationen auf der Webseite anzuzeigen. Wir haben Glyphicons verwendet, um Symbole für Uhrzeit, E-Mail und Telefon festzulegen. Glyphicons sind monochromatische Symbole und Symbole, die mit dem Schwerpunkt auf Einfachheit und einfacher Orientierung erstellt wurden. Die Icon-Klassen können nicht direkt mit anderen Komponenten kombiniert werden. Wir konnten es nicht mit anderen Klassen verwenden; Stattdessen können wir with span verwenden und Symbolklassen auf den Span anwenden.

  • Führen Sie die Bootstrap-Adressen-Demo aus

Beispiel für Adressen

Block Zitate

Blockquote ist ein Tag zum Definieren langer Zitate. Es teilt dem Browser oder Benutzeragenten mit, dass es sich bei den Inhalten um lange Zitate handelt. Es enthält nur Elemente auf Blockebene, nicht nur einfachen Text. Die meisten Webbrowser fügen auf beiden Seiten des Zitats einige Leerzeichen hinzu, um es vom umgebenden Text abzuheben.

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
   <link rel="stylesheet" type="text/css" href="myclass.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
   <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
   <div  >
   <h2>Blockquote Example</h2>
   <blockquote><p>The Bootstrap is most popular front end framework for creating websites and web applications.
    Bootstrap is a powerful front end framework which makes faster and easier web development.
    It includes CSS and HTML for typography, icons, forms, buttons, tables, layout grids and other interface components, as well as optional JavaScript extensions.</p>
   </blockquote>
   <blockquote><p>The Bootstrap is most popular front end framework for creating websites and web applications.
    Bootstrap is a powerful front end framework which makes faster and easier web development.</p>
    <small>This is about <cite title="Source Title">Bootstrap Blockquote</cite></small>
   </blockquote>
   <blockquote  >The Bootstrap is most popular front end framework for creating websites and web applications.
       Bootstrap is a powerful front end framework which makes faster and easier web development.</p>
       <small>This is about <cite title="Source Title"> right aligned blockquote</cite></small>
   </blockquote>
   </div>
</body>
</html>

Wie im obigen Skript gezeigt, ist die Das Tag wird verwendet, um einen wesentlichen Teil des zitierten Textes anzuzeigen. Es muss mindestens ein übergeordnetes Element oder eine Liste enthalten. Fügen Sie ein optionales hinzu Tag, um die Quelle des Zitats zu identifizieren und den Namen der Quelle darin einzuschließen Tag, bevor Sie das kleine Tag schließen. Wenn wir möchten, dass Blockquote rechtsbündig ist, fügen Sie hinzu .nach rechts ziehen Klasse zum Tag hinzufügen. Dann wird die gesamte Blockqoute nach rechts verschoben.

  • Führen Sie die Bootstrap-Blockquotes-Demo aus

Blockquote-Beispiel

Listen

Bootstrap-Unterstützung und -Stil für die drei Hauptlistentypen: Bestellt, Ungeordnet Und Definition Listen.

  • Bestellt: Typischerweise handelt es sich um eine nummerierte Liste von Elementen, die eine bestimmte numerische Reihenfolge oder Rangfolge haben. Wir verwenden das
      -Tag, um eine nummerierte Liste zu erstellen, die bei 1 beginnt. Jedes Listenelement beginnt mit dem

    1. Etikett.
    2. Ungeordnet: Wir gebrauchen
        Tag, um eine Liste mit Aufzählungszeichen anstelle von Zahlen zu erstellen. Jedes Listenelement beginnt mit dem

      • Etikett.
      • Definitionsliste: Definitionslisten dienen für Listen von Begriffs-/Definitionspaaren. Sie unterscheidet sich sowohl von geordneten als auch von ungeordneten Listen. Statt eines
      • -Elements auf Blockebene besteht jedes Listenelement aus
        – und

        -Elementen. Das dt steht für Definitionsbegriff und dd definiert die Definition des Begriffs.

      Betrachten Sie das folgende Beispiel mit den oben genannten drei Listen:

      <!DOCTYPE html>
      <head>
      <title>Bootstrap Example</title>
         <link rel="stylesheet" type="text/css" href="myclass.css">
         <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
         <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
         <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
      </head>
      <body>
         <div  >
         <h2>Ordered List</h2>
         <ol>
            <li>Cricket</li>
            <li>Football</li>
            <li>Hockey</li>
            <li>Snooker</li>
         </ol>
         <h2>Unordered List</h2>
            <ul>
               <li>Cricket</li>
               <li>Football</li>
               <li>Hockey</li>
               <li>Snooker</li>
            </ul>
         <h2>Unstyled List</h2>
               <ul  >
                  <li>Cricket</li>
                  <li>Football</li>
                  <li>Hockey</li>
                  <li>Snooker</li>
            </ul>
         <h2>Definition List</h2>
            <dl>
               <dt>HTTP</dt>
               <dd>- Hypertext Transfer Protocol</dd>
               <dt>WWW</dt>
               <dd>- World Wide Web</dd>
            </dl>
         <h2>Horizontal Definition List</h2>
               <dl  >
                  <dt>HTTP</dt>
                  <dd>- Hypertext Transfer Protocol</dd>
                  <dt>WWW</dt>
                  <dd>- World Wide Web</dd>
            </dl>
      </body>
      </html>
      

      Das obige Skript erläutert verschiedene Arten von Listen. Wir konnten sehen, dass wir eine weitere Liste verwendet haben, nämlich eine Definitionsliste mit horizontaler Darstellung, die den Inhalt horizontal anzeigt. Es definiert Begriffe und Beschreibungen nebeneinander.

      • Führen Sie die Bootstrap-Listen-Demo aus

      Bootstrap-Listen Bild1
      Bootstrap-Listen Bild2

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen