bootstrap之项目一的填坑

何谓bootstrap?

bootstrap:是别人封装好的一些样式，我们可以通过直接导入来使用它们。使得我们的网页开发更加快速和便捷。

---

怎么去用Bootstrap？

　　个人认为,我们运用Bootstrap是能够更好的布局，将大体框架搭建完成之后，对于细节上的修改，叫我们可以通过覆盖其原来的样式来实现修改。这里bootstrap中的栅格就是一个很好的例子，栅格通过把一行分为12格子，来合理搭配我们的布局，同时我们通过栅格也可以实现网页的响应式设计，举个栗子吧⬇

<div class="container">
            <div class="row">
                <!--栅格系统-->
                <div class="col-md-1"></div>
                <div class="col-md-10">
                    <h1>bootstrap实战课程等你来战！</h1>
                    <p>本套课程适用于：1.web开发人员；2.网站维护人员、管理人员
                        <br>培训技能的目标：使用bootstrap框架快速建构响应式网页，颠覆传统WEB前端！
                    </p>
                    <img src="../images/php.jpg" class="img-responsive">
                </div>
                <div class="col-md-1"></div>
            </div>
        </div>

 　　这里我们的container的作用是使我们的区块实现居中功能

　　在这里我们的栅格分成了1 10 1 的布局 ，是为了突出中间的文本，这就是一个很好的运用

　　在这里列举一下栅格的分类

　　

网格大小：　col-xs 最小：手机
          col-sm 小：平板
          col-md 中：电脑
          col-lg 大

 　　我们在电脑端的一般使用md较多

---

 

一些语法：

导航栏系列：

现在我们有如下代码：

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <!--小屏幕导航按钮-->
        <div class="navbar-header">
            <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">麦子学院</a>
        </div>

        <!--导航-->
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#home">首页</a></li>
                <li><a href="#bbs">论坛</a></li>
                <li><a href="#html5">前端开发</a></li>
                <li><a href="#bootstrap">最新课程</a></li>
                <li><a href="#course">移动APP</a></li>
                <li><a href="#contact">联系我们</a></li>
            </ul>
        </div>
    </div>
</nav>

 　　显而易见的是<nav class="navbar navbar-default navbar-fixed-top">这里就是我们最外层的导航栏的样式，从左往右依次是基本样式，颜色，固定方式。

　　<a href="#" class="navbar-brand">麦子学院</a>    在这里就是对于我们logo 区的修饰

　　

滤镜

.lvjing{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    padding: 90px 0;
    /*透明度*/
}

 滤镜就是通过添加一个标签设置我们的透明度来实现对原图片的修改的一个功能

 

背景图片

#home{
    background: url("../images/home-bg.jpg");
    background-size:cover;
    color:white;
    margin-top: 70px;
    text-align: center;
    width:100%;
    /*注意路径*/
}

 

这里是在一个id下修改的情况，需要注意的是我们导入图片的路径不能出错，有时候找不到图片我们可以添加../来向上一级目录查找来实现

background-size:cover;   是将图片覆盖当前区域，伸展的足够大

 

阴影设置

box-shadow: 1px 1px 4px #ccc;

 

这里的数值分别代表，上边距，左边距，阴影程度（个人理解，后续更正），颜色

 

 

-----------------------------------------------------------------------分割线-------------------------------------------------------------

这里添加一个动态效果插件的思维导图