【巩固】Bootstrap笔记一

这两天开始重新巩固一下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>