【博学谷学习记录】超强总结，用心分享| bootstrap组件插件-CSDN博客

本文链接：https://blog.csdn.net/duanxiangning/article/details/128516304

大家好，今天来给大家分享关于bootstrap组件插件的基础知识，希望大家能有所收获。

bootstrap组件

Bootstrap是 Twitter 公司设计的基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发框架，他依靠jQuery实现，且支持响应式

布局，使得 Web 开发更加方便快捷。

凡是在软件开发中用到了软件的复用，被复用的部分都可以称为组件，凡是在应用程序中已经预留接口的组件就是插件**。Bootstrap组件使

用非常方便: 1.引入bootstrap相关css和js 2.去官网复制html

代码演示

1. 引入bootstrap相关css和js
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>

2. 去官网复制html的功能模块
<div class="container">

<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
       Action <span class="caret"></span>
       </button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
    </div>
   </div>

bootstrap插件（JS）

bootstrap中的js插件其实也是组件的一部分，只不过是需要js调用功能的组件，所以一般bootstrap的js插件一般会伴随着js代码（有的也可以省略js，用属性实现）。

步骤： 1.引入bootstrap相关css和js 2.去官网复制html 3.复制js代码，启动js插件。

代码演示

2. 去官网复制html的功能模块


<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
里面就是模态框
</div>
</div>
</div>

3. 复制js代码，启动js插件。
<script>
   // 当我们点击了自己定义的按钮，就弹出模态框
   $(".myBtn").on("click", function() {
       // alert(11);
       $('#btn').modal()
   })
</script>