前端项目布局

项目布局

项目一般都是分开写布局与样式的，这样会使框架看起来变得简单

nav为导航条，后面的每个setion标签都对应着导航条内部的选项。

    <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="#home">首页</a>
                    </li>
                    <li>
                        <a href="#bbs">论坛</a>
                    </li>
                    <li>
                        <a href="#web">前端开发</a>
                    </li>
                </ul>

a标签内href属性的每一个ID，都与页面内的同id名模块相对应。

<section id="home"></section>
<section id="bbs"></section>
<section id="web"></section>

点击a标签时，会跳到对应的位置，如果只有一个"#"，则点击时会跳转到该页面的最上端。

项目布局就是根据模板一边添加需要的部分一边在外部css文件内修改样式，这样就避免了一个页面因为同时写了各种标签与大量style而变得复杂而难以修改。

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