Bootstrap entry book (1) typographical _ javascript skills

This article mainly introduces the relevant information of the Bootstrap getting started book (I) typographical. For more information, see 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, the title is used in the same way as in general html: The title elements are arranged from large to small, but the default style is reset in Bootstrap, from the source code, we can see the following commonalities:

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.

 Bootstrap Title 1 Bootstrap Title 2 Bootstrap Title 3 Bootstrap Title 4 Bootstrap Title 5 Bootstrap Title 6
 
Bootstrap Title 1
Bootstrap Title 2
Bootstrap Title 3
Bootstrap Title 4
Bootstrap Title 5
Bootstrap Title 6

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:

Bootstrap Title 1I am a subtitle

Of course, this setting can be used from the very beginning. SubtitleHave their own unique styles:

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 ~ In h3The label text 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

Lead
 I Small Strong Em 

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.

Tip: Use light gray (#999)
Mainly, use blue (# 428bca)
Succeeded. Use light green (# 3c763d)
Notification Information, with light blue (# 31708f)
Warning, use yellow (# 8a6d3b)
Dangerous, use brown (# a94442)

4. Text alignment Style

I left
Center
Right
Align both ends

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.

 
 

  
  
Project List 
     
 
      
Project ID
 
      
Project ID
 
     
 
 

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:

 
 

  
  
 
   Title 1: 
  
  
  
 
   Description content. I like the front-end and responsive layout very much. It can provide a good experience on a screen of different sizes. I am a beginner now, but I will be better at it. 
  
  
  
 
   Title 2: Title 2: Title 2: Title 2: 
  
  
  
 
   Description 
  
 
 

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:

UseTo display single-line Inline code-code for a single word or sentence
Use

To display multi-line block code-for multi-line code (that is, block-based code)
UseTo display the user input code-indicates 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:

Bootstrap has three code styles:、
And
Pre style:
     
     

      
      
...
     
     
Kbd style:
EnterCtrl + cAnd then useCtrl + vTo paste the code
Elements are generally used to display large pieces of code and ensure 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


     

        
     
       Responsive table: the principle is to add a container outside the table to wrap up a common table. The following describes in detail:  
     
     
     
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 needYou can use these classes when adding tags.
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, just like
In this way
   
   Add a table-hover class to the label. (INWhen you set the scene color, this class still has an effect, but the effect is 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!