bootstrap几个布局组件

最新推荐文章于 2025-03-20 14:17:49 发布

都说没想好

最新推荐文章于 2025-03-20 14:17:49 发布

阅读量834

点赞数

分类专栏： web前端（慕课网教程操作+笔记）

本文链接：https://blog.youkuaiyun.com/u013045370/article/details/85989320

版权

web前端（慕课网教程操作+笔记）专栏收录该内容

35 篇文章

订阅专栏

本文介绍了Bootstrap中几个关键的布局组件和数据API的使用。讲解了data-toggle和data-target如何配合实现汉堡菜单功能，以及如何创建动画进度条。此外，详细阐述了Bootstrap模态框（Modal）的引用、使用方法和相关触发事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一，data-toggle和data-target的使用

data-toggle和data-target配合使用，表示，data-target指定部分以data-toggle的方式存在

比如汉堡包模型点击出来后是几个li

首先写nav栏，定义一个button和一个a标签，放在class为navbar-header的div里面。

</div>

其中a标签是“菜鸟教程”的点击，可以返回首页等链接操作。

button里面定义了class为navbar-toogle，设置了data-toggle和data-target，因为要做汉堡包，设置了三个icon-bar的span

<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>

这里制定了data-target是一个id为example-navbar-collapse的内容，用collapse形式存在。

也就是，我们要定义，展开出来是什么东西，因此下面是这部分具体内容：

<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>

其中第三个还有下拉菜单，相应的li的class设置为dropdown

其中包含了很多其他组件，比如dropdown对应的dropdown-menu，分离的链接divider，这里不展开。

完整实例：

<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>

二，动画进度条

创建一个条纹动画的进度条的步骤如下：

添加一个带有 class .progress 和 .progress-striped 的 <div>。同时添加 class .active（动态）
接着，在上面的 <div> 内，添加一个带有 class .progress-bar 的空的 <div>。
添加一个带有百分比表示的宽度的 style 属性，例如 style="40%"; 表示进度条在 40% 的位置。

<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-success" role="progressbar"
         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
         style="width: 40%;">
        <span class="sr-only">40% 完成</span>
    </div>
</div>

三，Bootstrap 数据 API（Bootstrap Data API）

1，Bootstrap模态框（Model）插件

模态框，覆盖在父窗体上的子窗体

引用方式：

（1）引用单独功能，引用modal.js

（2）引用bootstap.js 或者 bootstrap.min.js

使用方法：

（1）在按钮或者链接上设置属性： data-toggle="modal"

（2）同时设置 data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框（带有 id="identifier"）

（3）采用一行js代码如下，完成动画弹框操作：

$('#identifier').modal(options)

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
	开始演示模态框
</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel">
					模态框（Modal）标题
				</h4>
			</div>
			<div class="modal-body">
				在这里添加一些文本
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭
				</button>
				<button type="button" class="btn btn-primary">
					提交更改
				</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>

http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html

模态框用到的事件，可在函数中国呢当钩子使用：

1.show.bs.modal,在调用show后触发：

$('#identifier').on('show.bs.modal', function () {
  // 执行一些动作...
})

2.shown.bs.modal,当css过渡效果完成，用户可见时触发：

$('#identifier').on('shown.bs.modal', function () {
  // 执行一些动作...
})

3.hide.bs.modal,调用hide时触发：

$('#identifier').on('hide.bs.modal', function () {
  // 执行一些动作...
})

4.hidden.bs.modal,完成隐藏时触发：

$('#identifier').on('hidden.bs.modal', function () {
  // 执行一些动作...
})