bootstrap之navbar

最新推荐文章于 2024-10-11 09:00:00 发布

天为我蓝

最新推荐文章于 2024-10-11 09:00:00 发布

阅读量653

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/ZhangZiYangDeBoKe/p/10929156.html

本文详细介绍了Bootstrap的navbar组件，包括container、container-fluid、navbar的各类属性和样式，如navbar-default、navbar-inverse、navbar-toggle等。同时，讨论了如何处理元素对齐、折叠效果，以及navbar中的form、btn、text和link的样式。通过实例展示了如何创建和定制导航条，以适应不同屏幕尺寸和视觉需求。

container：固定960px宽度，（如果又引入了响应式样式，则会适当调整，例如1600*900，它会显示1200px）

container-fluid:自适应屏幕宽度，即满屏显示。

row和col可以参考一下：https://blog.csdn.net/yzy85/article/details/53021385?locationNum=2&fps=1和http://v3.bootcss.com/css/

尤其http://v3.bootcss.com/css/讲的特别清楚哦

例如：

使用单一的一组 .col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” .row 内。

.navbar——设置nav元素为导航条组件；

.navbar-default——指定导航条组件为默认主题；

.navbar-inverse——指定导航条组件为黑色主题；

.navbar-fixed-top——设置导航条组件固定在顶部；

.navbar-fixed-bottom——设置导航条组件固定在底部；

.container-fluid——设置宽度充满父元素，即为100%；

.navbar-header——主要指定div元素为导航条组件包裹品牌图标及切换按钮；

.navbar-toggle——设置button元素为导航条组件的切换钮；

.collapsed——设置button元素为在视口小于768px时才显示；

.navbar-brand——设置导航条组件内的品牌图标；

navbar-brand默认是放文字的,也可以放图片，但必须是小图片,如果图片太大，位置就会靠下.

例子：

<head>

<link rel="stylesheet" href="{
  
  { url_for('static', filename='bootstrap/css/bootstrap.min.css') }}">
<link rel="stylesheet" href="{
  
  { url_for('static', filename='bootstrap/css/bootstrap.css') }}">

</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <!--小屏幕导航按钮和logo-->
        <div class="navbar-header">
            <a href="" class="navbar-brand" style="width:250px;">
                <img src="{
  
  { url_for('static', filename='base/images/logo.png') }}" style="height:30px;">&nbsp;STEM教育
            </a>
        </div>
    </div>
</nav>
</body>
代码执行时，样式是这样的：