Bootstrap introductory book (1) Typesetting_javascript skills

Recommended reading: Bootstrap introductory book: (Zero) Introduction to Bootstrap

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

Using Bootstrap’s typography features, you can create headings, paragraphs, lists, and other inline elements.

1. Title

The way to use titles in Bootstrap is the same as in regular HTML: arrange the title elements from large to small from 4a249f0d628e2318394fd9b75b4636b1 to 4e9ee319e0fa4abc21ff286eeb145ecc, but the default style is reset in Bootstrap, which can be found in the source code We see the following commonalities:

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

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

The differences between titles of different sizes are as follows:

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

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

In addition, in order to use the same style for non-title elements and titles in Bootstrap, six class names .h1~.h6 are also specially defined. As shown below:

In Bootstrap, the following code displays the same effect.

<!--Bootstrap中的标题-->
<h1>Bootstrap标题一</h1>
<h2>Bootstrap标题二</h2>
<h3>Bootstrap标题三</h3>
<h4>Bootstrap标题四</h4>
<h5>Bootstrap标题五</h5>
<h6>Bootstrap标题六</h6>
<!--Bootstrap中让非标题元素和标题使用相同的样式-->
<div class="h1">Bootstrap标题一</div>
<div class="h2">Bootstrap标题二</div>
<div class="h3">Bootstrap标题三</div>
<div class="h4">Bootstrap标题四</div>
<div class="h5">Bootstrap标题五</div>
<div class="h6">Bootstrap标题六</div>

Because in practical applications, we may often encounter a situation where in addition to the main title, there is a subtitle immediately afterwards. Bootstrap humanistically sets up such an effect for us. The method of use is also very simple, as follows:

<h1>Bootstrap标题一<small>我是副标题</small></h1>

Of course, this setting will work from 4a249f0d628e2318394fd9b75b4636b1 to 4e9ee319e0fa4abc21ff286eeb145ecc. The subtitle d015d241ae6d34c34210679b5204fe85 has its own unique style:

The line heights are all set to 1, the font weight is changed to regular (not bold), and the color is set to gray ( #999 ).
The size of the d015d241ae6d34c34210679b5204fe85 tag text within h1~h3 is set to 65% of the current font size; while the font size within h4~h6 is set to 75% of the current font size;

2. Main text

The global text style in Bootstrap is as follows:

Font size is 14px
The line height is 1.42867143 (approximately equal to 20px)
The font color is #333
There is a bottom margin of 10 pixels outside the p tag margin-bottom:10px;
Of course, you can set the reset style yourself. ^_^

3. Emphasis

Font style related

<p class="lead">lead</p><!-- 字体变大，行高变大，下外边距变大 -->
<i>i</i><!--无特殊意义， 斜体 -->
<small>small</small><!-- 小号字体-->
<strong>strong</strong><!-- 语气强烈的强调，粗体 -->
<em>em</em><!-- 强调，斜体 -->

Emphasis on relevant classes

A series of such classes are defined in Bootstrap, which are used in different scenarios. In addition to text, there are also bg (background color) and so on. The usage is similar, except that the previous text has been changed! so. Remember these 6 words

<p class="text-muted">提示，使用浅灰色（#999）</p>
<p class="text-primary">主要，使用蓝色（#428bca）</p>
<p class="text-success">成功，使用浅绿色(#3c763d)</p>
<p class="text-info">通知信息，使用浅蓝色（#31708f）</p>
<p class="text-warning">警告，使用黄色（#8a6d3b）</p>
<p class="text-danger">危险，使用褐色（#a94442）</p>

4. Text alignment style

<p class="text-left">我居左</p>
<p class="text-center">我居中</p>
<p class="text-right">我居右</p>
<p class="text-justify">我两端对齐</p>

In Bootstrap, in order to simplify the operation and facilitate use, the above four classes are used to correspond to the text-align we often use in CSS to set the text alignment style.

5. List

The list settings in Bootstrap are basically the same as the native HTML. Things to note are:

Have 10px bottom margin between lists

In nested lists, there is no bottom margin

Of course Bootstrap will not just make a little modification, it defines some classes about lists for us to use.

Go to 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 item number, it also clears the default left margin.

<ol>
<li class="list-unstyled">
项目列表
<ul class="list-unstyled">
<li>带有项目编号</li>
<li>带有项目编号</li>
</ul>
</li>
</ol>

In such a piece of code, the three list items will be neatly arranged together, and none of them have bullets

Inline list .list-inline

In addition to removing dotted lists, Bootstrap can also implement inline lists by adding the class name ".list-inline". To put it simply, it means changing the vertical list into a horizontal list, and removing the bullets (numbering), keeping Display horizontally. It can also be said that inline lists are born for making horizontal navigation.

Horizontal definition list .dl-horizontal

The existing code is as follows:

<dl class="dl-horizontal">
<dt>标题一：</dt>
<dd>描述内容，我很喜欢前端，也很喜欢响应式布局，它能在个不同大小的屏幕下提供很好的体验，我现在是初学者，但是我会越来强的</dd>
<dt>标题二：标题二：标题二：标题二：</dt>
<dd>描述内容</dd>
</dl>

在浏览器全屏显示中可以看到效果如下：

 

我们来把屏幕大小进行改变，在遇到一个临界值时（小屏），水平定义列表将回复到原始的状态，如下改变：

 

这是为什么呢？我们去看看源码吧！

原来在这里添加了一个媒体查询，只有 屏幕大于768px 的时候，添加类名 .dl-horizontal 才具有水平定义列表效果。其实现主要方式：

将dt设置了一个左浮动，并且设置了一个宽度为160px
将dd设置一个margin-left的值为180px，达到水平的效果
当标题宽度超过160px时，将会显示三个省略号
现在再看看上面的效果是不是和这里的描述都是一样的呢？答案当然是肯定的 ^ ^

6. 代码

在Bootstrap主要提供了三种代码风格：

使用 ffbe95d20f3893062224282accb13e8f1cd55414ff5abdfea5dd958e7e547fdd 来显示单行内联代码——针对于 单个单词或单个句子 的代码
使用 e03b848252eb9375d56be284e690e873bc5574f69a0cba105bc93bd3dc13c4ec 来显示多行块代码——针对于 多行代码 （也就是成块的代码）
使用 5e4e803d53d659f332070b5d4aa430dbfef2f75ac4ec8153f0fa6efea5a0515d 来显示用户输入代码——表示 用户要通过键盘输入的内容

直接来看效果吧!

 

代码如下：（需要注意的是，**不管使用哪种代码风格，在代码中碰到小于号（ 11ef5bafbf9d727d95fdee6ca9b96700 ）都需要使用转义字符来替代）

code风格：

<div>Bootstrap的代码风格有三种：<code><code></code>、<code><pre class="brush:php;toolbar:false"></code>和<code><kbd></code></div>

pre风格：

<div>
<pre class="brush:php;toolbar:false">
<ul>
<li>...</li>
</ul>