最新公告
  • 欢迎您光临起源地模板网，本站秉承服务宗旨 履行“站长”责任，销售只是起点 服务永无止境！立即加入钻石VIP
    • 10年
    专注帝国cms二次开发
    升级SVIP
    站长资源平台
    当前位置：站长学院 > 综合教程 > BootStrap项目-摄影技能

    BootStrap项目-摄影技能

    正文概述 掘金(鹏重名了)   2020-12-04   540

    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.`);
});

    起源地下载网 » BootStrap项目-摄影技能

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用？
    本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了？
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量，若小于网盘提示的容量则是这个原因。这是浏览器下载的bug，建议用百度网盘软件或迅雷下载。若排除这种情况，可在对应资源底部留言，或 联络我们.。
    找不到素材资源介绍文章里的示例图片？
    对于PPT，KEY，Mockups，APP，网页模版等类型的素材，文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买，且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况，但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发？
    请QQ联系我们
    掘金(鹏重名了)

    掘金(鹏重名了) SVIP

    分享到：

    相关推荐

    发表评论

    还没有评论，快来抢沙发吧！

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元