Home > Developer > Web Develop
Boottarp Learning (1) typographical, boottarp learning typographical
Title
Just like an ordinary HTML page, Bootstrap uses the label
Through comparison, we can find that the Bootstrap title style has been significantly optimized and reset as follows:
1. ResetMargin-topAndMargin-bottomValue,H1 ~ H3The reset values are20px;H4 ~ H6The reset values are10px.
2. The Row Height of all titles is1.1(That is, 1.1 times the font-size), and the text color and body inherit the color and font of the parent element.
3. Fixed the font size of titles of different levels,H1 = 36px, h2 = 30px, h3 = 24px, h4 = 18px, h5 = 14pxAndH6 = 12px.
<! -- Title in Bootstrap -->
Bootstrap Title One Bootstrap Title Two Bootstrap title three Bootstrap Title Four Bootstrap Title Five Bootstrap title six
In addition, we often encounter a subtitle following a small line in Web production. He also considered this typographical effect in Bootstrap and used the <small> label to create a subtitle. This subtitle has its own unique style:
1,Row Height1AndFont-weightSetNormalIt becomes the regular effect (not bold), and the color is setGray (#999 ).
2,Because<Small>Text font inH1 ~ H3And its size is set to the current font size65%;InH4 ~ H6The font size is set to the current font size.75%;<! -- The <small> label is used in Bootstrap to create a subtitle -->Bootstrap Title 1 I am a subtitleBootstrap Title 2 I am a subtitleBootstrap Title 3 I am a subtitleBootstrap Title 4 I am a subtitleBootstrap Title 5 I am a subtitleBootstrap Title 6 I am a subtitle Section (body text)
A paragraph is another important element in typographical layout. In Bootstrap, a global text style is set for the text (the text here refers to the text ):
1. The global text font size is14px (font-size).
2. The Row Height is1.42857143 (line-height), Approximately20px(You may be confused when you see a string of decimal places. In fact, it is calculated using the LESS compiler. Of course, Sass also has such a function ).
3. The color isDark gray (#333);
4. The font is"Helvetica Neue", Helvetica, Arial, sans-serif; (font-family), Maybe this font is not very suitable for Chinese, but in actual projects, You can reset it according to your own needs. Here we will not elaborate too much, so we will return here. This setting is defined in<Body>Element, because these attributes areInherited attributesTherefore, text in the Web page (including section p elements) will have these style effects if it is not reset.
ContentIn actual projects, some important texts that you want to emphasize will be processed separately. Bootstrap also makes some lightweight processing on this part.
If you want to make a paragraphPHighlighted by adding the class name". LeadThe function is to increase the text font size, bold text, and the line height andMarginThe corresponding processing is also done. The usage is as follows:
<P> I am a common text, and I am a common text. </p> <pClass = "lead"> I specifically want to highlight the text. It looks like this. I want to highlight the text. I look like this. </P>
BoldBold is to bold the text. In common elements, we usually use font-weight to set the bold keyword to bold the text. In Bootstrap, you can use<B>And<Strong>Label to make the text bold directly.
/* Source Code: 55th lines to the bootstrap.css File ~ 58th rows */B, strong {font-weight: bold;/* bold text */}
For example, the following code uses<Strong>The tag defines the highlighted text:<P> I am studying<Strong>Bootstrap</Strong>, I want to know<Strong>Bootstrap</Strong>All knowledge. </P>ItalicsIn typographical layout, you can also use italics in addition to highlighting the highlighted text. Italics are similar to bold words. Apart from setting styles for elementsFont-styleThe value isItalicIn addition to the implementation, you can also use tags in Bootstrap<Em>Or<I>.
For example, the following code uses<Em>And<I>The tag defines the highlighted text:<P> I followed MOOC online<Em>Damo</Em>Learning Together<I>Bootstrap</I>. I must learn<I>Bootstrap</I>. </P>Emphasize related classesIn Bootstrap, besides labels<Strong>, <em>Bootstrap also defines a set of class names that emphasize the importance of certain words and sentences in the text.. Lead"), These emphasizing classes are highlighted by colors. This description is as follows:
Div class = "text-muted">. text-muted effect </div> <div class = "text-primary">. text-primary effect </div> <div class = "text-success">. text-success effect </div> <div class = "text-info">. text-info effect </div> <div class = "text-warning">. text-warning effect </div> <div class = "text-danger">. text-danger effect </div>
Text alignment is indispensable in typographical layout. In CSS, text-align is often used to set the text align style. There are four main styles:
Left alignment; Value: left
Center alignment, value center
Right alignment; Value: right
Alignment on both ends; Value: justify
For ease of use, Bootstrap defines four class names to control the text alignment style:
. Text-left: left alignment
. Text-center: center alignment
. Text-right: right-aligned
. Text-justify: aligned on both ends
List -- OverviewIn HTML documents, there are three types of list structures: ordered list, unordered list, and definition list. The labels used are described as follows:
Unordered list
<ul> <li>…</li></ul>
Ordered list
<ol> <li>…</li></ol>
Definition list
<dl> <dt>…</dt> <dd>…</dd></dl>
Bootstrap providesSix TypesForm list:
Normal list
Ordered list
Click list
Inline list
Description list
Horizontal description list
List -- unordered list and ordered listUnordered list
569th rows of the hosts file ~ Row 3:
Ul, ol {margin-top: 0; margin-bottom: 10px;} ul, ol ul, ul ol, ol {margin-bottom: 0 ;} list -- de-vertex listAs you can see, in Bootstrap, by defaultUnordered listAndOrdered listIt is a project symbol, but in actual work, we do not need this number for the list, for example, when using Unordered Lists for navigation. Bootstrap is a weekly consideration for many developers. By adding a class name to the unordered list,. List-unstyledTo remove the default list style. /* For the source code, refer to the 580th lines of the bootstrap.css file ~ 583rd rows */
.list-unstyled {padding-left: 0;list-style: none;}As shown in the example, in addition to the project numberLeft marginAlsoClear 0.
List-inline list
Bootstrap adds the class name". List-inlineTo implement the inline list, simply putChange the vertical list to a horizontal list.,Remove the project symbol (number),Maintain horizontal display. It can also be said that the inline list is generated for horizontal navigation.
/* Source Code: 584th lines to the bootstrap.css File ~ 593rd rows */
.list-inline {padding-left: 0;margin-left: -5px;list-style: none;}.list-inline > li {display: inline-block;padding-right: 5px;padding-left: 5px;}List -- definition list
For the definition list, Bootstrap does not make too many adjustments, but only adjustsLine spacing,MarginAndBold fontEffect.
/* For the source code, refer to the 594th lines of the bootstrap.css file ~ 607th rows */
dl {margin-top: 0;margin-bottom: 20px;}dt,dd {line-height: 1.42857143;}dt {font-weight: bold;}dd {margin-left: 0;}
<Dl> <dt> W3cplus </dt> <dd> A Technical blog dedicated to promoting the domestic frontend industry </dd> <dt> MOOC </dt> <dd> educational websites </dd> </dl>
The horizontal definition list is like an inline list. Bootstrap can add the class name". Dl-horizontalTo display the definition list horizontally.
/* For the source code, refer to the 608th lines of the bootstrap.css file ~ 621st rows */
@media (min-width: 768px) {.dl-horizontal dt {float: left;width: 160px;overflow: hidden;clear: left;text-align: right;text-overflow: ellipsis;white-space: nowrap; }.dl-horizontal dd {margin-left: 180px; }}
A media query is added here. That is to say, only the screenGreater than 768pxAdd the class name". Dl-horizontal. The main implementation method is as follows:
1. Set a left floating value for dt and a width of 160px.
2. Set dd to a margin-left value of 180px to achieve the horizontal effect.
3. When the title width exceeds PX, three ellipsis are displayed.
<Dl class = "dl-horizontal"> <dt> W3cplus </dt> <dd> A Technical blog dedicated to promoting the domestic front-end industry. It takes exploration as its mission and is constantly active at the forefront of the industry's technology. It strives to provide a high-quality front-end technology blog </dd> <dt> MOOC </dt> <dd> A professional, A training website </dd> <dt> I want to test a title, let me test a title </dt> <dd> I'm writing a horizontal definition list, and I'm writing a horizontal definition list </dd> </dl>
This section is relatively simple. It is generally used frequently on personal blogs and is used to display the code style. Bootstrap mainly providesThree code styles:
1. Use<Code> </code>To display the Inline code of a single row
2. Use<Pre> </pre>To display multiple lines of code
3. Use<Kbd> </kbd>To display user input code
In the pre-compiled version, Bootstrap extracts the code style separately:
1. For the LESS version, see the code. less file.
2. For the Sass version, see the _ code. scss file.
For the compiled csscode, please check the bootstrap.css file line 688th ~ The code is too long and is not listed here.
When using code, you can use different types based on specific requirements:
1,<Code>: GenerallyA single word or sentenceCode
2,<Pre>: GenerallyMulti-line code(Block-based code)
3,<Kbd>: GenerallyUser input through the keyboard
Although different types have different styles, their usage is similar.
Code style:
<Div> Bootstrap has three code styles:<Code> & lt; code & gt; </code>,<Code> & lt; pre & gt; </code>And<Code> & lt; kbd & gt; </code></Div>
Pre style:
<div><pre><ul><li>...</li><li>...</li><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>
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> <li>... </li> <li>... </li> </ul> </pre> </div> kbd style: <div> enter <kbd> ctrl + c </kbd> to copy the code, then use <kbd> ctrl + v </kbd> to paste the Code </div>
<code>,
<pre>And
<kbd>Pre style:
<ul><li>...</li><li>...</li><li>...</li></ul>Kbd style: Enter Ctrl + cTo copy the code, and then use Ctrl + vTo paste the code
Use ctrl + x to copy the code, and then press ctrl + shift + v to paste the copied code to the desired place.
Code (2)As shown above, the <pre> element is 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". Pre-scrollableTo control the maximum height of the code block area.340pxOnce the height is exceededScroll bar appears on the Y axis.
/* For the source code, refer to bootstrap.css row 731st ~ 734th rows */
.pre-scrollable {max-height: 340px;overflow-y: scroll;}
Tip: If you know CSS predefined processors such as LESS or Sass, you can useCode. lessOr_ Code. scssFile style modification, and then re-compile, you can get your own code style.
If the height exceeds PX, a scroll bar will appear on the Y axis <! -- The following is the code task section --> <pre> <ol> <li> .... </li> <li> .... </li> <li> .... </li> <li> .... </li> <li> .... </li> <li> .... </li> <li> .... </li> <li> .... </li> <li> .... </li> <li> .... </li> <li> .... </li> <li> .... </li> <li> .... </li> <li> .... </li> </ol> </pre>
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
