Bootstrap Introductory Book (i) Typesetting _javascript skills

Recommended Reading : Bootstrap Introductory Books (0) Bootstrap Introduction

Bootstrap uses Helvetica neue, Helvetica, Arial, and Sans-serif as their default font stacks.

With the Bootstrap layout feature, you can create headings, paragraphs, lists, and other inline elements.

1. Title

In Bootstrap, the title is used in the same way as regular HTML: from

The font color and font style are inherited from the parent element, the font weight is 500, and the row height is all set to 1.1 (that is, 1.1 times times Font-size)

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

There are differences in headings of different sizes:

In bootstrap, the font size for different level headings is set to: H1=36px,h2=30px,h3=24px,h4=18px,h5=14px and h6=12px.

Resets the values of Margin-top and Margin-bottom, the values after h1~h3 reset are 20px, H4~h6 reset values are 10px.

In addition, in order to make the bootstrap elements and headings use the same style, it is also deliberately defined. H1~.H6 six class names. As shown below:

In Bootstrap, the following code shows the same effect.

<!--bootstrap title-->
 
 

Because in practical applications, we may often encounter situations in which a subtopic is followed by a subtitle in addition to the main title. Bootstrap humanized for us to set such an effect. The use of the method is also very simple, as follows:

Needless to be sure, you can use this setting from

The row height is all set to 1, and the font weight becomes normal (not bold), and the color is set to Gray (#999).
The <small> label text within the H1~H3 is set to 65% of the current font size, and the font size within H4~H6 is set to 75% of the current font size;

2. Body text

The text global style in Bootstrap is as follows:

Font size is 14px
Row height is 1.42867143 (about 20px)
Font color is #333
The P label has a 10 pixel outer margin margin-bottom:10px;
Of course, you can set the reset style yourself. ^_^

3. Emphasizes

Font style related

<p class= "lead" >lead</p><!--font size is larger, row height is larger, the outer margin is larger-->
<i>i</i><!--No special significance, italic-->
<small>small</small><!--Small font-->
<strong>strong</strong><!--Tone strongly emphasized, Bold-->
<em>em</em><!--emphasis, italic-->

Emphasis on related classes

A series of such classes are defined in bootstrap, used for different scenarios, out of text, and BG (background color), and so on. Using the method is similar, just the previous text has made some changes! So. Remember these 6 words.

<p class= "text-muted" > hints, using light grey (#999) </p>
<p class= "Text-primary" > Main, using Blue (#428bca) </p >
<p class= "text-success" > successful, using light green (#3c763d) </p>
<p class= "text-info" > Notification information, using light blue (# 31708f) </p>
<p class= "text-warning" > Warning, using yellow (#8a6d3b) </p>
<p class= "Text-danger" > Danger, use Brown (#a94442) </p>

4. Text alignment style

<p class= "Text-left" > I left </p>
<p class= "Text-center" > I center </p>
<p class= " Text-right "> I ju right </p>
<p class=" text-justify "> I justify </p>

In Bootstrap, in order to simplify the operation, easy to use, using the above four classes corresponding to our CSS often use text-align to achieve text alignment style settings.

5. List

The setting of the list in bootstrap is basically consistent with native HTML, and it needs to be noted that:

There is a 10px of bottom margin between the lists

In the nested list, no bottom margin is included

Bootstrap of course will not be so simple to do a little modification, it defines some of the list of classes for us to use.

Go to the point list. list-unstyled

. list-unstyled {
padding-left:0;
List-style:none;
}

From the source, we can see this information, in addition to the item number removed, but also the default left margin also cleared away.

<ol>
<li class= "list-unstyled" >
project list
<ul class= "list-unstyled" >
<li> With item number </li>
<li> with project number </li>
</ul>
</li>
</ol>

In such a piece of code, three list items are neatly arranged together without bullets

Inline list. list-inline

In addition to going to the point list, bootstrap can implement an inline list by adding the class name ". List-inline", simply by replacing the vertical list with a horizontal list, and dropping the bullets (numbers) to keep the horizontal display. It can also be said that the inline list is for the production of horizontal navigation and health.

Horizontal definition list. dl-horizontal

The existing code is as follows:

<DL class= "Dl-horizontal" >
<dt> title one:</dt>
<dd> description, I like the front end and I like the responsive layout, It can provide a very good experience in a different size screen, I am now a beginner, but I will be stronger </dd> <dt> title two: Title two: Title
two:</dt>
<dd> description </dd>
</dl>

You can see the effect in the full screen of the browser as follows:

We'll change the size of the screen, and when we encounter a critical value (small screen), the horizontal definition list will revert back to the original state, as follows:

What is this for? Let's take a look at the source code!

Originally added a media query here, only when the screen is larger than 768px, add class name. dl-horizontal has a horizontal definition list effect. The main way to achieve this:

Set DT to a left float and set a width of 160px
Set DD to a margin-left value of 180px to achieve horizontal effect
Three ellipses will be displayed when the caption width is over 160px
Now look at the effect of the above is not the same as the description here? The answer is certainly yes ^ ^

6. Code

There are three code styles available in bootstrap:

Use <code></code> to display a single line of inline code-a pin's code for a single word or a single sentence
Use <pre></pre> to display multiple lines of code--for multiple lines of code (that is, blocks of code)
Use <kbd></kbd> to display user input code--represents what the user wants to enter through the keyboard

directly to see the effect of it!

The code is as follows: (Note that * * regardless of which style of code is used, it is necessary to use escape characters to override the less-than sign (<) and greater-than (>) in code)

Code style:

<div>bootstrap's code style has three kinds of:<code><code></code>, <code><pre></code> and < Code><kbd></code></div>

Pre Style:

<div>
<pre>
<ul>
<li>...</li>
</ul>
</pre>
</div>

KBD Style:

<div> Please enter <kbd>ctrl+c</kbd> to copy the code and then use <kbd>ctrl+v</kbd> to paste the code </div>

<pre> elements are typically used to display large chunks of code and ensure that the original format is unchanged. But sometimes the code is too much, and do not want it to occupy too much page space, you want to control the size of the code block. Bootstrap also consider this, you only need to add the class name to the pre label. Pre-scrollable, you can control the code block area maximum height of 340px, once exceeded this height, will appear in the Y axis (portrait) scroll bar.

Of course, you can also customize the configuration, for example: only in the custom CSS, for the class to add a word-wrap:normal; So that the horizontal scroll bar appears when the code block border is less horizontal than the horizontal length of the internal code.

7. Table

The table is one of the basic components of bootstrap, Bootstrap provides 1 basic styles and 4 additional styles for the table, as well as 1 support-responsive tables.

According to the above, Bootstrap provides different class names for different style styles of the table, mainly including:

. Table base Table
. table-striped Zebra Table
. table-bordered table with border
. table-hover Mouse Hover highlighted table
. table-condensed Compact Form
. table-responsive Response Table

. Table has three main functions:

Set margin-bottom:20px for the table and set the cell spacing
A 2px light gray solid line is set at the bottom of the thead.
A 1px light gray solid line is set at the top of each cell
Specific people can be viewed in the source code, the following several additional styles are not said here, but the following points to note:

The following tables attach styles that must be followed by the underlying style. Table, such as <table class= "table table-bordered table-hover" >
Response table: The principle is to add a container outside the table to wrap up the ordinary form, the following detailed description:

<div class= "table-responsive" ><!--key! After container package implementation response-->
<table class= "Table table-bordered" ><!--set table style, table with border-->
<thead><! -A table should have a header, if you write tr>td such a structure, the browser will automatically create a tbody package-->
</thead>
<tbody><!--with the same, even if you do not create, The browser will also automatically add Tbody wrap your code-->
</tbody>
</table>
</div>

The following are widescreen effects (no different from regular tables):

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

Table row's class, table scene

It has already been mentioned that in the bootstrap, different colors are used to display different information. Just made some minor changes in the class name. Here's what you can see:

Just add these classes to the <tr> tag and use them.

In addition, through the source can be seen, in addition to these color settings, bootstrap also set the hover effect (suspension state) of the color of the effect (it is separate color settings for different cases).

Implementation is also particularly simple, just like <table class= "Table-hover" > So, in the <table> tag plus a table-hover class. (in the case of <tr> does not have a scene color setting, the class is still effective, but the effect is not the same, the above has been said, because its individual settings, please go to the source code to view)

Also because of this, if you want to customize the color, in addition to modifying the TR element color style, in the. table-hover table also make corresponding adjustments!

The content of typesetting here is over, I hope to learn bootstrap typesetting related knowledge to help!