'In-depth Understanding of Bootstrap' Reading Notes: Chapter 3 CSS Layout

1. Outline the concept bootstrap is developed based on H5. It advocates mobile first (media inquiry statement is required), and does not support a wide range of browsers. Responsive images: max-width:100% height:auto; You can add: .img-responsive class The basic style of typography is: The margin of the body is 0, the background color is white, and the line spacing is 20/14 times Use the Normalize.css library to minimize differences between browsers Centered container container has a maximum range. (The maximum left and right margins are auto, related to the device) 2. Basic text typesetting (global settings) 1. Title (h mark and small mark) 1 2 3 4 5 6 h1 >header1 small >small tag subtitle small > h1 > h2 >header2 small >small tag subtitle small > h2 > h3 >header3 small >small tag subtitle small > h3 > h4 >header4 small >subtitle of small tag small > h4 > h5 >header5 small >subtitle of small tag small > h5 > h6 >header6 small >small tag subtitle small > h6 > The font color of the content in all title elements is gray (#999999), and the line spacing is 1.

The text font in is 65% of the font size corresponding to the current element in h1, h2, and h3; while in h4, h5, and h6, it is 75%.

A. The font size is 14px and the spacing is 20px. The margin-bottom of the p element is half the line spacing (10px).

B. Highlight

When you have a piece of text that you want to highlight but don’t want to get the same weight as the h mark, you can class="lead"

1 span class = "lead" >email me span > As shown in the picture, the comparison effect between lead and h1:

2. Emphasize text Accent elements Performance small

(You can directly apply the .small class)

Small text strong Emphasis (bold) em italic cite Cite sources, font size is 85%

3. Abbreviations abbr and .initialism Both can achieve the underline dotted hover hand effect, which needs to be used with the title attribute.

4. address address Used to package information related to contact information. The style difference is that the spacing and bottom style are slightly different.

1 2 3 4 5 6 7 8 9 10 address > strong >Twitter, Inc. strong > br > 795 Folsom Ave, Suite 600 br > San Francisco, CA 94107 br > abbr title = "Phone" >P: abbr >(123) 456-7890 address > address > strong > Uncle Tom strong > a href = "mailto:#" >tomxu@outlook.com a > address >

The effect is as shown in the picture

5. Quote blockquote The general format for citations is

1 2 3 4 Love is not something you can just buy if you want

From Love Sales

Of course, replacing small with footer will have the same effect.

The default is left-aligned. If you want to right-align, you can use the .pull-right class for blockquote. The whole thing floated to the right.

6. List (1)ul-li unordered list Under bootstrap, the ul-li framework of ordinary lists is basically the same as the default.

A. The style of the ul-li list is determined by list-style. Use the .list-unstyle class in the bootstrap framework. The source code style is nothing more than padding-left:0;list-style:none.

Note: If it is a list nested list, if the . list-unstyle class is applied to the grandparent ul, the grandchild li will not inherit it.

B. Inline list: Normal ul-li is displayed vertically. In many situations, the most typical one is navigation, which requires li to be arranged horizontally. At this time, you can use the .list-inline class of the inline list

1 2 3 4 5 ul class = "list-inline" >

(2) ordered list ol-li Changed the font to make the display softer

(3) dl-dt-dd definition list The definition list includes description information. The dl-dt-dd definition list under bootstrap is usually arranged vertically.

1 2 3 4 5 6 7 8 dl > dt >Title 1 dt > dd >Description 1 dd > dt >Title 2 dt > dd >Description 2 dd > dt >Title 3 dt > dd >Description 3 dd > dl >

我想在横向展示一个商品列表，包括描述信息。如果给dl加上 class="dl-horizontal"

7. 代码 包括code单行代码，kbd用户输入代码和pre多行代码块。

代码样式的用法示例如下：

1 2 3 code > code > br > kbd > kbd > pre > pre > （1）code code内联代码可以在行间引用。原理是给code标记定义背景色，文字颜色

（2）kbd kbd表示需要用户输入，可以配合input元素使用。

1 请输入 ctrl+c 来复制代码，然后使用 ctrl+v 来粘贴代码

（3）多行代码块pre pre是预编译的意思。bootstrap实现基本方法是背景-边框，高度，圆角，竖向滚动。

粘贴进去会有空格。

类似还有 可以格式化代码。用较为标准的字体和行间距显示

8.其它H5标记补充 （1） ,也可以使用.mark

1 p class = "mark" >this is mark text p >

(2) del mark and s mark 1 del >I am delated. del >

(3) ins tag and u tag Underscore, ins defines text that has been inserted into the document. The u mark has different semantics from ins. If the text is not a hyperlink, don’t use the u mark (4) Alignment related ——text-left ——text-center ——text-right Text is centered left, center and right. ——text-justify: judge for yourself—Qi Xing defines the spacing between words, which is similar to the head and tail avoidance rule. Note that there are also corresponding properties in css3. ——text-nowrap: Always keep 1 line when the browser is zoomed out (5) Case related: text-lowercase text-uppercase text-capitalize initial letter size 【Example 3.1】Text formatting practice 1 2 3 4 5 6 7 8 div class = "text-justify" > h3 class = "text-center" >I am afraid small >William Shakespeare small >&lt ;/ h3 > p class = "text-capitalize" >you say that you love rain, but you open your umbrella when it rains.You say that you love the sun, but you find a shadow spot when the sun shines.You say that you love the wind, but you close your windows when wind blows. p > p > This is why I am afraid, you say that u love me too. p > > ins > em >Translation em > ins &g t; & & Lt; P & gt; You say that the rain and rain are slightly mang, Lanting looks away; You said that spring was brilliant, green sleeves were red and fragrant; later, the west building was hidden inside, and I stood quietly beside you. You said that the soft breeze blows gently, and I lie down drunk and think; later, the doors and windows are tightly closed, and the tents are filled with sorrow. p > p > div >

3. Table related css The table is implemented by adding the .table class to the table

【Example 3.2】 Make a table with 5 rows and 5 columns to record information

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 table > Since td >TITLE td > td >AUTHOR td > td >PUBDATE td > td >PRICE td > tr > thead > tbody > tr > td >1 td > td >西游记 td > td >吴承恩 td > ~ td >3 td > td >水浒传 td > td >施耐庵 td > td >30.99 td > td >2010-1-3 td > tr > tr > td >4 td > td >红楼梦 td > td >曹雪芹 td > td >40.99 td > td >2010-1-4 td > tr > tbody > table >

Displayed when there is no class style:

1.table basic style (1) Add class="table" to the table tag, the effect becomes:

Is it possible to become rich, handsome and rich in seconds?

(2) Alternate row color change. table-striped table-striped: zebra crossing

Using CSS3’s :nth-child implementation.

(3) Add border Use .table-bordered to add a 1px border to all cells.

(4)Hover Highlight Use .table:hover to highlight the current row on hover

(5) Compact Tables table-condensed: Condensed, slightly smaller - reduces cell padding. This is what it looks like after applying everything.

Code List

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 table class = "table table-bordered table-striped table-hover table-condensed" > thead > tr > td >ID td > td >TITLE td > td >AUTHOR td > td >PUBDATE td > td >PRICE td > tr > thead > tbody > tr > td >1 td > & & Lt; td & gt; Journey to the West & LT;/ td & gt; ~ td >2010-1-2 td >

'In-depth Understanding of Bootstrap' Reading Notes: Chapter 3 CSS Layout

Related articles