发表于: 2020-04-01 22:55:29

1 1492


一,今天的学习

继续学习了bootstrap的布局使用,

重点学习了它的一部分组件,

          第一个按钮组 :

一系列按钮与.btn.btn-group

使用我们的按钮插件添加可选的JavaScript单选

和复选框样式行为为了使辅助技术(例如屏幕阅读器)

传达一系列按钮已分组的信息,role需要提供

当的属性。对于按钮组,role="group"

而工具栏应具有role="toolbar"

           第二个导航栏:

  • 导航栏需要包装.navbar.navbar-expand{-sm|-md|-lg|-xl}用于响应性折叠和配色方案类。
  • 导航栏及其内容默认情况下是流畅的。使用可选容器限制其水平宽度。
  • 使用我们的间隔柔性的实用工具类,用于控制导航栏内间隔和对齐。
  • 导航栏默认情况下是响应式的,但是您可以轻松地对其进行修改以进行更改。响应行为取决于我们的Collapse JavaScript插件。
  • 打印时,导航栏默认为隐藏。迫使他们通过添加打印.d-print.navbar请参阅显示实用程序类。
  • 通过使用<nav>元素来确保可访问性,或者如果使用更通用的元素(例如使用)来确保可访问性,则向每个导航栏<div>添加a,role="navigation"以将其明确标识为辅助技术用户的界标区域。
  • Navbars内置了对少数子组件的支持。根据需要从以下选项中进行选择:

    • .navbar-brand 您公司,产品或项目的名称。
    • .navbar-nav 全高和轻量级导航(包括对下拉菜单的支持)。
    • .navbar-toggler与我们的崩溃插件和其他导航切换行为配合使用。
    • .form-inline 用于任何形式的控件和动作。
    • .navbar-text 用于添加垂直居中的文本字符串。
    • .collapse.navbar-collapse 用于通过父断点分组和隐藏导航栏内容。
    •          第三个格网布局的一小部分:
    • 使用flexbox对齐工具可垂直和水平对齐列。当flex容器具有min-height如下所示的内容时,Internet Explorer 10-11不支持flex项的垂直对齐
    • 水平对齐
    •  class="row justify-content-start"
    • class="row justify-content-center"
    •   .................
    • 垂直对齐
    •  class="row align-items-start"
      class="row align-items-center"
        .................
    • 二,明天学习轮播图和做一些练习。

返回列表 返回列表
评论

    分享到