Getting started with Bootstrap (1) typographical and bootstrap

Getting started with Bootstrap (1) typographical and bootstrap

Recommended reading: Introduction to Bootstrap (zero) Bootstrap

Bootstrap uses Helvetica Neue, Helvetica, Arial, and sans-serif as its default font stack.

With Bootstrap's typographical features, you can create titles, paragraphs, lists, and other inline elements.

1. Title

In Bootstrap, titles are used in the same way as regular html: from

The font color and font Style inherit from the parent element. The font width is 500, and the row height is set to 1.1 (that is, 1.1 times the font-size)

{ font-family: inherit;font-weight: 500;line-height: 1.1;color: inherit;}

Titles of different sizes have the following differences:

In Bootstrap, set the font size of titles of different levels to: h1 = 36px, h2 = 30px, h3 = 24px, h4 = 18px, h5 = 14px, and h6 = 12px.

Reset the values of margin-top and margin-bottom, h1 ~ After h3 is reset, all values are 20px; h4 ~ After h6 is reset, all values are 10px.

In addition, in Bootstrap, to make the non-title element and title use the same style, we also specifically defined. h1 ~. Six Class names. As follows:

In Bootstrap, the following code shows the same effect.

<! -- Title in Bootstrap --> 
In practical application, we may often encounter a situation where the subject is followed by a subtitle in addition to the main title. Bootstrap sets this effect in a user-friendly way. The usage is also very simple, as follows:
<H1> Bootstrap Title 1 <small> I am a subtitle </small> 
Of course, you can use this setting from 
The row height is set to 1, and the font width is changed to regular effect (not bold), and the color is set to gray (#999 ).
In h1 ~ The <small> label text in h3 is set to 65% of the current font size ~ The font size in h6 is set to 75% of the current font size;
2. Text
The global text style in Bootstrap is as follows:
The font size is 14px.
The row height is 1.42867143 (approximately 20px)
Font color: #333
The p tag has a 10-pixel margin-bottom: 10px;
Of course, you can reset the style by yourself. Pai_^
3. Emphasize
Font Style
<P class = "lead"> lead </p> <! -- The font size increases, the row height increases, and the bottom margin increases --> <I> I </I> <! -- No special meaning, italic --> <small> small </small> <! -- Small font --> <strong> strong </strong> <! -- Strong tone, bold --> <em> em </em> <! -- Emphasize, italic -->
Emphasize related classes
Bootstrap defines a series of such classes for different scenarios, out of text, and bg (background color. The usage is similar, but the previous text has been changed! So. Remember these six words.
<P class = "text-muted"> tip: Use light gray (#999) </p> <p class = "text-primary"> main, use blue (# 428bca) </p> <p class = "text-success"> success. Use light green (# 3c763d) </p> <p class = "text-info"> notification information, use light blue (# 31708f) </p> <p class = "text-warning"> warning, use yellow (# 8a6d3b) </p> <p class = "text-danger"> dangerous, use brown (# a94442) </p>
4. Text alignment Style
<P class = "text-left"> center mE </p> <p class = "text-center"> </p> <p class = "text-right "> I am right </p> <p class =" text-justify "> alignment of both ends </p>
In Bootstrap, to simplify the operation and make it easy to use, the above four classes correspond to the text-align that we often use in CSS to set the text align style.
5. List
In Bootstrap, the list settings are basically the same as those in the native html. Note the following:
There is a 10px margin between the list

The nested list does not contain any padding.
Of course, Bootstrap won't simply make a little modification. It defines some List classes for us to use.
Click list. list-unstyled
.list-unstyled {padding-left: 0;list-style: none;}
From the source code, we can see this information. In addition to removing the project number, it also clears the default left margin.
<Ol> <li class = "list-unstyled"> project list <ul class = "list-unstyled"> <li> with project No. </li> <li> with project no. </li> </ul> </li> </ol>
In such a piece of code, the three list items will be neatly arranged, and there is no project symbol
Inline list. list-inline
In addition to the de-vertex list, Bootstrap can also add the class name ". list-inline is used to implement the inline list. Simply put, the vertical list is replaced with the horizontal list, and the project symbol (number) is removed to maintain horizontal display. It can also be said that the inline list is generated for horizontal navigation.
Horizontal definition list. dl-horizontal
The existing code is as follows:
<Dl class = "dl-horizontal"> <dt> Title 1: </dt> <dd> I like the front-end and responsive layout, it can provide a good experience on a screen of different sizes. I am a beginner now, but I will be more and more strong </dd> <dt> Title 2: Title 2: Title 2: title 2: </dt> <dd> description </dd> </dl>
In the full screen display of the browser, you can see the following results:
 

Let's change the screen size. When a critical value is reached (small screen), the horizontal definition list will return to the original state, as shown below:
 

Why? Let's take a look at the source code!
Previously, a media query was added here. The class name. dl-horizontal can be added only when the screen is greater than 768px. The main implementation method is as follows:
Sets a left floating value for dt and a width of 160px.
Set dd to a margin-left value of 180px to achieve the horizontal effect.
When the title width exceeds PX, three ellipsis are displayed.
Now let's see if the above results are the same as the descriptions here? Of course, the answer is yes ^
6. Code
Three code styles are provided in Bootstrap:
Use <code> </code> to display single-line Inline code-code for a single word or sentence
Use <pre> </pre> to display multi-line block code-for multi-line code (that is, block-based code)
Use <kbd> </kbd> to display the user's input code-the content that the user wants to input through the keyboard

Let's look at the effect!
 

The Code is as follows: (Note that ** no matter which code style is used, escape characters must be used to replace minor signs (<) and major signs (>) in the Code)
Code style:
<Div> Bootstrap has three code styles: <code> </code>, <code> <pre> </code>, and <code> <kbd> </code> </div>
Pre style:
<div><pre><ul><li>...</li></ul></pre></div>
Kbd style:
<Div> enter <kbd> ctrl + c </kbd> to copy the code, and then use <kbd> ctrl + v </kbd> to paste the Code </div>
<Pre> elements are generally used to display large pieces of code and ensure that the original format remains unchanged. But sometimes there are too many code and you want to control the size of the code block if you don't want it to occupy too much page space. Bootstrap also takes this into consideration. You only need to add the class name on the pre Tag. pre-scrollable, you can control the maximum height of the code block area to 340px. Once the height is exceeded, a scroll bar appears on the Y axis (portrait.
Of course, you can also perform custom configuration. For example, you only need to add a word-wrap: normal; for the class in the Custom css. In this case, when the horizontal width of the code block border is smaller than the horizontal length of the internal code, a horizontal scroll bar appears.
7. Table
A table is one of the basic components of Bootstrap. Bootstrap provides one basic style, four additional styles, and one responsive table.
As mentioned above, Bootstrap provides different class names for different style styles in the table, including:
. Table basic table
. Table-striped zebra line table
. Table-bordered table with border
. Table-hover the highlighted table
. Table-condensed compact table
. Table-responsive table
. Table has three main functions:
Set the margin-bottom: 20px for the table and set the unit spacing.
Set a 2px light gray solid line at the bottom of thead.
A light gray solid line of 1px is set at the top of each cell.
For details, you can refer to the source code. The following several additional styles are not mentioned here, but here are some notes:
The additional styles of the following tables must be placed after the basic style. table, for example, <table class = "table-bordered table-hover">
Responsive table: the principle is to add a container outside the table to wrap up a common table. The following describes in detail:
<Div class = "table-responsive"> <! -- Key! Implement response after container package --> <table class = "table-bordered"> <! -- Set a table style and a table with a border --> <thead> <! -- A table should have a header. if you write a structure such as tr> td, the browser automatically creates a tbody package --> </thead> <tbody> <! -- Similarly, even if you do not create a tbody, the browser automatically adds a tbody to wrap your code --> </tbody> </table> </div>
The following is the effect of the wide screen (no difference from the normal table ):
 

Here is the effect of the narrow screen (you can see the appearance of the scroll bar ):


Table row class and table scenario
As mentioned above, in Bootstrap, different colors are made for different scenarios for different information presentation. I just made some small changes in the class name. We can see below:
 

You only need to add these classes to the <tr> label.
In addition, we can see from the source code that in addition to these color settings, Bootstrap also sets the hover effect (suspended state) separately) color enhancement effect (it is set separately for different situations ).
The implementation is also very simple. You only need to add a table-hover class to the <table> label like <table class = "table-hover">. (When you do not set the scene color for <tr>, this class still works, but the effects are different. As mentioned above, because it is set separately, please go to the source code for details)
This is also because, if you want to customize the color, in addition to modifying the Color Style of the tr element, you can also make adjustments in the. table-hover table!
The typographical content is over here. I hope it will help you learn about Bootstrap typographical!
Articles you may be interested in:

  

 
   
Every day, Bootstrap is a simple entry
 
   
Navigation bar required by Bootstrap every day
 
   
Introduction to Bootstrap (zero) Bootstrap
 
   
Bootstrap entry books (iii) raster System
 
   
Bootstrap getting started book (4) menus, buttons and navigation
 
   
Bootstrap entry books (5) navigation bar and paging navigation