微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Bootstrap导航条的使用和理解3

以下理论内容copy自Bootstrap中文网 (一个不错的bootstrap学习网站)

导航条

认样式的导航条

导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠(并且可开可关),且在视口(viewport)宽度增加时逐渐变为水平展开模式。

以下代码和注释是我学习过程中的理解

(注意 引入必要的.css 和 .js查看)

rush:xhtml;"> <Meta charset="utf-8"> <Meta http-equiv="X-UA-Compatible" content="IE=edge"> <Meta name="viewport" content="width=device-width,initial-scale=1"> Bootstrap 导航条模板

<nav class="navbar navbar-default">

<div class="container">

<div class="navbar-header">

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

更多

<a class="navbar-brand" href="#">Brand

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

<ul class="nav navbar-nav">
<li class="active"><a href="#">链接<span class="sr-only">(current)

  • <p class="navbar-text">文本内容

    <form class="navbar-form navbar-left" role="search">
    <div class="form-group">
    <input type="text" class="form-control" placeholder="请输入内容">

    <p class="navbar-text">正常文本<a href="#" class="navbar-link"> 非导航链接

    <script src="lib/jquery/jquery.js">
    <script src="lib/bootstrap/js/bootstrap.js">

    组件排列

    通过添加 链接、表单、按钮或文本对齐。两个类都会通过 CSS 设置特定方向的浮动样式。例如,要对齐导航链接,就要把它们放在个分开的、应用了工具类的

      标签里。

      这些类是 .pull-left 和 .pull-right 的 mixin 版本,但是他们被限定在了媒体查询(media query)中,这样可以更容易的在各种尺寸的屏幕上处理导航条组件。

      向右侧对齐多个组件 导航条目前不支持多个 .navbar-right 类。为了让内容之间有合适的空隙,我们为最后一个 .navbar-right 元素使用负边距(margin)。如果有多个元素使用这个类,它们的边距(margin)将不能按照你的预期正常展现。

      我们将在 v4 版本中重写这个组件时重新审视这个功能

      固定在顶部

      添加 .navbar-fixed-top 类可以让导航条固定在顶部,还可包含一个 .container 或 .container-fluid 容器,从而让导航条居中,并在两侧添加内补(padding)。

      需要为 body 元素设置内补(padding) 这个固定的导航条会遮住页面上的其它内容,除非你给 元素底部设置了 padding。用你自己的值,或用下面给出的代码都可以。提示:导航条的认高度是 50px。

      body { padding-top: 70px; }

      rush:xhtml;">

      固定在底部

      添加 .navbar-fixed-bottom 类可以让导航条固定在底部,并且还可以包含一个 .container 或 .container-fluid 容器,从而让导航条居中,并在两侧添加内补(padding)。

      需要为 body 元素设置内补(padding) 这个固定的导航条会遮住页面上的其它内容,除非你给 元素底部设置了 padding。用你自己的值,或用下面给出的代码都可以。提示:导航条的认高度是 50px。

      body { padding-bottom: 70px; }

      rush:xhtml;">

      静止在顶部

      通过添加 .navbar-static-top 类即可创建一个页面等宽度的导航条,它会随着页面向下滚动而消失。还可以包含一个 .container 或 .container-fluid 容器,用于将导航条居中对齐并在两侧添加内补(padding)。

      通过添加 .navbar-static-top 类即可创建一个页面等宽度的导航条,它会随着页面向下滚动而消失。还可以包含一个 .container 或 .container-fluid 容器,用于将导航条居中对齐并在两侧添加内补(padding)。to center and pad navbar content.

      rush:xhtml;">

      反色的导航条

      通过添加 .navbar-inverse 类可以改变导航条的外观。

      rush:xhtml;">

      如果大家还想深入学习,可以点击进行学习,再为大家附3个精彩的专题:

      插件使用教程

      以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

      版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

    相关推荐