这两天开始重新巩固一下bootstrap的学习，群里有朋友介绍说麦子学院的教程不错，特地看了一下，有2个项目练习，所以跟着做了一下，下面开始笔记。
<button class="navbar-toggle">可以在移动端显示的按钮<div class="navbar-collapse collapse">后面那个collapse表示在移动端的时候不显示- 导航里的
<li>里要写<a>标签，把文字写在<a>标签才能看到导航的效果
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#home">首页</a></li> <!--内容写在a标签里-->
<li><a href="#bbs">论坛</a></li>
<li><a href="#html5">前端开发</a></li>
</ul>
</div>
- 导航按钮和logo需要包在一个
class是navbar-header的div里 - 为了在移动端的那个导航按钮可以显示菜单内容，需要给这个按钮加上一个事件
data-toggle="collapse"以及绑定内容ul的class.navbar-collapse，注意class要加点.
<!--小屏幕时候的logo和菜单按钮，还要放在navbar-header类里-->
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <!--这里绑定点击事件和对应ul里de内容-->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="javascript:;" class="navbar-brand">麦子学院</a>
</div>
<!--小屏幕时候的logo和菜单按钮-->
<!--导航-->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">首页</a></li>
<li><a href="#">论坛</a></li>
<li><a href="#">前端开发</a></li>
<li><a href="#">最新课程</a></li>
<li><a href="#">移动APP</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
-
background-size的3个属性auto:背景图像的真实大小。cover：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。
-
如果一个div有个背景图，但是这张图需要暗一点，可以想到用蒙版，把蒙版放在这个div里面，并且把它设置
#home .homeFilter{
width: 100%;height: 100%;
background: rgba(0,0,0,0.2); 这个0.2是设置蒙版的透明度，可以通过调节它来控制背景图的亮度
}
- 本来在蒙版父级里的元素可以全部写在蒙版的标签里
<section id="home">
<div class="homeFilter"> <!--这层是蒙版，可以把代码写在蒙版里，section home里的代码可以全部包在这个蒙版里-->
<div class="container">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
<h2>Bootstrap实战课程等你来战！</h2>
<p>本套课程适用于：1.WEB开发人员；2.网站维护人员、管理人员</p>
<p>培训技能的目标：使用Bootstrap框架快速构建响应式网页，颠覆传统WEB前端！</p>
<img class="img-responsive" src="img/php.jpg" />
</div>
<div class="col-md-1"></div>
</div>
</div>
</div>
</section>
- 给
<a>标签制作成按钮，可以给它加role="button"以及class="btn btn-primary"
<div class="course">
<img src="images/1.jpg" class="img-responsive" alt=""/>
<a href="#" class="btn btn-primary" role="button">
加入学习
</a>
</div>
- 用bootstrap的栅格系统嵌套时不用再加第二个
class container了
<div class="col-md-6 wow fadeInRight"> <!--这里已经是第二级了-->
<form method="POST">
<div class="col-md-6"> <!--在这里这里可以直接col-md-->
<input type="text" class="form-control" placeholder="您的姓名"/>
</div>
<div class="col-md-6">
<input type="text" class="form-control" placeholder="您的邮箱" />
</div>
<div class="col-md-12"><!--这里是第二行，占满整行的，所以直接写md-12即可-->
<input type="text" class="form-control" placeholder="标题" />
</div>
</form>
</div>
