模态窗体

会有个慢慢出来的效果，注意data-toggle是指切换方式，值为modal就代表是以模态窗口的样式切换。data-target是切换的目标。然后modal fade就是一个有动画的模态窗口。如果想直接弹出无动画，就把fade去掉就行。

无论是否有动画的模态窗口，弹出之后点击周围的空白就会让窗口消失，如果需要点空白窗口不消失，只需要在最外层div设置个data-backdrop="static" 属性就行。

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#Mymodal">点击弹出（有动画）</button>
<div class="modal fade" id="Mymodal" role="dialog" tabindex="-1" aria-labelledby="myModalLabel"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" data-dismiss="modal" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button><h4 class="modal-title">提问</h4></div><div class="modal-body"><p>问题描述</p><textarea class="form-control"></textarea></div><div class="modal-footer"><button data-dismiss="modal" class="btn btn-default" type="button">关闭</button><button type="button" class="btn btn-primary">提交</button></div></div></div>
</div>

例子中是用data-target实现点击切换操作的，也可以通过设置id，利用JavaScript来实现切换操作。

<script>
$(function(){$("#open").click(function(){$("#myModal").modal('show');});$("#submit").click(function(){alert("信息已经提交");$("#myModal").modal('hide');});$("#toggle").click(function(){$("#myModal").modal('toggle');});
});
</script><button  class="btn btn-default" id="open"> 打开模态窗口</button>
<button class="btn btn-default"  id="close"> 关闭模态窗口</button>
<button class="btn btn-default"  id="toggle"> 切换模态窗口</button><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button><h4 class="modal-title">提问</h4></div><div class="modal-body"><p>问题描述</p><textarea class="form-control"></textarea></div><div class="modal-footer"><button data-dismiss="modal" class="btn btn-default" type="button">关闭</button><button class="btn btn-primary" id="submit" type="button">提交</button></div></div><!-- /.modal-content --></div><!-- /.modal-dialog -->
</div><div style="height:200px"></div>

可切换导航栏

也是很常见的效果哈。data-toggle为tab

</style>
<ul id="myTab" class="nav nav-tabs"><li class="active"><a href="#dota" data-toggle="tab">DotA</a></li><li><a href="#lol" data-toggle="tab">英雄联盟</a></li><li class="dropdown"><a href="#" id="myTabDrop1" class="dropdown-toggle"data-toggle="dropdown">其他类似游戏<b class="caret"></b></a><ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1"><li><a href="#storm" tabindex="-1" data-toggle="tab">风暴英雄</a></li><li><a href="#h300" tabindex="-1" data-toggle="tab">300英雄</a></li></ul></li>
</ul>
<div id="myTabContent" class="tab-content"><div class="tab-pane fade in active" id="dota"><p>《DotA》（Defense of the Ancients），可以译作守护古树、守护遗迹、远古遗迹守卫， 是由暴雪公司出品即时战略游戏《魔兽争霸3》的一款多人即时对战、自定义地图，可支持10个人同时连线游戏，是暴雪公司官方认可的魔兽争霸的RPG地图。</p></div><div class="tab-pane fade" id="lol"><p>《英雄联盟》（简称lol）是由美国Riot Games开发，中国大陆地区由腾讯游戏运营的网络游戏。</p></div><div class="tab-pane fade" id="storm"><p>《风暴英雄》 是由暴雪娱乐公司开发的一款运行在Windows和Mac OS上的在线多人竞技PC游戏。</p><p> 游戏中的英雄角色主要来自于暴雪三大经典游戏系列：《魔兽世界》、《暗黑破坏神》和《星际争霸》。它是一款道具收费的游戏，与《星际争霸Ⅱ》基于同一引擎开发。</p></div><div class="tab-pane fade" id="h300"><p>《300英雄》是由上海跳跃网络科技有限公司自主研发，深圳中青宝互动网络股份有限公司运营的一款类DOTA网游。游戏以7v7组队对抗玩法为主，提供永恒战场和永恒竞技场两种经典模式任由玩家选择，并创新性地加入勇者斗恶龙、克隆战争等多种休闲娱乐玩法。</p></div>
</div>

提示工具

鼠标悬停在某个组件上面，如果该组件设置了title属性就会有提示信息，bootstrap就提供了更好看的提示工具、

<button style="margin-left:100px" type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="提示信息">鼠标悬停</button><script>$(function () { $("[data-toggle='tooltip']").tooltip(); });
</script>

可以通过更改data-placement属性来更改提示信息出现的位置，例子中是左，还可以上下右。

折叠

按钮折叠

点两下就会折叠起来。 collapse

<a href="#data" class="btn btn-info" role="button" data-toggle="collapse" >Data</a>
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#LOL">LOL</button>
<div class="collapse" id = "data"><div class="well">《DotA》（Defense of the Ancients），可以译作守护古树、守护遗迹、远古遗迹守卫， 是由暴雪公司出品即时战略游戏《魔兽争霸3》的一款多人即时对战、自定义地图，可支持10个人同时连线游戏，是暴雪公司官方认可的魔兽争霸的RPG地图。</div>
</div>
<div class="collapse" id="LOL"><div class="well">《英雄联盟》（简称lol）是由美国Riot Games开发，中国大陆地区由腾讯游戏运营的网络游戏。</div>
</div>

面板折叠，点击面板就会出现、折叠。

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"><div class="panel panel-default"><div class="panel-heading" role="tab" id="headingOne"><h4 class="panel-title"><a href="#collapseOne" role="button" data-toggle="collapse" data-parent="#accordion" aria-expanded="true" aria-controls="collapseOne">DATA</a></h4></div><div class="panel-collapse collapse in" id="collapseOne" role="tabpanel" aria-labelledby="headingOne"><div class="panel-body">DotA》（Defense of the Ancients），可以译作守护古树、守护遗迹、远古遗迹守卫， 是由暴雪公司出品即时战略游戏《魔兽争霸3》的一款多人即时对战、自定义地图，可支持10个人同时连线游戏，是暴雪公司官方认可的魔兽争霸的RPG地图。</div></div></div><div class="panel panel-default"><div class="panel-heading" role="tab" id="headingTwo"><h4 class="panel-title"><a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">LOL</a></h4></div><div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"><div class="panel-body">《英雄联盟》（简称lol）是由美国Riot Games开发，中国大陆地区由腾讯游戏运营的网络游戏。</div></div></div>
</div>

轮播

就是图片轮播：用的是carousel，还可以通过设置data-interval="1000" 属性来改变轮播的速度。

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"><!-- Indicators --><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><li data-target="#carousel-example-generic" data-slide-to="3"></li></ol><!-- Wrapper for slides --><div class="carousel-inner" role="listbox"><div class="item active"><img src="https://how2j.cn/img/site/step/3491.png" ></div><div class="item"><img src="https://how2j.cn/img/site/step/3492.png" ></div><div class="item"><img src="https://how2j.cn/img/site/step/3493.png" ></div><div class="item"><img src="https://how2j.cn/img/site/step/3494.png" ></div></div>
</div>

如果想在每个图片的下面加个标题，就在图片下面加上carousel-caption就行

<div class="carousel-caption">LOL1</div>

还可以加上向前向后的按钮效果：

<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span></a><a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></a>

学习网站：

https://how2j.cn/p/4449

前端学习笔记 bootstrap（三）相关推荐

重学前端学习笔记（三十六）--Flex 布局
笔记说明重学前端是程劭非(winter)[前手机淘宝前端负责人]在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的专 ...
【前端学习笔记】(三)（CSS基础、选择器、字体和文本样式）
目录一.基础认知 1.1 CSS介绍 1.2 CSS语法规则 1.3 CSS常见属性 1.4 CSS引入方式 1.5 CSS常见三种引入方式的区别二.基础选择器 1.标签选择器 2.类选择器 3. ...
Web前端学习笔记（三）---白色/黑暗背景切换
效果图 HTML <!DOCTYPE html> <html lang="en"> <head><meta charset="U ...
web前端学习笔记（三）
HTML5:布局类标签 HTML是具有语义化的语言,针对网页的布局,有一类标签代表各种意义的"布局盒子".所有的布局类标签都主要用来构建页面的内容区域,是双标签类型,是双标签类型, ...
前端学习笔记：Bootstrap框架入门
前端学习笔记:Bootstrap框架入门一.Bootstrap概述 1.基本信息 Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS. ...
【web开发学习笔记】Structs2 Result学习笔记（三）带參数的结果集
Result学习笔记(三)带參数的结果集第一部分:代码 //前端 <head> <meta http-equiv="Content-Type" content= ...
node JS獲取GPS_node学习笔记（三十八）
一.什么是NodeJS? 1.Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境. 2.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效 ...
前端学习笔记（js基础知识）
前端学习笔记(js基础知识) JavaScript 输出 JavaScript 数据类型常见的HTML事件 DOM 冒泡与捕获流程控制语句 for..in 计时器 let,var,const的区别 ...
前端学习笔记：省市区三级联动
前端学习笔记:省市区三级联动一.数据库 sql表是自关联的表. 表名:province_city_district 字段: id:区域自身的id pid:区域的父级id name:区域自身的名字二 ...

前端学习笔记 bootstrap（三）

模态窗体

可切换导航栏

提示工具

折叠

轮播

前端学习笔记 bootstrap（三）相关推荐

最新文章

热门文章