Bootstrap学习

最新推荐文章于 2022-11-03 16:32:58 发布

liudaohonglk

最新推荐文章于 2022-11-03 16:32:58 发布

阅读量450

点赞数

分类专栏： bootstrap 文章标签： bootstrap

本文链接：https://blog.csdn.net/liudaohonglk/article/details/78156441

版权

bootstrap 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Bootstrap第四章

本章学习要点：

Bootstrap字体图标
Bootstrap下拉菜单
Bootstrap按钮组
Bootstrap 输入框组
Bootstrap 导航元素
Bootstrap 导航栏

Bootstrap字体图标

1.用法
如需使用图标，只需要简单地使用下面的代码即可。请在图标和文本之间保留适当的空间。

<span class="glyphicon glyphicon-search"></span>

根据glyphicon-search不同，选择的图标也不同

2.定制字体图标
我们已经看到如何使用字体图标，接下来我们看看如何定制字体图标。
我们将以上面的实例开始，并通过改变字体尺寸、颜色和应用文本阴影来进行定制图标。

定制字体尺寸
通过增加或减少图标的字体尺寸，您可以让图标看起来更大或更小。

<button type="button" class="btn btn-primary btn-lg" style="font-size: 60px">
  <span class="glyphicon glyphicon-user"></span> User
</button>

添加style=”font-size: 60px”

定制字体颜色

<button type="button" class="btn btn-primary btn-lg" style="color: rgb(212, 106, 64);">
  <span class="glyphicon glyphicon-user"></span> User
</button>

应用文本阴影

<button type="button" class="btn btn-primary btn-lg" style="text-shadow: black 5px 3px 3px;">
  <span class="glyphicon glyphicon-user"></span> User
</button>

图标列表可查看http://www.runoob.com/try/demo_source/bootstrap3-glyph-icons.htm

Bootstrap下拉菜单

1.Bootstrap 下拉菜单（Dropdown）插件

<script>
$(function() {
    $(".dropdown-toggle").dropdown('toggle');
});
</script>

可以使用以上代码，默认显示下拉菜单的内容

2.dropdown-toggle的作用是按钮右侧的圆角。去掉dropdown-toggle，你会发现UL的右侧变成了直角，而且，按钮宽度变宽了。
3.data-toggle=”dropdown”是用来切换下拉菜单
4.使用下拉菜单，只需要在 class .dropdown 内加上下拉菜单即可。下面的实例演示了基本的下拉菜单：

<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">Java</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
        </li>
        <li role="presentation" class="divider"></li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
        </li>
    </ul>
</div>

5.class=dropdown-menu是下拉菜单的内容样式，class=”caret”是下拉三角形图形
6.其他样式
这里写图片描述

Bootstrap按钮组

1. 这里写图片描述

2.Bootstrap 按钮（Button）插件
a.按钮动作
单个切换
如需激活单个按钮的切换（即改变按钮的正常状态为按压状态，反之亦然），只需向 button 元素添加 data-toggle=”button” 作为其属性即可

复选框（Checkbox）
您可以创建复选框组，并通过向 btn-group 添加 data 属性 data-toggle=”buttons” 来添加复选框组的切换。

单选按钮（Radio）
类似地，您可以创建单选按钮组，并通过向 btn-group 添加 data 属性 data-toggle=”buttons” 来添加单选按钮组的切换。

b.通过 JavaScript 启用按钮（Button）插件
这里写图片描述

<h2>点击每个按钮查看方法效果</h2>
<h4>演示 .button('toggle') 方法</h4>
<div id="myButtons1" class="bs-example">
    <button type="button" class="btn btn-primary">原始</button>
</div>

<h4>演示 .button('loading') 方法</h4>
<div id="myButtons2" class="bs-example">
    <button type="button" class="btn btn-primary" 
        data-loading-text="Loading...">原始
    </button>
</div>

<h4>演示 .button('reset') 方法</h4>
<div id="myButtons3" class="bs-example">
    <button type="button" class="btn btn-primary" 
        data-loading-text="Loading...">原始
    </button>
</div>

<h4>演示 .button(string) 方法</h4>
<button type="button" class="btn btn-primary" id="myButton4" 
    data-complete-text="Loading finished">请点击我
</button>
<script>
$(function () {
        $("#myButtons1 .btn").click(function(){
            $(this).button('toggle');
        });
    });
    $(function() { 
        $("#myButtons2 .btn").click(function(){
            $(this).button('loading').delay(1000).queue(function() {
            });        
        });
    });   
    $(function() { 
        $("#myButtons3 .btn").click(function(){
            $(this).button('loading').delay(1000).queue(function() {
                $(this).button('reset');
            });        
        });
    });  
   $(function() { 
        $("#myButton4").click(function(){
            $(this).button('loading').delay(1000).queue(function() {
                $(this).button('complete');
            });        
        });
    });

Bootstrap 输入框组

1.向 .form-control 添加前缀或后缀元素的步骤如下：
把前缀或后缀元素放在一个带有 class .input-group 的 <div> 中。
接着，在相同的 <div> 内，在 class 为 .input-group-addon 的 <span> 内放置额外的内容。
把该 <span> 放置在 <input> 元素的前面或者后面。

2.
如果前缀或者后缀元素是普通文字或者复选框，单选框

    <span class="input-group-addon">@</span>
    <span class="input-group-addon"> <input type="checkbox"></span>
    <span class="input-group-addon"> <input type="radio"></span>

如果是按钮或者下拉菜单

  <span class="input-group-btn">
                        <button class="btn btn-default" type="button">Go!</button>
  </span>
    <div class="input-group-btn">
                        <button type="button" class="btn btn-default 
                        dropdown-toggle" data-toggle="dropdown">下拉菜单
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="#">功能</a>
                            </li>
                            <li>
                                <a href="#">另一个功能</a>
                            </li>
                            <li>
                                <a href="#">其他</a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="#">分离的链接</a>
                            </li>
                        </ul>
                    </div><!-- /btn-group -->

Bootstrap 导航元素

这里写图片描述

1.disabled只是改变样式，链接功能还是可以正常使用，如果需要禁用则需另写脚本
2.tab-comtent和tab-pane的使用

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 标签页与胶囊式标签页</title>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>动态标签</h2>
  <p><strong>提示:</strong> 与 .tab-pane 和 data-toggle="tab" (data-toggle="pill" ) 一同使用, 设置标签页对应的内容随标签的切换而更改。</p>
  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home">首页</a></li>
    <li><a data-toggle="tab" href="#menu1">菜单 1</a></li>
    <li><a data-toggle="tab" href="#menu2">菜单 2</a></li>
    <li><a data-toggle="tab" href="#menu3">菜单 3</a></li>
  </ul>

  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <h3>首页</h3>
      <p>菜鸟教程 —— 学的不仅是技术，更是梦想！！！</p>
    </div>
    <div id="menu1" class="tab-pane fade">
      <h3>菜单 1</h3>
      <p>这是菜单 1 显示的内容。这是菜单 1 显示的内容。这是菜单 1 显示的内容。</p>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>菜单 2</h3>
      <p>这是菜单 2 显示的内容。这是菜单 2 显示的内容。这是菜单 2 显示的内容。</p>
    </div>
    <div id="menu3" class="tab-pane fade">
      <h3>菜单 3</h3>
      <p>这是菜单 3 显示的内容。这是菜单 3 显示的内容。这是菜单 3 显示的内容。</p>
    </div>
  </div>
</div>

</body>
</html>

Bootstrap 导航栏

1.默认的导航栏
.container 类用于固定宽度并支持响应式布局的容器。

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">菜鸟教程</a>
    </div>
    <div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">iOS</a></li>
            <li><a href="#">SVN</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    Java
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">jmeter</a></li>
                    <li><a href="#">EJB</a></li>
                    <li><a href="#">Jasper Report</a></li>
                    <li class="divider"></li>
                    <li><a href="#">分离的链接</a></li>
                    <li class="divider"></li>
                    <li><a href="#">另一个分离的链接</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </div>
</nav>

2.响应式的导航栏
为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有 class .collapse、.navbar-collapse 的 <div> 中。折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮。第一个是 data-toggle，用于告诉 JavaScript 需要对按钮做什么，第二个是 data-target，指示要切换到哪一个元素。三个带有 class .icon-bar 的 <span> 创建所谓的汉堡按钮。这些会切换为 .nav-collapse <div> 中的元素。为了实现以上这些功能，您必须包含 Bootstrap 折叠（Collapse）插件。
下面的实例演示了这点：

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse"
                data-target="#example-navbar-collapse">
            <span class="sr-only">切换导航</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">菜鸟教程</a>
    </div>
    <div class="collapse navbar-collapse" id="example-navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">iOS</a></li>
            <li><a href="#">SVN</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    Java <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">jmeter</a></li>
                    <li><a href="#">EJB</a></li>
                    <li><a href="#">Jasper Report</a></li>
                    <li class="divider"></li>
                    <li><a href="#">分离的链接</a></li>
                    <li class="divider"></li>
                    <li><a href="#">另一个分离的链接</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </div>
</nav>

3.导航栏中的表单
导航栏中的表单不是使用 Bootstrap 表单章节中所讲到的默认的 class，它是使用 .navbar-form class。这确保了表单适当的垂直对齐和在较窄的视口中折叠的行为。使用对齐方式选项（这将在组件对齐方式部分进行详细讲解）来决定导航栏中的内容放置在哪里。
下面的实例演示了这点

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid"> 
    <div class="navbar-header">
        <a class="navbar-brand" href="#">菜鸟教程</a>
    </div>
    <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">提交</button>
    </form>
    </div>
</nav>

4.导航栏中的按钮
您可以使用 class .navbar-btn 向不在 <form> 中的 <button> 元素添加按钮，按钮在导航栏上垂直居中。.navbar-btn 可被使用在 <a> 和 <input> 元素上。

5.导航栏中的文本
如果需要在导航中包含文本字符串，请使用 class .navbar-text。这通常与 <p> 标签一起使用，确保适当的前导和颜色。

6.结合图标的导航链接
如果您想在常规的导航栏导航组件内使用图标，那么请使用 class glyphicon glyphicon-* 来设置图标，更多请查看 Bootstrap 图标，如下面的实例所示：

<nav class="navbar navbar-default" role="navigation"> 
    <div class="container-fluid"> 
        <div class="navbar-header"> 
            <a class="navbar-brand" href="#">菜鸟教程</a> 
        </div> 
        <ul class="nav navbar-nav navbar-right"> 
            <li><a href="#"><span class="glyphicon glyphicon-user"></span> 注册</a></li> 
            <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 登录</a></li> 
        </ul> 
    </div> 
</nav>

7.组件对齐方式
您可以使用实用工具 class .navbar-left 或 .navbar-right 向左或向右对齐导航栏中的导航链接、表单、按钮或文本这些组件。这两个 class 都会在指定的方向上添加 CSS 浮动。

8.固定到顶部
Bootstrap 导航栏可以动态定位。默认情况下，它是块级元素，它是基于在 HTML 中放置的位置定位的。通过一些帮助器类，您可以把它放置在页面的顶部或者底部，或者您可以让它成为随着页面一起滚动的静态导航栏。
如果您想要让导航栏固定在页面的顶部，请向 .navbar class 添加 class .navbar-fixed-top。

9.固定到底部
如果您想要让导航栏固定在页面的底部，请向 .navbar class 添加 class .navbar-fixed-bottom。

10.静态的顶部
如需创建能随着页面一起滚动的导航栏，请添加 .navbar-static-top class。该 class 不要求向添加内边距（padding）。

11.反色的导航栏
为了创建一个带有黑色背景白色文本的反色的导航栏，只需要简单地向 .navbar class 添加 .navbar-inverse class 即可

liudaohonglk

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap学习

Bootstrap第四章本章学习要点：Bootstrap字体图标Bootstrap下拉菜单Bootstrap按钮组Bootstrap 输入框组Bootstrap 导航元素Bootstrap 导航栏Bootstrap字体图标1.用法如需使用图标，只需要简单地使用下面的代码即可。请在图标和文本之间保留适当的空间。<span class="glyphicon glyphicon-sear
复制链接

扫一扫