这篇文章主要介绍了功能强大的 Bootstrap 组件,介绍 js 结合 Bootstrap 组件的使用方法,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
上两篇只讲了组件如何使用,基本没有说 js,这篇博客要结合 js 来讲讲
主要讲解一下几个组件
首先导入 CSS 和 js
- <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
- <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
- <script src="js/jquery-3.1.0.min.js">
- </script>
- <script src="js/bootstrap.min.js">
- </script>
1. 模态框
我们通常在登录注册,或者阅读某些条例时都是用这个模态框,所以模态框是非常常见的
首先写一个打开模态框的按钮
然后写模态框
- <div class="modal " id="myModal" role="dialog" aria-label="myModalLabel"
- aria-hidden="true">
- <!--这是小模态框,将modal-sm换成modal-lg是大模态框-->
- <div class="modal-dialog modal-sm">
- <div class="modal-content">
- <!--模态框头部-->
- <div class="modal-header">
- <!--右上角的关闭按钮-->
- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
- <span aria-hidden="true">
- ×
- </span>
- </button>
- <!--标题-->
- <div class="modal-title">
- Modal title
- </div>
- </div>
- <!--模态框内容-->
- <div class="modal-body">
- <!--模态框内容可以是文字或表格-->
- <!--<p>hello</p>-->
- <form>
- <div class="form-group">
- <label class="control-label">
- username
- </label>
- <input class="form-control" type="text">
- </div>
- <div class="form-group">
- <label class="control-label">
- password
- </label>
- <input class="form-control" type="password">
- </div>
- </form>
- </div>
- <!--模态框脚部-->
- <div class="modal-footer">
- <button type="button" class="btn btn-default" data-dismiss="modal">
- Close
- </button>
- <button type="button" class="btn btn-primary">
- 保存
- </button>
- </div>
- </div>
- </div>
- </div>
2. 滚动监听
然后写标签页
然后写内容
- <h2 id="iwen">
- @iwen
- </h2>
- <p>
- 这是一个人 这是一个人
- </p>
- <h2 id="ime">
- @ime
- </h2>
- <p>
- 这是一个人 这是一个人
- </p>
- <h2 id="one">
- @one
- </h2>
- <p>
- 这是一个人 这是一个人
- </p>
- <h2 id="two">
- @two
- </h2>
- <p>
- 这是一个人 这是一个人
- </p>
- <h2 id="three">
- @three
- </h2>
- <p>
- 这是一个人 这是一个人
- </p>
建议把内容写得长一点,这样效果才会更加明显,这里演示不方便写太多无用的文字
还可以写一些 js 的方法
点击不同的标签可以显示不同的内容
首先写标签栏
然后写不同标签的内容
- <div id="myTabContent" class="tab-content">
- <div class="tab-pane fade" id="home">
- <p>
- home
- </p>
- <div class="tab-pane fade" id="profile">
- <p>
- profile
- </p>
- <div class="tab-pane fade" id="one">
- <p>
- one
- </p>
- <div class="tab-pane fade" id="two">
- <p>
- two
- </p>
4. 工具提示
- <p>
- <!--若title内容为空则显示data-original-title的内容,placement为显示的位置,可设为top|bottom|left|right-->
- <!--参数可以以data-****的方式设置-->
- 欢迎来到
- <a data-animation="false" id="myTooltip" href="#" data-toggle="tooltip"
- title="title" data-placement="bottom" data-original-title="www.jk.com">
- jack's page
- </a>
- </p>
然后要用 js 初始化,否则会没有任何效果
// 初始化 tooltip,指向则显示
$('[data-toggle="tooltip"]').tooltip();
5. 弹出框
弹出框类似工具提示,但显示的内容比工具提示更加丰富,也比它常用
- <!--data-trigger="foucus"点击空白可消失,不加的话点击按钮消失,设为hover的话鼠标移动的按钮显示,移开消失-->
- <!--这个弹出框标题为title,内容为content-->
- <button type="button" class="btn btn-default js-popover" data-trigger="foucus" data-placement="bottom" data-toggle="popover" title="title" data-content="content">
- 弹出框
- </button>
然后要用 js 初始化
// 初始化 popover
$(".js-popover").popover();
6. 按钮
前 2 篇讲的是按钮的基本样式,这次是进阶使用,可以让按钮在加载时显示不同的文字
- <!--可以设置按钮在loading时的文字-->
- <button type="button" data-loading-text="Loding for 3s" class="btn btn-primary js-loading-btn">
- Loading Status
- </button>
然后要用 js 绑定点击事件
- // 绑定按钮的点击事件
- $(".js-loading-btn").on("click",
- function(e) {
- // 点击后设为loading状态,显示loading的文字
- var btn = $(this).button("loading");
- // 3s后恢复
- setTimeout(function(e) {
- btn.button("reset")
- },
- 3000)
- })
7. 堆叠
堆叠效果可以节省大量的屏幕控件,非常实用
这是点击按钮打开堆叠的
- <!--href为显示内容的id-->
- <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample">
- 点击查看
- </a>
- <div class="collapse" id="collapseExample">
- <div class="well">
- Hello
- </div>
- </div>
这是面板组的堆叠
- <div class="panel-group" id="accordion" role="tablist">
- <div class="panel panel-default">
- <div class="panel-heading" role="tab" id="headingOne">
- <!--显示的标题-->
- <h4 class="panel-title">
- <!--data-parent要是panel-group的id-->
- <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
- item1
- </a>
- </h4>
- </div>
- <!--加了in表示打开,不加表示隐藏-->
- <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel">
- <div class="panel-body">
- Hello
- <br>
- Hello
- <br>
- Hello
- <br>
- </div>
- </div>
- </div>
- <div class="panel panel-default">
- <div class="panel-heading" role="tab" id="headingTwo">
- <h4 class="panel-title">
- <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
- item1
- </a>
- </h4>
- </div>
- <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel">
- <div class="panel-body">
- Hello
- <br>
- Hello
- <br>
- Hello
- <br>
- </div>
- </div>
- </div>
- <div class="panel panel-default">
- <div class="panel-heading" role="tab" id="headingThree">
- <h4 class="panel-title">
- <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
- item1
- </a>
- </h4>
- </div>
- <div id="collapseThree" class="panel-collapse collapse" role="tabpanel">
- <div class="panel-body">
- Hello
- <br>
- Hello
- <br>
- Hello
- <br>
- </div>
- </div>
- </div>
- </div>
8. 轮换页
我们经常可以在网站的主页可以看到
- <div id="carousel-example-generic" class="carousel slide">
- <!--这是下面那三个白色圆indicator-->
- <ol class="carousel-indicators">
- <li data-target="#carousel-example-generic" data-slide-to="0" class="active">
- </li>
- <li data-target="#carousel-example-generic" data-slide-to="1">
- </li>
- <li data-target="#carousel-example-generic" data-slide-to="2">
- </li>
- </ol>
- <!--轮换页的内容-->
- <div class="carousel-inner">
- <div class="item active">
- <img src="images/4.jpg">
- <!--添加文字-->
- <div class="carousel-caption">
- <h3>
- U3D
- </h3>
- <p>
- 新版本升级
- </p>
- </div>
- </div>
- <div class="item ">
- <img src="images/2.jpg">
- <div class="carousel-caption">
- <h3>
- U3D
- </h3>
- <p>
- 新品上线
- </p>
- </div>
- </div>
- <div class="item ">
- <img src="images/3.jpg">
- <div class="carousel-caption">
- <h3>
- Apple
- </h3>
- <p>
- Apple手表
- </p>
- </div>
- </div>
- </div>
- <!--轮换页左边和右边的箭头-->
- <a class="left carousel-control" href="#carousel-example-generic" data-slide="prew">
- <span class="glyphicon glyphicon-chevron-left">
- </span>
- </a>
- <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
- <span class="glyphicon glyphicon-chevron-right">
- </span>
- </a>
- </div>
可以用 js 设置间隔和自动开始
- //设置间隔为2s且自动轮播
- $(".carousel").carousel({
- interval:2000
- })
9. 侧边栏
侧边栏的主要内容是一个列表
- <!--要设置宽度,在手机屏幕上隐藏-->
- <div class="col-md-3 col-sm-4 hidden-xs">
- <ul class="list-group affixed-element-top js-affixed-element-top">
- <a href="#" class="list-group-item">
- hello
- </a>
- <a href="#" class="list-group-item">
- hello
- </a>
- <a href="#" class="list-group-item">
- hello
- </a>
- <a href="#" class="list-group-item">
- hello
- </a>
- <a href="#" class="list-group-item">
- hello
- </a>
- <a href="#" class="list-group-item">
- hello
- </a>
- <a href="#" class="list-group-item">
- hello
- </a>
- <a href="#" class="list-group-item">
- hello
- </a>
- </ul>
- </div>
再写 style
- <style>
- .affixed-element-top.affix{
- /*如果想在底部的话可以改为bottom:10px;*/
- top:10px;
- }
- .affixed-element-top.affix-bottom{
- position: relative;
- }
- </style>
还要加一些 js
- $(".js-affixed-element-top").affix({
- offset:{
- }
- })
Boostrap 的基本用法就这样,掌握后就可以做出很好的网页了。
来源: http://www.phperz.com/article/17/0314/263842.html