A paragraph is one of the other important elements in typography. A global text style is set for text in bootstrap (the text referred to here refers to the body text):
1, the global text font size is 14px (font-size).
2, Row height for 1.42857143 (line-height), about 20px(You see a string of decimals may have doubts, in fact, he is calculated by the less compiler, of course, Sass also has such a function).
3, the color is dark gray (#333);
4, the font for "Helvetica Neue", Helvetica, Arial, Sans-serif, (font-family), perhaps such a font is not suitable for our Chinese, but in the actual project, You can reset according to your own needs, here we do not do too much elaboration, we return here. This setting is defined on the <body> element, because these properties are inherited properties , so the text of the Web page (including the paragraph P element) will have these style effects if no resets.
/* Source Please check the Bootstrap.css file in line No. 274 ~280 * *
Body {font-family: "Helvetica Neue", Helvetica, Arial, Sans-serif;font-size:14px;line-height:1.42857143;color: #333; Background-color: #fff;}In addition, in Bootstrap, in order to have a certain spacing between the paragraph p elements, it is convenient for the user to read the text, deliberately set the margin value of p element (by default,p The element has a top and bottom margin and maintains a high height of the row):/* source Please see the bootstrap.css file in line No. 467 ~469 * *
P {margin:0 0 10px;}If you know something about the CSS preprocessor, you can customize the typography settings based on the precompiled version less (or sass) provided by Bootstrap. In bootstrap, the default values for the typographic settings are two variables in the variables.less file (the Sass version exists in _variables.scss ):
Less version:
@font-size-base:14px; @line-height-base:1.428571429; 20/14
Sass Version:
$font-size-base:14px!default; $line-height-base:1.428571429!default; 20/14
The first statement is used to set the font size , and the second statement is used to set the row height . The system uses these two values by default to generate the corresponding margin, padding, and line-height values for the entire page. In other words, you only need to modify the values of the two variables and recompile, and you can customize your own bootstrap layout style. (interested students can try, here for less or SASS version of the use do not do too much elaboration).
<! DOCTYPE html> < html> < head> < meta charset= "Utf-8" > < title> paragraph (body text) </title> < link Rel= "stylesheet" href= "//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" >
<body> < p>Bootstrap is an open source toolkit for front-end development launched by Twitter. It was developed by Twitter's designer Mark Otto and Jacob Thornton, and is a css/html framework. </p> < p>seashen.cn is the leading HTML5 learning community in China! </p></body>
Emphasis on contentIn a real project, for some important text, the part that you want to highlight will do a different style of processing. Bootstrap also did some lightweight processing for this part.
If you want a paragraph p to be highlighted, you can do so by adding the class name ".lead", which is to increase the text size, bold text, and handle the line height and margin accordingly. Use the following:
class= "Lead"> I was deliberately to highlight the text, I look like this. I was deliberately to highlight the text, I look like this. </p>
Effects view the rightmost results window.
". Lead" corresponds to the following style:/ * Source view bootstrap.css file line No. 470 ~480 */
. lead {margin-bottom:20px;font-size:16px;font-weight:200;line-height:1.4;} @media (min-width:768px) {/* medium size browser font slightly larger */.lead {font-size:21px; }}In addition, Bootstrap is also tagged with elements:<small>,<strong>,<em> and <cite> Give the text a prominent style handle. /* Source view Bootstrap.css file line 55th ~ 58th Line * *
B,strong { font-weight:bold;/* Text bold */}/* Source view Bootstrap.css file line No. 481 ~ No. 484 Line * *
Small,.small { font-size:85%;/* 85% of the standard font, i.e. 14px * 0.85px, almost 12px*/}/* Source view bootstrap.css lines No. 485 ~ No. 487 Line */
cite {font-style:normal;}Bold is to give the text bold, in ordinary elements we generally use the font-weight set to bold keyword text bold. In bootstrap, you can use the <b> and <strong> tags to make text bold directly. /* Source view Bootstrap.css file line 55th ~ 58th Line * *
B,strong { font-weight:bold;/* Text bold */}For example, the following code defines the emphasis text using the <strong> tag:
Italic body<p> I am learning <strong>Bootstrap</strong>, I want to master <strong>Bootstrap all the knowledge of </strong>. </p>
In typography, you can use italics in addition to highlighting the highlighted text in bold. Italic is similar to bold, except that you can set the style of the element Font-style value to italic implementation, in Bootstrap you can also use the label <em> or <i> to achieve. For example, the following code defines the emphasis text using the <em> and <i> Tags:
Emphasis on related classes<p> I'm on seashen.cn online with <em> Sea </em> Learning <i>Bootstrap</i> the use of. I must learn <i>Bootstrap</i>. </p>
In Bootstrap, in addition to the use of labels <strong>, <em> and other descriptions of the importance of certain words and sentences, bootstrap also defines a set of class names, which is called the emphasis class name (similar to the previous ". lead "), these emphasis classes are highlighted by color, with this note as follows:
With source code view Bootstrap.css file line No. 500 ~ Line No. 532:
.text-muted {color: #999;}. text-primary {color: #428bca;} a.text-primary:hover {color: #3071a9;}. text-success {color: #3c763d;} a.text-success:hover {color: #2b542c;}. text-info {color: #31708f;} a.text-info:hover {color: #245269;}. text-warning {color: #8a6d3b;} a.text-warning:hover {color: #66512c;}. Text-danger {color: #a94442;} a.text-danger:hover {color: #843534;} <! DOCTYPE html>The alignment of text is inseparable from the layout. Text-align is often used in CSS to set the alignment style of text. There are four main types of styles:
? Left-Justified
? Center alignment, Value Center
? Right-justified, take value
? Justify, value justify
For ease of use, bootstrap controls the alignment style of text by defining four class names:
? . Text-left: Left Justified
? . Text-center: Center Alignment
? . Text-right: Right-justified
? . Text-justify: Justify on both sides
Specific Source view Bootstrap.css file line No. 488 ~ Line No. 499:
. text-left {text-align:left;}. text-right {text-align:right;}. Text-center {text-align:center;}. text-justify {text-align:justify;}For example, the following four lines of code define four different alignment styles for text, respectively:
<p class= "Text-left" > I live left </p><p class= "Text-center" > I center </p><p class= "Text-right" > I'm Right </p><p class= "Text-justify" > I justify </p>Paragraphs and highlights in bootstrap
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
