Chapter 2 unit 1 of Bootstrap-Bootstrap CSS

Hello, dear readers, today bootstrap css will be discussed, though should references quoted from this book, examples and demos will be added in later blogs.

Starting with typography, Bootstrap usesHelvetica Neue, Helvetica, Arial, and sansserifIn its default font stack. here, we can know the types of defalut fonts in Bootstrap.

If these fonts above are not installed in your computer and broswer, andSansserifWill be used as itsDefault fontAnd showed to you. Allbody copy has the font-sizeset14

Pixels, WithLine-heightSet at 20 pixels. The <p> tag has a margin-bottom of 10 pixels, or half the line-height (5 pixels ).

1.1 headings

All six standard heading levels have been styled in Bootstrap range from <H1> to <H6> with<H1> at 36 pixels tall, And<H6> down to 12 pixels(For reference,

Default body text is 14 pixels tall). in order to add an inline subheading to any of the headings, you can add<Small> tagAround to create a subheading andMake its color

LighterThan the parent heading.

1.2 lead body copy

To add some emphasis to a paragraph, add class = "lead ".This will give you larger font size, lighter weight, and a taller line height. This is generally used

The first few paragraphs in a section, but it can be used anywhere.

1.3 Emphasis

In addition to using<Small> tagWithinHeadings, As discussed above, you can also use it with body copy. When <small> is appliedBody text, The font shrinks

85% of its original size.

1.4 Bold

To add emphasis to text, simply wrap it in<Strong> tag. This will addFontweight: bold; To the selected text.

1.5 Italics

For italics, wrap your content in<Em> tag. The term "em" derives from the word "emphasis" and is meant to add stress to your text.

HERE, a new questation will be asked, and then I WILL FIND AN ANSWER FOR IT.

1. why not just use the <B> or <I> tags instead of <em> or <strong>?

1.6 Emphasis Classes

Along with <strong> and <em>, Bootstrap offers a few other classes that can be used toprovide emphasisThese cocould be applied to paragraphs or spans:
<P class = "muted"> This content is muted </p>
<P class = "text-warning"> This content carries a warning class </p>
<P class = "text-error"> This content carries an error class </p>
<P class = "text-info"> This content carries an info class </p>
<P class = "text-success"> This content carries a success class </p>
<P> This content has <em> emphasis </em>, and can be <strong> bold </strong> </p>

1.6.1 Abbreviations (Chinese: acronyms)

The HTML <abbr> element provides markup for abbreviations or acronyms, like WWW or HTTP. By marking up abbreviations, you can give useful
Information to browsers, spell checkers, translation systems, or search engines. 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 ):<Abbr title = "Real Simple Syndication"> RSS </abbr>.

1.6.2 Addresses

Adding <address> elements to your page can help screen readers and search engines locate any physical addresses and phone numbers in the text. It can also be used to mark up email addresses. since the <address> defaults to display: block; you'll need to use <br> tags to add line breaks to the enclosed address text (e.g ., to split the street address and city onto separate lines ):

<Address>
<Strong> O 'Reilly Media, Inc. </strong> <br> 1005 Gravenstein HWY North <br> Sebastopol, CA 95472 <br>
<Abbr title = "Phone"> P: </abbr> <a href = "tel: + 17078277000"> (707) 827-7000 </a>
</Address>
<Address>
<Strong> Jake Spurlock </strong> <br>
<A href = "mailto: #"> flast@oreilly.com </a>
</Address>

1.6.3 Blockquotes

To add blocks of quoted text to your document-or for any quotation that you want to set apart from the main text flow-add<Blockquote>Tag around the text. For best
Results, and for line breaks, wrap each subsection in a <p> tag. bootstrap's default styling indents the text and adds a thick gray border along the left side. to identify the source of the quote, add<Small>Tag, then add the source's name wrapped in<Cite>Tag before closing the </small> tag:

<Blockquote>
<P> That this is needed, desperately needed, is indicated by the incredible uptake of Bootstrap. I use it in all the server software I'm working on. and it shows through in the templating language I'm developing, so everyone who uses it will find it's "just there" and works, any time you want to do a Bootstrap technique. nothing to do,
No libraries to include. It's as if it were part of the hardware. Same approach that Apple took with the Mac OS in 1984. </p>
<Small> Developer of RSS, <cite title = "Source Title"> Dave Winer </cite> </small>
</Blockquote>

1.7 Lists

Ul ol dl

 

1.7.1 Unordered list

If you have an ordered list that you wowould like to remove the bullets from, addClass = "unstyled"To the opening <ul> tag:

<H3> Favorite Outdoor Activities <Ul>
<Li> Backpacking in Yosemite </li>
<Li> Hiking in Arches
<Ul>
<Li> Delicate Arch </li>
<Li> Park Avenue </li>
</Ul>
</Li>
<Li> Biking the Flintstones Trail </li>
</Ul>

1.7.2 Ordered list

An ordered list is a list that falls in some sort of sequential order and is prefaced by numbers rather than bullets (see Figure 2-10). This is handy when you want to build
List of numbered items like a task list, guide items, or even a list of comments on a blog post:

<H3> Self-Referential Task List <Ol>
<Li> Turn off the internet. </li>
<Li> Write the book. </li>
<Li>... Profit? </Li>
</Ol>

 

1.7.3 Definition list

The third type of list you get with Bootstrap is the definition list.The definition list differs from the ordered and unordered list in that instead of just having a block-level <li> element, each list item can consist of both the <dt> and the <dd> elements.<Dt> stands for "definition term," and like a dictionary, This is the term (or phrase) that is being defined. Subsequently,The <dd> is the definition of the <dt>.A lot of times in markup, you will see people using headings inside an unordered list. this works, but may not be the most semantic (semantic) way to mark up the text. A better method wocould be creating a <dl> and then styling the <dt> and <dd> as you wocould the heading and the text. that being said, Bootstrap offers some clean default styles and an option for a side-by-side layout of each definition:

 

<H3> Common Electronics Parts <Dl>
<Dt> LED </dt>
<Dd> A light-emitting diode (LED) is a semicondulight source. </dd>
<Dt> Servo </dt>
<Dd> Servos are small, cheap, mass-produced actuators used for radio control and small robotics. </dd>
</Dl>

To change the <dl>A horizontal layout, With the <dt> on the left side and the <dd> on the right, simply addClass = "dl-horizontal"To the opening tag