zoukankan      html  css  js  c++  java
  • 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(可访问性)是为了关爱残障人士,但又不会展示出来;

  • 相关阅读:
    16日彻底去除安卓应用的内置广告
    配台600元的主机套装 自己组装 全新
    带记录功能的计算器
    华为8812 进入工程模式 和打电话黑屏问题
    买平板 四核 500~600左右对比
    querySelector()方法
    Javascript实例教程:querySelector()方法接受一个CSS查询并返回匹配模式的第一个子孙元素,如果没有匹配的元素则返回null。
    Android实用代码七段(二)
    Android实用代码七段(三)
    Firebug入门指南
  • 原文地址:https://www.cnblogs.com/chengshun/p/7522318.html
Copyright © 2011-2022 走看看