BootStrap项目-作品展示

鹏重名了
461 阅读3分钟

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">

    <div class="col-lg-3 col-md-4 col-sm-6">
        <div class="thumbnail">
            <img src="" alt=""/>
            <div class="caption">
                <h3></h3><p></p>
                <button id="infoBtnA" class="btn btn-danger">点击详情</button>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-4 col-sm-6">
        <div class="thumbnail">
            <img src="" alt=""/>
            <div class="caption">
                <h3></h3><p></p>
                <button id="infoBtnB" class="btn btn-info">点击详情</button>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-4 col-sm-6">
        <div class="thumbnail">
            <img src="" alt=""/>
            <div class="caption">
                <h3></h3><p></p>
                <button class="btn btn-info">点击详情</button>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-4 col-sm-6">
        <div class="thumbnail">
            <img src="" alt=""/>
            <div class="caption">
                <h3></h3><p></p>
                <button class="btn btn-info">点击详情</button>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-4 col-sm-6">
        <div class="thumbnail">
            <img src="" alt=""/>
            <div class="caption">
                <h3></h3><p></p>
                <button class="btn btn-info">点击详情</button>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-4 col-sm-6">
        <div class="thumbnail">
            <img src="" alt=""/>
            <div class="caption">
                <h3></h3><p></p>
                <button class="btn btn-info">点击详情</button>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-4 col-sm-6">
        <div class="thumbnail">
            <img src="" alt=""/>
            <div class="caption">
                <h3></h3><p></p>
                <button class="btn btn-info">点击详情</button>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-4 col-sm-6">
        <div class="thumbnail">
            <img src="" alt=""/>
            <div class="caption">
                <h3></h3><p></p>
                <button class="btn btn-info">点击详情</button>
            </div>
        </div>
    </div>
</section>


<section id="myModal01" class="modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal">&times;</button>
                <h3 class="modal-title">标题</h3>
            </div>
            <div class="modal-body">正文</div>
            <div class="modal-footer">注脚</div>
        </div>
    </div>
</section>


<section id="myModal02" class="modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal">&times;</button>
                <h3 class="modal-title">标题</h3>
            </div>
            <div class="modal-body">正文</div>
            <div class="modal-footer">注脚</div>
        </div>
    </div>
</section>

脚本： 作品展示.js

/*主体部分*/
    let main = $("#main");
    main.find("img").eq(0).attr("src", "../img/photo/p001.jpg");
    main.find("h3").eq(0).text("唐僧");
    main.find("p").eq(0).text("这是西安大雁塔广场的唐僧雕像");
    main.find("img").eq(1).attr("src", "../img/photo/p002.jpg");
    main.find("h3").eq(1).text("唐僧");
    main.find("p").eq(1).text("这是西安大雁塔广场的唐僧雕像");
    main.find("img").eq(2).attr("src", "../img/photo/p003.jpg");
    main.find("h3").eq(2).text("唐僧");
    main.find("p").eq(2).text("这是西安大雁塔广场的唐僧雕像");
    main.find("img").eq(3).attr("src", "../img/photo/p004.jpg");
    main.find("h3").eq(3).text("唐僧");
    main.find("p").eq(3).text("这是西安大雁塔广场的唐僧雕像");
    main.find("img").eq(4).attr("src", "../img/photo/p005.jpg");
    main.find("h3").eq(4).text("唐僧");
    main.find("p").eq(4).text("这是西安大雁塔广场的唐僧雕像");
    main.find("img").eq(5).attr("src", "../img/photo/p006.jpg");
    main.find("h3").eq(5).text("唐僧");
    main.find("p").eq(5).text("这是西安大雁塔广场的唐僧雕像");
    main.find("img").eq(6).attr("src", "../img/photo/p007.jpg");
    main.find("h3").eq(6).text("唐僧");
    main.find("p").eq(6).text("这是西安大雁塔广场的唐僧雕像");
    main.find("img").eq(7).attr("src", "../img/photo/p008.jpg");
    main.find("h3").eq(7).text("唐僧");
    main.find("p").eq(7).text("这是西安大雁塔广场的唐僧雕像");

    /**开启模态框*/
    $("#infoBtnA").click(()=>{
        $("#myModal01").modal({
            "show": true
        });
    });

    $("#infoBtnB").click(()=>{
        $("#myModal02").modal({
            "show": true
        });
    });

4.整体CSS

@charset "utf-8";

img{
    width: 100%;
}

/*媒体查询，浏览器根据屏幕视口大小来选择具体使用哪一种CSS*/
/*没有小于768px的移动端设计区域是因为BOOTSTRAP3默认就是移动端*/
@media (min-width: 768px) {
    /*平板端（大于768px使用这里的样式）*/
}

@media (min-width: 992px) {
    /*笔记本端（大于992px使用这里的样式）*/
}

@media (min-width: 1200px) {
    /*台式机端（大于1200px使用这里的样式）*/
}

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

布局： 作品展示.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><a><i>&nbsp;摄影技能</i></a></li>
            <li class="active"><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">

    <div class="col-lg-3 col-md-4 col-sm-6">
        <div class="thumbnail">
            <img src="" alt=""/>
            <div class="caption">
                <h3></h3><p></p>
                <button id="infoBtnA" class="btn btn-danger">点击详情</button>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-4 col-sm-6">
        <div class="thumbnail">
            <img src="" alt=""/>
            <div class="caption">
                <h3></h3><p></p>
                <button id="infoBtnB" class="btn btn-info">点击详情</button>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-4 col-sm-6">
        <div class="thumbnail">
            <img src="" alt=""/>
            <div class="caption">
                <h3></h3><p></p>
                <button class="btn btn-info">点击详情</button>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-4 col-sm-6">
        <div class="thumbnail">
            <img src="" alt=""/>
            <div class="caption">
                <h3></h3><p></p>
                <button class="btn btn-info">点击详情</button>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-4 col-sm-6">
        <div class="thumbnail">
            <img src="" alt=""/>
            <div class="caption">
                <h3></h3><p></p>
                <button class="btn btn-info">点击详情</button>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-4 col-sm-6">
        <div class="thumbnail">
            <img src="" alt=""/>
            <div class="caption">
                <h3></h3><p></p>
                <button class="btn btn-info">点击详情</button>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-4 col-sm-6">
        <div class="thumbnail">
            <img src="" alt=""/>
            <div class="caption">
                <h3></h3><p></p>
                <button class="btn btn-info">点击详情</button>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-4 col-sm-6">
        <div class="thumbnail">
            <img src="" alt=""/>
            <div class="caption">
                <h3></h3><p></p>
                <button class="btn btn-info">点击详情</button>
            </div>
        </div>
    </div>
</section>


<section id="myModal01" class="modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal">&times;</button>
                <h3 class="modal-title">标题</h3>
            </div>
            <div class="modal-body">正文</div>
            <div class="modal-footer">注脚</div>
        </div>
    </div>
</section>


<section id="myModal02" class="modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal">&times;</button>
                <h3 class="modal-title">标题</h3>
            </div>
            <div class="modal-body">正文</div>
            <div class="modal-footer">注脚</div>
        </div>
    </div>
</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";

img{
    width: 100%;
}

/*媒体查询，浏览器根据屏幕视口大小来选择具体使用哪一种CSS*/
/*没有小于768px的移动端设计区域是因为BOOTSTRAP3默认就是移动端*/
@media (min-width: 768px) {
    /*平板端（大于768px使用这里的样式）*/
}

@media (min-width: 992px) {
    /*笔记本端（大于992px使用这里的样式）*/
}

@media (min-width: 1200px) {
    /*台式机端（大于1200px使用这里的样式）*/
}

脚本： 作品展示.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("这个世界上最美好的，就是分享！");


    /*主体部分*/
    let main = $("#main");
    main.find("img").eq(0).attr("src", "../img/photo/p001.jpg");
    main.find("h3").eq(0).text("唐僧");
    main.find("p").eq(0).text("这是西安大雁塔广场的唐僧雕像");
    main.find("img").eq(1).attr("src", "../img/photo/p002.jpg");
    main.find("h3").eq(1).text("唐僧");
    main.find("p").eq(1).text("这是西安大雁塔广场的唐僧雕像");
    main.find("img").eq(2).attr("src", "../img/photo/p003.jpg");
    main.find("h3").eq(2).text("唐僧");
    main.find("p").eq(2).text("这是西安大雁塔广场的唐僧雕像");
    main.find("img").eq(3).attr("src", "../img/photo/p004.jpg");
    main.find("h3").eq(3).text("唐僧");
    main.find("p").eq(3).text("这是西安大雁塔广场的唐僧雕像");
    main.find("img").eq(4).attr("src", "../img/photo/p005.jpg");
    main.find("h3").eq(4).text("唐僧");
    main.find("p").eq(4).text("这是西安大雁塔广场的唐僧雕像");
    main.find("img").eq(5).attr("src", "../img/photo/p006.jpg");
    main.find("h3").eq(5).text("唐僧");
    main.find("p").eq(5).text("这是西安大雁塔广场的唐僧雕像");
    main.find("img").eq(6).attr("src", "../img/photo/p007.jpg");
    main.find("h3").eq(6).text("唐僧");
    main.find("p").eq(6).text("这是西安大雁塔广场的唐僧雕像");
    main.find("img").eq(7).attr("src", "../img/photo/p008.jpg");
    main.find("h3").eq(7).text("唐僧");
    main.find("p").eq(7).text("这是西安大雁塔广场的唐僧雕像");

    /**开启模态框*/
    $("#infoBtnA").click(()=>{
        $("#myModal01").modal({
            "show": true
        });
    });

    $("#infoBtnB").click(()=>{
        $("#myModal02").modal({
            "show": true
        });
    });
    /*注脚*/
    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
文章
阅读
粉丝