发表于: 2018-09-10 22:13:23
1 779
今天完成的事情:做了个媒体查询。以前只看,没具体用过。没有达到自己想要的效果。在修改。
然后就是看了一下img圆圈。框架会用了 就差修改样式了。
明天计划的事情:做完任务八九的第一个页面,在修改。
遇到的问题:
收获:
图像形状:
可以在<img> 标签中添加
.rounded 类可以让图片显示圆角效果
.rounded-circle 类可以设置椭圆形图片(会切割图片的四角)
.img-thumbnail 类用于设置图片缩略图(图片有边框)
使用 .float-right 类来设置图片右对齐,使用 .float-left 类设置图片左对齐
.img-fluid 类来设置响应式图片:
.img-fluid 类设置了 max-width: 100%; 、 height: auto;
导航栏:
可以使用.navbar类来创建一个标准的导航栏。通过.navbar-expand-xl|lg|md|sm 设置不同屏幕可以平铺显示(不设置时,默认垂直显示)
导航栏上的选项可以使用 <ul> 元素并添加
然后在 <li> 元素上添加 .nav-item 类,
<a> 元素上使用 .nav-link 类;
可以直接使用.justify-content-end .justify-content-center来让导航居中右对齐。
在bootstrap4下
垂直居中的几种方法:
1 - 使用自动边距的垂直中心:
垂直居中的另一种方法是使用my-auto 。 这会将元素置于其容器内。 例如, h-100使行全高, my-auto将垂直居中col-sm-12列。
my-auto表示垂直y轴的边距,相当于:
margin-top: auto;
margin-bottom: auto;
由于Bootstrap 4 .row是display:flex
可以简单地使用任意列上的align-self-center垂直居中
评论