看书自学Bootstrap第二天

Bootstrap组件设计

下拉菜单要在<a></a>中加入class=“dropdown-toggle” data-toggle=“dropdown”

<div class="btn-group">
        <!--将btn-default改成btn-link可以让其变为一个文字式的下拉菜单-->
        <button type="button" class="btn btn-link dropdown-toggle" data-toggle="dropdown">
                下拉菜单
                <!--这是下拉菜单的旁边的小三角形-->
                <span class="caret"></span>
            </button>
        <!--这里在class中的dropdown-menu再加入label-warning等属性可以改变下拉菜单的背景色-->
        <ul class="dropdown-menu" role="menu">
            <li>
                <!--这里的span中的class中的text-info是为了让下拉菜单里面的链接的颜色从黑色变成更像超级链接的蓝色-->
                <a href="#"><span class="text-info">项目一</span></a>
            </li>
            <li>
                <a href="#"><span class="text-info">项目二</span></a>
            </li>
        </ul>
    </div>

问题1:

子下拉菜单显示不出来,未解决.

按钮

通过.btn-toolbar定义一个工具条按钮组
一个按钮组要用过.btn-group定义
按钮中要添加.dropdown-toggle

导航

响应式的导航栏
为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有 class .collapse、.navbar-collapse 的

中。折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮。第一个是 data-toggle，用于告诉 JavaScript 需要对按钮做什么，第二个是 data-target，指示要切换到哪一个元素。三个带有 class .icon-bar 的 创建所谓的汉堡按钮。这些会切换为 .nav-collapse

中的元素。

<nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <!-- 导航前要是.navbar-header -->
            <!-- 头部要单独一个<div> -->
            <div class="navbar-header">
                <!-- data-target=""  与下面id 对应     前面要加#   加.没反应 -->
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-responsive-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                <a class="navbar-brand" href="#">响应式导航条</a>
            </div>
            <!-- 菜单部分 -->
            <!-- id与上面data-target对应 -->
            <!-- 要折叠的内容必须包裹在带有 class .collapse、.navbar-collapse 的 <div> 中 -->
            <div class=" collapse navbar-collapse" id="navbar-responsive-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">首页</a></li>
                    <li><a href="#">导航条</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉导航栏<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">财经</a></li>
                            <li><a href="#">体育</a></li>
                            <li class="divider"></li>
                            <li class="nav-header"><a href="#">新闻</a></li>
                            <li><a href="#">论坛</a></li>
                        </ul>
                    </li>
                </ul>
                <!-- 表单部分 -->
                <!-- 导航栏中的表单不是使用 Bootstrap 表单 中所讲到的默认的 class，
                    它是使用 .navbar-form class。
                    这确保了表单适当的垂直对齐和在较窄的视口中折叠的行为。
                    使用对齐方式选项来决定导航栏中的内容放置在哪里。 -->
                <form class="navbar-form navbar-left" role="search">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                    <!-- 您可以使用 class .navbar-btn 向不在 <form> 中的 <button> 元素添加按钮，按钮在导航栏上垂直居中。
                        .navbar-btn 可被使用在 <a> 和 <input> 元素上。
                        不要在 .navbar-nav 内的 <a> 元素上使用 .navbar-btn，
                        因为它不是标准的 button class。 -->
                    <button type="submit" class="btn btn-default">提交</button>
                </form>
            </div>
        </div>

    </nav>

固定到顶部
Bootstrap 导航栏可以动态定位。默认情况下，它是块级元素，它是基于在 HTML 中放置的位置定位的。通过一些帮助器类，您可以把它放置在页面的顶部或者底部，或者您可以让它成为随着页面一起滚动的静态导航栏。
如果您想要让导航栏固定在页面的顶部，请向 .navbar class 添加 class .navbar-fixed-top。
为了防止导航栏与页面主体中的其他内容的顶部相交错，请向 标签添加至少 50 像素的内边距（padding），内边距的值可以根据您的需要进行设置。
固定到底部
如果您想要让导航栏固定在页面的底部，请向 .navbar class 添加 class .navbar-fixed-bottom。
静态的顶部
如需创建能随着页面一起滚动的导航栏，请添加 .navbar-static-top class。该 class 不要求向 添加内边距（padding）

进度条

<div class="container">
        <div class="progress">
            <!-- 进度条要用.progress-bar   书上是.bar 不显示进度条 -->
            <div class="progress-bar" style="width:80%;"></div>
        </div>
    </div>

    <div class="container">
        <!-- 添加.active  实现动画式进度条 -->
        <div class="progress progress-striped active">
            <div class="progress-bar" style="width:50%;"></div>
        </div>
    </div>

    <div class="container">
        <div class="progress">
            <div class="progress-bar progress-bar-success" style="width:50%;"></div>
            <div class="progress-bar progress-bar-warning" style="width:25%;"></div>
            <div class="progress-bar progress-bar-danger" style="width:15%;"></div>
        </div>
    </div>