本笔记用于记录使用bootstrap时遇到的问题及解决办法，随时更新。
笔记模式：问题-->思路-->最终解决方式。
1.分类：响应式导航栏
问题：网页在手机端显示时，导航栏展开后点击选项不折叠。
现象.gif
思路：（1）是找到切换按钮的事件处理部分源码，但是发现不能轻易改动，不然会影响其他部分的功能，失败。
（2）想重写这部分事件，获取了按钮，并用$("#change").unbind("click")解绑，失败。
（3）F12查看源码，发现点击时导航栏的类发生了变化，下拉项出来后，nav的类名是collapse navbar-collapse in，隐藏时类名为collapse navbar-collapse，得到处理办法--$("#example-navbar-collapse").removeClass("in")，即下拉项显示与否是in类进行的控制，解决。
响应式导航栏部分源码
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse" id="change">
<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="#"><span class="glyphicon glyphicon-home"></span><span class="badge">42</span></a>
</div>
<!--以下为下拉项内容-->
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a target="test.html">个人信息</a></li>
<li><a target="#">家庭信息</a></li>
<li><a target="#">其他信息</a></li>
<li><a target="#">修改密码</a></li>
<li><a target="#">退出登录</a></li>
</ul>
</div>
</div>
</nav>
2.分类：模态框
问题：点击模态框的“确定”按钮（id='btn')，隐藏模态框。
演示.gif
思路：（1）使用jquery中的
.hide()方法，即$("#btn").click(function(){$("#modalName").hide();});没试。（2）仔细查看官网文档，发现：
data-dismiss="modal"，是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口,于是可以当点击确定按钮时，给按钮设定这个属性：$("#btn").click(function(){$(this).attr("data-dismiss","modal");});。问题得解。3.分类：面板
问题：想要实现面板激活时是“panel panel-primary”样式，点击时切换样式为“panel panel-success”。
演示.gif
思路：（1）原生bootstrap可以借助jquery的removeClass、addClass、toggleClass方法更改class，但是在尝试toggleClass时，会添加/删除两个类名，删除掉两个类名时，面板的样式就完全没有了，不能达到要求。如下图：
$(this).toggleClass("panel panel-primary");
测试.gif
（2）如果加个判断语句，当
class="panel panel-primary"时，将其置为class="panel panel-success"，当class="panel panel-success"时，将其置为class="panel panel-primary"应该可行，不过我用了另一种方法。（3）我想用上
toggleClass，所以将panel的样式改为了原来panel-success的样式，即class="panel"就等价于原来的class="panel panel-success"，这时只需控制panel-primary类即可。(好吧，还有bug，待修复)改后的css文件
.panel {
margin-bottom: 20px;
background-color: #fff;
border: 1px solid #d6e9c6;
border-radius: 4px;
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .5);
box-shadow: 0 3px 8px rgba(0, 0, 0, .5);
margin-top:5px;
}
.panel-body {
padding: 15px
}
.panel-heading {
padding: 10px 15px;
border-bottom: 1px solid transparent;
border-top-left-radius: 3px;
border-top-right-radius: 3px
}
.panel-heading > .dropdown .dropdown-toggle {
color: inherit
}
.panel-title {
margin-top: 0;
margin-bottom: 0;
font-size: 16px;
color: inherit
}
.panel-title > a {
color: inherit
}
.panel > .panel-heading {
color: #3c763d;
background-color: #D9EDF6;
border-color: #d6e9c6;
}
.panel > .panel-heading + .panel-collapse > .panel-body {
border-top-color: #d6e9c6;
}
.panel > .panel-heading .badge {
color: #dff0d8;
background-color: #3c763d;
}
.panel > .panel-footer + .panel-collapse > .panel-body {
border-bottom-color: #d6e9c6;
}
.panel-footer {
padding: 10px 15px;
background-color: #f5f5f5;
border-top: 1px solid #ddd;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px
}
.panel-primary {
border-color: #428bca!important;
}
.panel-primary > .panel-heading {
color: #fff!important;
background-color: #428bca!important;
border-color: #428bca!important;
}
.panel-primary > .panel-heading + .panel-collapse > .panel-body {
border-top-color: #428bca!important;
}
.panel-primary > .panel-heading .badge {
color: #428bca!important;
background-color: #fff!important;
}
.panel-primary > .panel-footer + .panel-collapse > .panel-body {
border-bottom-color: #428bca!important;
}
html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link href="static/css/bootstrap.min.css" rel="stylesheet">
<link href="static/css/subject.css" rel="stylesheet">
<script src="static/js/jquery-1.11.2.min.js"></script>
</head>
<body id="address-body">
<div class="col-md-10 col-md-offset-1">
<h2 class="text-center">收货地址确认</h2>
<div class="col-md-3 col-sm-5">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">张三<span class="glyphicon glyphicon-check pull-right"></span></h3>
</div>
<div class="panel-body">
安徽省淮南市田家庵区
</div>
</div>
</div>
<div class="col-md-3 col-sm-5">
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">面板标题</h3>
</div>
<div class="panel-body">
这是一个基本的面板
</div>
</div>
</div>
<div class="col-md-3 col-sm-5">
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">面板标题</h3>
</div>
<div class="panel-body">
这是一个基本的面板
</div>
</div>
</div>
<div class="col-md-3 col-sm-5">
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">面板标题</h3>
</div>
<div class="panel-body">
这是一个基本的面板
</div>
</div>
</div>
<div class="col-md-3 col-sm-5" id="test">
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">面板标题</h3>
</div>
<div class="panel-body">
这是一个基本的面板
</div>
</div>
</div>
</div>
$(function(){
/*面板的样式更改*/
$("#address-body .panel").click(function(){
/*通过添加/删除‘panel-primary’类控制样式*/
$(this).toggleClass("panel-primary");
if($(this).attr("class")=="panel panel-primary"){//通过类名判断是否选中
//选中的话添加一个小图标
$(this).find(".panel-title").append('<span class="glyphicon glyphicon-check pull-right"></span>');
}else{
//没有选中的移除其图标
$("#address-body .panel-title span").remove();
}
});
});
</body>
</html>
