BootStrap项目-摄影技能

鹏重名了
568 阅读5分钟

1. 导航

概念： 导航容器使用默认样式，流体布局。

  • 导航头：

    • LOGO：图片地址由JS动态生成。
    • 折叠按钮布置三条横线图标，并且放在 .navbar-header 中，防止移动端串行。

  • 折叠内容容器： 包括一个导航列表，数据由JS动态生成。

布局： 摄影技能.html

<!--导航容器-->
<nav class="navbar navbar-default container-fluid">
    
    <!--导航头-->
    <section class="navbar-header">
        <span class="navbar-brand">
            <img id="logoImg"/>
        </span>
        <button data-toggle="collapse" data-target="#collapseBody" class="navbar-toggle">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </section>

    <!--导航头折叠内容容器：包括一个导航列表-->
    <section id="collapseBody" class="collapse navbar-collapse">
        <ul id="navList" class="nav navbar-nav navbar-right">
            <li class="active"><a><i>&nbsp;首页</i></a></li>
            <li><a><i>&nbsp;摄影技能</i></a></li>
            <li><a><i>&nbsp;作品展示</i></a></li>
            <li><a><i>&nbsp;关于我们</i></a></li>
        </ul>
    </section>
</nav>

脚本： 摄影技能.js

    /*LOGO*/
    $("#logoImg").attr("src", "../img/logo.png");


    /*导航列表*/
    let navList = $("#navList");
    navList.find("a").eq(0).attr("href", "../html/首页.html");
    navList.find("i").eq(0).attr("class", "glyphicon glyphicon-home");
    navList.find("a").eq(1).attr("href", "../html/摄影技能.html");
    navList.find("i").eq(1).attr("class", "glyphicon glyphicon-fire");
    navList.find("a").eq(2).attr("href", "../html/作品展示.html");
    navList.find("i").eq(2).attr("class", "glyphicon glyphicon-list");
    navList.find("a").eq(3).attr("href", "../html/关于我们.html");
    navList.find("i").eq(3).attr("class", "glyphicon glyphicon-question-sign");

2.页头

布局： 摄影技能.html

<!--页头-->
<section class="jumbotron">
    <article class="container text-right text-muted">
        <h1></h1><h3></h3>
    </article>
</section>

脚本： 摄影技能.js

    /*页头*/
    let jumbotron = $(".jumbotron").eq(0);
    jumbotron.find("h1").text("摄影技能");
    jumbotron.find("h3").text("如何成为一名优秀的摄影师，如何拍摄出优秀的作品。");

3.主题内容

布局： 摄影技能.html

<!--页头-->

<!--主体部分-->
<section id="main" class="container">

    <!--左边部分-->
    <section id="items" class="panel-group col-md-4">

        <article class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a id="a01" href="#msg01" data-parent="#items" data-toggle="collapse"></a>
                </h4>
            </div>
            <ol id="msg01" class="list-group panel-collapse collapse in">
                <li class="list-group-item"><a href="#content01_1"></a></li>
                <li class="list-group-item"><a href="#content01_2"></a></li>
                <li class="list-group-item"><a href="#content01_3"></a></li>
            </ol>
        </article>

        <article class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a id="a02" href="#msg02" data-parent="#items" data-toggle="collapse"></a>
                </h4>
            </div>
            <ol id="msg02" class="list-group panel-collapse collapse">
                <li class="list-group-item"><a href="#content02_1"></a></li>
                <li class="list-group-item"><a href="#content02_2"></a></li>
                <li class="list-group-item"><a href="#content02_3"></a></li>
            </ol>
        </article>

        <article class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a id="a03" href="#msg03" data-parent="#items" data-toggle="collapse"></a>
                </h4>
            </div>
            <ol id="msg03" class="list-group panel-collapse collapse">
                <li class="list-group-item"><a href="#content03_1"></a></li>
                <li class="list-group-item"><a href="#content03_2"></a></li>
                <li class="list-group-item"><a href="#content03_3"></a></li>
            </ol>
        </article>
    </section>

    <!--右边部分-->
    <article class="col-md-8">
        <article id="content01_1" class="well"><h3></h3><p></p></article>
        <article id="content01_2" class="well"><h3></h3><p></p></article>
        <article id="content01_3" class="well"><h3></h3><p></p></article>
        <article id="content02_1" class="well"><h3></h3><p></p></article>
        <article id="content02_2" class="well"><h3></h3><p></p></article>
        <article id="content02_3" class="well"><h3></h3><p></p></article>
        <article id="content03_1" class="well"><h3></h3><p></p></article>
        <article id="content03_2" class="well"><h3></h3><p></p></article>
        <article id="content03_3" class="well"><h3></h3><p></p></article>
    </article>

</section>

脚本： 摄影技能.js


    /*主题左侧*/
    $("#a01").text("人像摄影");
    let msg01 = $("#msg01");
    msg01.find("a").eq(0).text("十分钟学会如何拍男人");
    msg01.find("a").eq(1).text("十分钟学会如何拍女人");
    msg01.find("a").eq(2).text("十分钟学会如何拍人妖");
    $("#a02").text("风光摄影");
    let msg02 = $("#msg02");
    msg02.find("a").eq(0).text("十分钟学会如何拍山水");
    msg02.find("a").eq(1).text("十分钟学会如何拍雪景");
    msg02.find("a").eq(2).text("十分钟学会如何拍房屋");
    $("#a03").text("人文摄影");
    let msg03 = $("#msg03");
    msg03.find("a").eq(0).text("十分钟学会如何拍故事");
    msg03.find("a").eq(1).text("十分钟学会如何拍情感");
    msg03.find("a").eq(2).text("十分钟学会如何拍战争");


    /*主题右侧*/
    let content11 = $("#content01_1");
    content11.find("h3").text("十分钟学会如何拍男人");
    content11.find("p").text(`
		作为一名经验十分老道的摄影师，
		我可以很负责任的告诉你，
		想要通过十分钟学会如何拍摄男人这种标题都是扯犊子，
		没有个三年五载的根本不可能实现。`);
    let content12 = $("#content01_2");
    content12.find("h3").text("十分钟学会如何拍女人");
    content12.find("p").text(`
		作为一名经验十分老道的摄影师，
		我可以很负责任的告诉你，
		想要通过十分钟学会如何拍摄女人这种标题都是扯犊子，
		没有个三年五载的根本不可能实现。`);
    let content13 = $("#content01_3");
    content13.find("h3").text("十分钟学会如何拍人妖");
    content13.find("p").text(`
		作为一名经验十分老道的摄影师，
		我可以很负责任的告诉你，
		想要通过十分钟学会如何拍摄人妖这种标题都是扯犊子，
		没有个三年五载的根本不可能实现。`);
    let content21 = $("#content02_1");
    content21.find("h3").text("十分钟学会如何拍山水");
    content21.find("p").text(`
		作为一名经验十分老道的摄影师，
		我可以很负责任的告诉你，
		想要通过十分钟学会如何拍摄山水这种标题都是扯犊子，
		没有个三年五载的根本不可能实现。`);
    let content22 = $("#content02_2");
    content22.find("h3").text("十分钟学会如何拍雪景");
    content22.find("p").text(`
		作为一名经验十分老道的摄影师，
		我可以很负责任的告诉你，
		想要通过十分钟学会如何拍摄雪景这种标题都是扯犊子，
		没有个三年五载的根本不可能实现。`);
    let content23 = $("#content02_3");
    content23.find("h3").text("十分钟学会如何拍房屋");
    content23.find("p").text(`
		作为一名经验十分老道的摄影师，
		我可以很负责任的告诉你，
		想要通过十分钟学会如何拍摄房屋这种标题都是扯犊子，
		没有个三年五载的根本不可能实现。`);
    let content31 = $("#content03_1");
    content31.find("h3").text("十分钟学会如何拍故事");
    content31.find("p").text(`
		作为一名经验十分老道的摄影师，
		我可以很负责任的告诉你，
		想要通过十分钟学会如何拍摄故事这种标题都是扯犊子，
		没有个三年五载的根本不可能实现。`);
    let content32 = $("#content03_2");
    content32.find("h3").text("十分钟学会如何拍情感");
    content32.find("p").text(`
		作为一名经验十分老道的摄影师，
		我可以很负责任的告诉你，
		想要通过十分钟学会如何拍摄情感这种标题都是扯犊子，
		没有个三年五载的根本不可能实现。`);
    let content33 = $("#content03_3");
    content33.find("h3").text("十分钟学会如何拍战争");
    content33.find("p").text(`
		作为一名经验十分老道的摄影师，
		我可以很负责任的告诉你，
		想要通过十分钟学会如何拍摄战争这种标题都是扯犊子，
		没有个三年五载的根本不可能实现。`);

4.整体CSS

@charset "utf-8";

/*媒体查询：浏览器根据屏幕视口大小来选择具体使用哪一种CSS*/
/*没有小于768px的移动端设计区域是因为BOOTSTRAP3默认就是移动端*/

/*平板端：[0, 768) 时使用这里的样式*/
@media (min-width: 768px) {
    p {
        font-size: 10px;
    }
}

/*笔记本：[768, 992) 时使用这里的样式*/
@media (min-width: 992px) {
    p {
        font-size: 12px;
    }
}

/*台式机：[992, 1200) 时使用这里的样式*/
@media (min-width: 1200px) {
    p {
        font-size: 14px;
    }
}

整体代码，建议仔细看完在复制粘贴

布局： 首页.html

<!DOCTYPE html>
<html lang="zh-CN">
<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="../bootstrap337/css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/global.css" rel="stylesheet">
    <link href="../css/摄影技能.css" rel="stylesheet">
</head>
<body>

<!--导航容器-->
<nav class="navbar navbar-default container-fluid">

    <!--导航头-->
    <section class="navbar-header">

        <!--logo-->
        <span class="navbar-brand">
			<img id="logoImg"/>
		</span>

        <!--折叠触发器按钮：三条横线-->
        <!--放在 .navbar-header 中，是为了防止移动端串行-->
        <button data-toggle="collapse" data-target="#collapseBody" class="navbar-toggle">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </section>

    <!--导航头折叠内容容器-->
    <section id="collapseBody" class="collapse navbar-collapse">
        <ul id="navList" class="nav navbar-nav navbar-right">
            <li><a><i>&nbsp;首页</i></a></li>
            <li class="active"><a><i>&nbsp;摄影技能</i></a></li>
            <li><a><i>&nbsp;作品展示</i></a></li>
            <li><a><i>&nbsp;关于我们</i></a></li>
        </ul>
    </section>
</nav>

<!--页头-->
<section class="jumbotron">
    <article class="container text-right text-muted">
        <h1></h1><h3></h3>
    </article>
</section>

<!--主体部分-->
<section id="main" class="container">

    <!--左边部分-->
    <section id="items" class="panel-group col-md-4">

        <article class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a id="a01" href="#msg01" data-parent="#items" data-toggle="collapse"></a>
                </h4>
            </div>
            <ol id="msg01" class="list-group panel-collapse collapse in">
                <li class="list-group-item"><a href="#content01_1"></a></li>
                <li class="list-group-item"><a href="#content01_2"></a></li>
                <li class="list-group-item"><a href="#content01_3"></a></li>
            </ol>
        </article>

        <article class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a id="a02" href="#msg02" data-parent="#items" data-toggle="collapse"></a>
                </h4>
            </div>
            <ol id="msg02" class="list-group panel-collapse collapse">
                <li class="list-group-item"><a href="#content02_1"></a></li>
                <li class="list-group-item"><a href="#content02_2"></a></li>
                <li class="list-group-item"><a href="#content02_3"></a></li>
            </ol>
        </article>

        <article class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a id="a03" href="#msg03" data-parent="#items" data-toggle="collapse"></a>
                </h4>
            </div>
            <ol id="msg03" class="list-group panel-collapse collapse">
                <li class="list-group-item"><a href="#content03_1"></a></li>
                <li class="list-group-item"><a href="#content03_2"></a></li>
                <li class="list-group-item"><a href="#content03_3"></a></li>
            </ol>
        </article>
    </section>

    <!--右边部分-->
    <article class="col-md-8">
        <article id="content01_1" class="well"><h3></h3><p></p></article>
        <article id="content01_2" class="well"><h3></h3><p></p></article>
        <article id="content01_3" class="well"><h3></h3><p></p></article>
        <article id="content02_1" class="well"><h3></h3><p></p></article>
        <article id="content02_2" class="well"><h3></h3><p></p></article>
        <article id="content02_3" class="well"><h3></h3><p></p></article>
        <article id="content03_1" class="well"><h3></h3><p></p></article>
        <article id="content03_2" class="well"><h3></h3><p></p></article>
        <article id="content03_3" class="well"><h3></h3><p></p></article>
    </article>

</section>

<!--注脚-->
<footer class="bg-warning text-center text-muted">
    <p></p>
    <p class="text-uppercase"></p>
</footer>


<script src="../jquery321/jquery-3.2.1.min.js"></script>
<script src="../bootstrap337/js/bootstrap.min.js"></script>
<script src="../script/摄影技能.js" type="text/javascript"></script>

</body>
</html>

样式： 首页.css

@charset "utf-8";

/*媒体查询：浏览器根据屏幕视口大小来选择具体使用哪一种CSS*/
/*没有小于768px的移动端设计区域是因为BOOTSTRAP3默认就是移动端*/

/*平板端：[0, 768) 时使用这里的样式*/
@media (min-width: 768px) {
    p {
        font-size: 10px;
    }
}

/*笔记本：[768, 992) 时使用这里的样式*/
@media (min-width: 992px) {
    p {
        font-size: 12px;
    }
}

/*台式机：[992, 1200) 时使用这里的样式*/
@media (min-width: 1200px) {
    p {
        font-size: 14px;
    }
}

脚本： 首页.js

 $(() => {
    /*LOGO*/
    $("#logoImg").attr("src", "../img/logo.png");


    /*导航列表*/
    let navList = $("#navList");
    navList.find("a").eq(0).attr("href", "../html/首页.html");
    navList.find("i").eq(0).attr("class", "glyphicon glyphicon-home");
    navList.find("a").eq(1).attr("href", "../html/摄影技能.html");
    navList.find("i").eq(1).attr("class", "glyphicon glyphicon-fire");
    navList.find("a").eq(2).attr("href", "../html/作品展示.html");
    navList.find("i").eq(2).attr("class", "glyphicon glyphicon-list");
    navList.find("a").eq(3).attr("href", "../html/关于我们.html");
    navList.find("i").eq(3).attr("class", "glyphicon glyphicon-question-sign");

    /*页头*/
    let jumbotron = $(".jumbotron").eq(0);
    jumbotron.find("h1").text("摄影技能");
    jumbotron.find("h3").text("如何成为一名优秀的摄影师，如何拍摄出优秀的作品。");

    /*主题左侧*/
    $("#a01").text("人像摄影");
    let msg01 = $("#msg01");
    msg01.find("a").eq(0).text("十分钟学会如何拍男人");
    msg01.find("a").eq(1).text("十分钟学会如何拍女人");
    msg01.find("a").eq(2).text("十分钟学会如何拍人妖");
    $("#a02").text("风光摄影");
    let msg02 = $("#msg02");
    msg02.find("a").eq(0).text("十分钟学会如何拍山水");
    msg02.find("a").eq(1).text("十分钟学会如何拍雪景");
    msg02.find("a").eq(2).text("十分钟学会如何拍房屋");
    $("#a03").text("人文摄影");
    let msg03 = $("#msg03");
    msg03.find("a").eq(0).text("十分钟学会如何拍故事");
    msg03.find("a").eq(1).text("十分钟学会如何拍情感");
    msg03.find("a").eq(2).text("十分钟学会如何拍战争");


    /*主题右侧*/
    let content11 = $("#content01_1");
    content11.find("h3").text("十分钟学会如何拍男人");
    content11.find("p").text(`
		作为一名经验十分老道的摄影师，
		我可以很负责任的告诉你，
		想要通过十分钟学会如何拍摄男人这种标题都是扯犊子，
		没有个三年五载的根本不可能实现。`);
    let content12 = $("#content01_2");
    content12.find("h3").text("十分钟学会如何拍女人");
    content12.find("p").text(`
		作为一名经验十分老道的摄影师，
		我可以很负责任的告诉你，
		想要通过十分钟学会如何拍摄女人这种标题都是扯犊子，
		没有个三年五载的根本不可能实现。`);
    let content13 = $("#content01_3");
    content13.find("h3").text("十分钟学会如何拍人妖");
    content13.find("p").text(`
		作为一名经验十分老道的摄影师，
		我可以很负责任的告诉你，
		想要通过十分钟学会如何拍摄人妖这种标题都是扯犊子，
		没有个三年五载的根本不可能实现。`);
    let content21 = $("#content02_1");
    content21.find("h3").text("十分钟学会如何拍山水");
    content21.find("p").text(`
		作为一名经验十分老道的摄影师，
		我可以很负责任的告诉你，
		想要通过十分钟学会如何拍摄山水这种标题都是扯犊子，
		没有个三年五载的根本不可能实现。`);
    let content22 = $("#content02_2");
    content22.find("h3").text("十分钟学会如何拍雪景");
    content22.find("p").text(`
		作为一名经验十分老道的摄影师，
		我可以很负责任的告诉你，
		想要通过十分钟学会如何拍摄雪景这种标题都是扯犊子，
		没有个三年五载的根本不可能实现。`);
    let content23 = $("#content02_3");
    content23.find("h3").text("十分钟学会如何拍房屋");
    content23.find("p").text(`
		作为一名经验十分老道的摄影师，
		我可以很负责任的告诉你，
		想要通过十分钟学会如何拍摄房屋这种标题都是扯犊子，
		没有个三年五载的根本不可能实现。`);
    let content31 = $("#content03_1");
    content31.find("h3").text("十分钟学会如何拍故事");
    content31.find("p").text(`
		作为一名经验十分老道的摄影师，
		我可以很负责任的告诉你，
		想要通过十分钟学会如何拍摄故事这种标题都是扯犊子，
		没有个三年五载的根本不可能实现。`);
    let content32 = $("#content03_2");
    content32.find("h3").text("十分钟学会如何拍情感");
    content32.find("p").text(`
		作为一名经验十分老道的摄影师，
		我可以很负责任的告诉你，
		想要通过十分钟学会如何拍摄情感这种标题都是扯犊子，
		没有个三年五载的根本不可能实现。`);
    let content33 = $("#content03_3");
    content33.find("h3").text("十分钟学会如何拍战争");
    content33.find("p").text(`
		作为一名经验十分老道的摄影师，
		我可以很负责任的告诉你，
		想要通过十分钟学会如何拍摄战争这种标题都是扯犊子，
		没有个三年五载的根本不可能实现。`);

    /*注脚*/
    let footer = $("footer").eq(0);
    footer.find("p").eq(0).text("摄影爱好者基地 | 合作事宜 | 版权投诉");
    footer.find("p").eq(1).text(`
		黑ICP 备1234567. &copyright; 
		1964-2100 一米拾光网. Powered by Bootstrap.`);
});
avatar
文章
阅读
粉丝