Helvetica Neue, Helvetica, Arial, and sans-serif are the default font stack of Bootstrap. You can make headings styles, paragraphs styles, lists styles and other inline elements using the feature of Bootstrap typography. Let see thoroughly each one these in the following segments:
Headings
All HTML headings h1 though h6 are styled in Bootstrap. You can see an example is as shown below:
<h1>I'm Heading1 h1</h1>
<h2>I'm Heading2 h2</h2>
<h3>I'm Heading3 h3</h3>
<h4>I'm Heading4 h4</h4>
<h5>I'm Heading5 h5</h5>
<h6>I'm Heading6 h6</h6>
You can see Demo of above code segment with Bootstrap will produce.
Inline Subheadings
To adding an inline subheading to any of the headings, simply add <small> tag around any elements or add .small class and you will get smaller size text in a lighter color as shown in the Demo.
<h1>I'm Heading1 h1. <small>I'm secondary Heading1 h1</small></h1>
<h2>I'm Heading2 h2. <small>I'm secondary Heading2 h2</small></h2>
<h3>I'm Heading3 h3. <small>I'm secondary Heading3 h3</small></h3>
<h4>I'm Heading4 h4. <small>I'm secondary Heading4 h4</small></h4>
<h5>I'm Heading5 h5. <small>I'm secondary Heading5 h5</small></h5>
<h6>I'm Heading6 h6. <small>I'm secondary Heading1 h6</small></h6>
Here is Demo of above code segment with Bootstrap will produce following result:
Lead Body Copy
Defaul font size is 14px of Bootstrap’s global, with a line-height of 1.428. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their computed line-height (10px by default).
To add some emphasis to a paragraph, add class=”lead”. You will get larger font size, lighter weight, and a taller line height as in the following example:
<h2>Lead Example</h2>
<p class="lead">This is an example paragraph demonstrating the use of lead body copy. This is an example paragraph demonstrating the use of lead body copy.This is an example paragraph demonstrating the use of lead body copy.This is an example paragraph demonstrating the use of lead body copy.This is an example paragraph demonstrating the use of lead body copy.</p>
Emphasis
Bootstrap is using some default emphasis tags of HTML just like <<small> (sets text at 85% the size of the parent), <strong> emphasizes a text style with heavier font-weight, <em> emphasizes a text style in italics.
Bootstrap giving a some classes that can be used to provide emphasis on texts as seen in the following example:
<small>This content is within <small> tag</small><br>
<strong>This content is within <strong> tag</strong><br>
<em>This content is within <em> tag and is rendered as italics</em><br>
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-muted">This content is muted</p>
<p class="text-primary">This content carries a warning class</p>
<p class="text-success">This content carries a success class</p>
<p class="text-info">This content carries a info class</p>
<p class="text-warning">This content carries a warning class</p>
<p class="text-danger">This content carries a danger class</p>
Abbreviations
The HTML element provides markup for abbreviations or acronyms, like WWW or HTTP. Bootstrap styles <abbr> elements with a light dotted border along the bottom and reveals the full text on hover (as long as you add that text to the <abbr> title attribute). To get a a slightly smaller font size Add .initialism to <abbr>.
Basic Abbreviations
<abbr title="World Wide Web">WWW</abbr><br>
To obtain the faintly smaller font size Add “.initialism” class to <abbr>.
initialism
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
<abbr title="Real Simple Syndication" class="initialism">RSS</abbr>
Addresses
<address> tag can help you to display the information of contacts on your web page with nice view. Since the <address> defaults to display:block; you will require to use tags to add line breaks to the with this address text.
<address>
<strong>Some Company, Inc.</strong><br>
007 street<br>
Some City, State XXXXX<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">mailto@somedomain.com</a>
</address>
<address>
<strong>Twitter, Inc.</strong><br>
795 Folsom Ave, Suite 600<br>
San Francisco, CA 94107<br>
<abbr title="Phone">P:</abbr>
(123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">first.last@example.com</a>
</address>
Blockquotes
You can use the default wrap <blockquote> around any HTML text as a quote. Other options are included like adding a <small> tag for identifies the source of the quote and right-aligning the blockquote using class .pull-right. The following example shows all these features:
<blockquote>
<p>This is a default blockquote example. This is a default blockquote example. This is a default blockquote example.This is a default blockquote example. This is a default blockquote example.</p>
</blockquote>
<blockquote>This is a blockquote with a source title.<small>Someone famous in <cite title="Source Title">Source Title</cite></small></blockquote>
<blockquote class="pull-right">This is a blockquote aligned to the right.<small>Someone famous in <cite title="Source Title">Source Title</cite></small></blockquote>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
<blockquote class="blockquote-reverse">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
Lists
Bootstrap also supports ordered lists, unordered lists, and definition lists.
Ordered lists
An ordered list of items is a list that falls in some type of sequential order and is prefaced by numbers.
<h3>Example of Ordered List</h3>
<ol>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ol>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
Unordered lists
An unordered list is a list that and is usually styled with bullets and does not have any picky order. If you do not want the bullets to show then you can remove that styling by applying the class “.list-unstyled”. Using class “.list-inline” you can also place all list items on a single line.
<h4>Example of UnOrdered List</h4>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
Definition lists
In definition list type, every list item can consist of both the <dt> and the <dd> tags. <dt> stands for definition term, and like a dictionary, this is the word or phrase that is being defined. After, the <dd> is the definition of the <dt>.
<h4>Example of Definition List</h4>
<dl>
<dt>Description 1</dt>
<dd>Item 1</dd>
<dt>Description 2</dt>
<dd>Item 2</dd>
</dl>
<h4>Example of Horizontal Definition List</h4>
<dl class="dl-horizontal">
<dt>Description 1</dt>
<dd>Item 1</dd>
<dt>Description 2</dt>
<dd>Item 2</dd>
</dl>
Unstyled
Take out the default list-style and left margin on list items (immediate children only). This applies only on immediate children list items, meaning you will require to add the class for every nested lists also.
<h4>Example of Unstyled List</h4>
<ul class="list-unstyled">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
Inline
Place all list items on a single line with display: inline-block; and some light padding.
You can make terms and descriptions in <dl> line up side-by-side using class dl-horizontal.
<h4>Example of Inline List</h4>
<ul class="list-inline">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
Bootstrap Typography
No comments:
Post a Comment