[上海|结业弟子]JS-赵朋|2019年10月06日的日报-技能树.IT修真院

发表于： 2019-10-06 21:07:52

1 1044

偏移列

偏移列通过 offset-*-* 类来设置。第一个星号( * )可以是 sm、md、lg、xl，表示屏幕设备类型，第二个星号( * )可以是 1 到 11 的数字。

为了在大屏幕显示器上使用偏移，请使用 .offset-md-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。

例如：.offset-md-4 是把.col-md-4 往右移了四列格。

<div class="col-md-4 offset-md-4 bg-warning">.col-md-4 .offset-md-4</div>

</div>

<div class="col-md-4 offset-md-4 bg-warning">.col-md-4 .offset-md-4</div>

<div class="col-md-4 bg-success">.col-md-4</div><div class="col-md-4 offset-md-4 bg-warning">.col-md-4 .offset-md-4</div>

</div>

总结:.offset的偏移就是把宽度分成12份，在，col的基础上叠加属性，向右偏移距离，每个单位1/12，计入和为12的计算，后面的元素单位超过换行

运用网格布局做task8首页的头部

<div class="container-fluid">

<div class="row">

<div class="col-md-6 offset-md-2">客服热线:010-594-78634</div>

<img class="col-md-1 header-logo" src="1.png">

<img class="col-md-1" src="2.png">

<img class="col-md-1" src="3.png">

</div>

</div>

遇到问题;如上所示，因为网格布局，宽度按视口百分比固定，失败

解决：为包裹他们外部的盒子设置网格布局

<div class="container-fluid">

<div class="row">

<div class="col-md-6 offset-md-2">客服热线:010-594-78634</div>

<div class="col-md-1">

<img src="1.png"></div>

<div class="col-md-1">

<img src="2.png"></div>

<div class="col-md-1">

<img src="3.png">

</div>

</div>

</div>

经过调整

<div class="container-fluid header">

<div class="row">

<div class="col-md-7 offset-md-2">客服热线:010-594-78634</div>

<div class="col-md-2">

<img src="1.png" />

<img class="header-logo" src="2.png" />

<img class="header-logo" src="3.png" />

</div>

</div>

</div>

css

html{

font-size: 10px;

}

.header{

padding: 1rem 0;

}

.header-logo{

margin-left:1rem;

}

Bootstrap4 文字排版

Bootstrap 4 默认的 font-size 为 16px, line-height 为 1.5。

默认的 font-family 为 "Helvetica Neue", Helvetica, Arial, sans-serif。

所有的 <p> 元素 margin-top: 0 、 margin-bottom: 1rem (16px)。

<h1> - <h6>

Bootstrap 中定义了所有的 HTML 标题

<h1>h1 Bootstrap 标题 (2.5rem = 40px)</h1>

<h2>h2 Bootstrap 标题 (2rem = 32px)</h2>

<h3>h3 Bootstrap 标题 (1.75rem = 28px)</h3>

<h4>h4 Bootstrap 标题 (1.5rem = 24px)</h4>

<h5>h5 Bootstrap 标题 (1.25rem = 20px)</h5>

<h6>h6 Bootstrap 标题 (1rem = 16px)</h6>

</div>

Display 标题类

Bootstrap 还提供了四个 Display 类来控制标题的样式: .display-1, .display-2, .display-3, .display-4。

<h1 class="display-1">Display 1</h1>

<h1 class="display-2">Display 2</h1>

<h1 class="display-3">Display 3</h1>

<h1 class="display-4">Display 4</h1>

</div>

Display 标题可以输出更大更粗的字体样式。

总结:1~4,粗细由大到小排列

<small>

在 Bootstrap 4 中 HTML <small> 元素用于创建字号更小的颜色更浅的文本:

<p>small 元素用于字号更小的颜色更浅的文本:</p>

</div>

<mark>

Bootstrap 4 定义 <mark> 为黄色背景及有一定的内边距:

<abbr>

Bootstrap 4 定义 HTML <abbr> 元素的样式为显示在文本底部的一条虚线边框:

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

总结:鼠标悬停会显示标签内的文本

对于引用的内容可以在 <blockquote> 上添加 .blockquote 类

<p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</p>

<footer class="blockquote-footer">From WWF's website</footer>

</blockquote>

总结：标签作用就是在引用结尾显示:

这个样式

<dl>

Bootstrap 4 定义 HTML <dl> 元素的样式如下:

<dl>

<dt>Coffee</dt>

<dd>- black hot drink</dd>

<dd>- white cold drink</dd>

</dl>

显示：

<code>

<p>以下 HTML 元素: <code>span</code>, <code>section</code>, 和 <code>div</code> 用于定义部分文档内容。</p>

显示

总结：代码部分自动标红

<kbd>

<p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p>

显示:

<pre>

Text in a pre element

is displayed in a fixed-width

font, and it preserves

both spaces and

line breaks.

</pre>

</div>

显示：

总结：标签内的文本，以初始的结构显示在浏览器中

更多排版类

Bootstrap4 图像形状

圆角图片

.rounded 类可以让图片显示圆角效果：

<p>.rounded 类可以让图片显示圆角效果：</p>

</div>

.rounded-circle 类可以设置椭圆形图片:

.img-thumbnail 类用于设置图片缩略图(图片有边框):

图片对齐方式

使用 .float-right 类来设置图片右对齐，使用 .float-left 类设置图片左对齐:

响应式图片

图像有各种各样的尺寸，我们需要根据屏幕的大小自动适应。

我们可以通过在 <img> 标签中添加 .img-fluid 类来设置响应式图片。

.img-fluid 类设置了 max-width: 100%; 、 height: auto;

总结：class=img-fluid是包含了max-width: 100%; 、 height: auto;这两个属性，

不是要再添加这两个属性

Bootstrap4 导航

创建一个简单的水平导航栏，可以在 <ul> 元素上添加 .nav类，在每个 <li> 选项上添加 .nav-item 类，在每个链接上添加 .nav-link 类:

<p>简单的水平导航:</p>

</li>

</li>

</li>

<a class="nav-link disabled" href="#">Disabled</a>

</li>

</ul>

</div>

导航对齐方式

.justify-content-center 类设置导航居中显示， .justify-content-end 类设置导航右对齐

<p class="text-center">居中对齐导航:</p>

... ...

</ul>

<p class="text-center">右对齐导航:</p>

... ...

</ul>

垂直导航

.flex-column 类用于创建垂直导航：

... ...

</ul>

选项卡

使用 .nav-tabs 类可以将导航转化为选项卡。然后对于选中的选项使用 .active 类来标记。

<a class="nav-link active" href="#">Active</a>

</li>

... ...

<a class="nav-link disabled active " href="#">Disabled</a>

</li>

</ul>

胶囊导航

.nav-pills 类可以将导航项设置成胶囊形状。

<a class="nav-link active" href="#">Active</a>

</li>

... ...

总结：选项卡，胶囊，在父元素添加属性之后，子元素需要再用active指定添加的对象

导航等宽

.nav-justified 类可以设置导航项齐行等宽显示。

<a class="nav-link active" href="#">Active</a>

</li>

</li>

... ...

总结：在ul添加.nav-justified属性齐行等宽显示，是ui包含的所有li子元素的中占宽最大的一个，赋予其它子元素这个宽度，达到齐宽的效果。

胶囊下拉菜单

<a class="nav-link active dropdown-toggle" data-toggle="dropdown" href="#">Active</a>

</li>

<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>

</li>

总结：要为按钮添加下拉菜单，

首先要在目标元素上添加<x(标签） class="dropdown-toggle" data-toggle="dropdown">~</x>

然后<div class="dropdown-menu">/*这是下拉菜单*/

<a class="dropdown-item" href="#">Link 1</a>/*这是下拉菜单包含的内容*/

</div>

思考：在包裹盒子的按钮样式中dropdown添加不添加都可以为目标元素设置下拉选框，那么添加有什么意义？

动态选项卡

如果你要设置选项卡是动态可切换的，可以在每个链接上添加 data-toggle="tab" 属性。然后在每个选项对应的内容的上添加 .tab-pane 类。

如果你希望有淡入效果可以在 .tab-pane 后添加 .fade类:

<h2>选项卡切换</h2>

<br>

</li>

</li>

</li>

</ul>

总结：为需要切换的标签组中所有标签class=""中添加data-toggle="tab"（可以在添加过这个属性的标签之间，来回切换），active指定起始标签，可以设置多个，但是其标签文本，会被覆盖，只显示最前面的一个

思考：切换就是data-toggle="tab"改变了active指定（激活）对象，active可以在所有添加data-toggle="tab"标签中，来回切换

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

</div>

<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

</div>

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>

</div>

总结：用div id="~"来连接相对应的按钮激活文本,.tab-pane就是标签中data-toggle="tab"配套的后半部分,

思考:active(激活),active选着激活另一个按钮文本,即标签中选定的初始按钮没有显示对应文本,会在切换到含有active的文本的按钮时,才会显示,这时再次切换到初始按钮才会显示对应文本,

如果文本中没有active,那么文本无法激活,显示为内容不可见.

胶囊状动态选项卡只需要将动态选项卡的代码中 data-toggle 属性设置为 data-toggle="pill":

Bootstrap4 导航栏

导航栏一般放在页面的顶部。

使用 .navbar 类来创建一个标准的导航栏，后面紧跟: .navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。

导航栏上的选项可以使用 <ul> 元素并添加 class="navbar-nav" 类。然后在 <li> 元素上添加 .nav-item 类， <a> 元素上使用 .nav-link 类:

</li>

</li>

</li>

</ul>

</nav>

通过删除 .navbar-expand-xl|lg|md|sm 类来创建垂直导航栏:

收获:

1.学会用网格布局来写东西

2.互通,网格和导航的堆叠是相似的,一个学懂了,也就是换个属性显示,所以看东西要看懂,

才能为之后的学习提供帮助(让学到的东西相互连接起来)

明天计划:

继续任务8

返回列表

【任务7】 [上海|结业弟子]JS-赵朋 | 2019年10月06日 的日报 中品

评论

分享到

【任务7】 [上海|结业弟子]JS-赵朋 | 2019年10月06日的日报中品