• bootstrap 常用的导航组件


    .container  固定宽度,支持响应式(媒体查询)的容器,网页居中效果,且有15px的左右内边;

    .container-fluid  用于100%的宽度,占据全部视口的容器,自动实现响应式;

    .navbar  导航条,独立组件,有一个背景色、且导航条可以是纯链接、表单、表单和导航一起结合等多种形式;

      第一层    class中  navbar是必须的   其他的属性是可选的;

         .navbar-default  创建的是最基本的导航,不会固定在哪个位置  颜色是透明的;

         .navbar-inverse类  颜色变为黑色;

         .navbar-fixed-top  固定在顶部   .navbar-fixed-bottom固定在底部;

         .navbar-header:导航的头   比如说网站的logo   点击进去主页,或是网站的名称;

         .navbar-brand:写在a元素里,让文本看起来更大一号,并且确保无论是宽屏还是窄屏;

         .navbar-nav:导航条中的导航元素;

      .nav  导航元素  基本组件,通常以一个带有 class  .nav的无序列表开始,并且写在nav里,默认选择某个用.active;

        .navbar-btn:导航条中的按钮;

        .navbar-text:文本;

        .navbar-link:链接;

        .navbar-right和.navbar-left将其定位在导航条的左右位置;

      .collapse:折叠,设置div元素为视口大于768px时显示;折叠的内容必须包裹在带有class  .collapse、.navbar-collapse的<div>中;

        .data-toggle:告诉JavaScript需要对按钮做什么;

        .data-target:指示要切换到哪一个元素;

        .collapse-in:默认显示内容;

        三个带有  class  .icon-bar  的<span>创建所谓的汉堡按钮,这些会切换为 .nav-collapse <div>中的元素;

        sr-only:(仅供)屏幕阅读器,这个class 主要用于增强accessbility(可访问性)是为了关爱残障人士,但又不会展示出来;

  • 相关阅读:
    团队事后分析
    Gamma阶段发布说明
    Gamma阶段 测试报告
    【Gamma阶段】第十次Scrum Meeting
    【Gamma阶段】第九次Scrum Meeting
    【Gamma阶段】第八次Scrum Meeting
    Gamma展示
    【Gamma阶段】第七次Scrum Meeting
    【Gamma阶段】第六次Scrum Meeting
    【Gamma阶段】第五次Scrum Meeting
  • 原文地址:https://www.cnblogs.com/chengshun/p/7522318.html
Copyright © 2020-2023  润新知