发表于： 2018-08-30 23:12:49
1 712
- 今天完成的事情：开始任务八九基础知识的学习。看一下bootstrap3 和 4的一些东西。理解能力不太好。学起来有点吃力。
明天计划的事情：开始任务八九头部还有导航栏的制作。
遇到的问题：bootstrap这个框架，一些组件和公共样式没有摸清楚 。组件只看到了居中的 .container和导航栏的.navbar 公共样式还没看完。需要用才能看出效果。- hidden、visible这两个都是隐藏 但是主要功能还有效果都还没理解透。
收获：- 1.栅格系统：Bootstrap包含了一个强大的移动优先的网格系统，它是基于一个12列的布局、有5种响应尺寸(对应不同的屏幕)，支持Sass mixins自由调用，并结合自己预定义的CSS、Js类，用来创建各种形状和尺寸的布局。
- .col- 针对所有设备
- .col-sm- 平板 - 屏幕宽度等于或大于 576px
- .col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)
- .col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)
- .col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)
栅格系统提供了集中内容居中、水平填充网页内容的方法
.container实现固定的宽度并居中呈现，.container-fluid实现全宽度，并和其它网格实现对齐
- 行(
.row)是列(.col-*)的横向组合和父容器(它们有效组织在.row下)，每列都有水平的padding值，用于控制它们之间的间隔，同时在负边距的行上抵消，从而实现列中的所有内容在视觉上是左侧对齐的体验。 - 栅格断点的媒体查询基于宽度的最小值，意味着它们应用到某一等级以及这一等级之上的所有（如
.col-sm-4的的定义可以在小型、中型、宽、超宽设备上呈现，但不适用于能在超小型.col-sx上呈现）。
2.导航栏
- 导航栏需要使用.navbar 来定义，并使用 .navbar-expand{-sm|-md|-lg|-xl} 用于响应式布局以及使用配色方案Class 。
品牌logo
.navbar-brand 可以用于大多数元素，但对于链接最有效，因为某些元素可能需要通用样式类别class或自定义样式。
您还可以在导航栏中使用下拉列表，下拉菜单最好使用一个菜单进行位置定位包裹，请确保使用单独的元素嵌套
.nav-item和.nav-link，如下所示。
可以使用.navbar-text选择器来包裹文字-这已经对文本字符串的垂直对齐、水平间距作了处理优化。
基于主题类class和background-color通用样式class定义，导航栏的配色方案和主题选择从未如此简单！你可以选择.navbar-light 来定义导航颜色反转（强黑白对比），也可以使用.navbar-dark用于深色背景定义，然后再引用.bg-*类通用定义来进行大小处理。
使用系统提供的position位置间距定位通用样式可以使导航栏呈现出随浏览器滚动的效果（非固定位置），可选的流动可以包括固定在顶部、固定在底部、或粘到顶部（与页面滚动，直到顶部并停留到那里）。固定导航栏可以使用position: fixed属性，这意味着它们从DOM的正常流动和拉动可能需要自定义的CSS(如在 <body>上定义padding-top)，以防止其重叠覆盖了其它元素。
返回列表
评论