BootStrap项目-关于我们

鹏重名了
144 阅读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">
    <div class="container text-right text-muted">
        <h1></h1><h3></h3>
    </div>
</section>

脚本： 关于我们.js

    /*页头*/
    let jumbotron = $(".jumbotron").eq(0);
    jumbotron.find("h1").text("关于我们");
    jumbotron.find("h3").text("我们页副标题幅标语内容填充！");

3. 主体部分

概念： 主体部分包括左侧的联系我们模块和右侧的商务合作模块。

布局： 关于我们.html

<!--页头-->

<!--主体部分-->
<section class="container">
    <article id="team" class="col-md-6">
        <section class="panel panel-default">
            <div class="panel-heading">
                <div class="panel-title"><h4>团队简介</h4></div>
            </div>

            <div class="panel-body">
                <p class="text-muted"></p>
                <p class="text-muted"></p>
            </div>

            <table class="table table-bordered table-hover table-striped">
                <thead><tr><th>姓名</th><th>岗位</th><th>电话</th></tr></thead>
                <tbody id="tbody"></tbody>
            </table>

            <div class="panel-footer"></div>
        </section>
    </article>

    <article id="cooperation" class="col-md-6">
        <section class="panel panel-info">
            <div class="panel-heading">
                <div class="panel-title"><h4>商务合作</h4></div>
            </div>

            <div class="panel-body">
                <form>
                    <label class="input-group">
                        <span class="input-group-addon">姓名：</span>
                        <input class="form-control"/>
                    </label>
                    <div class="radio">
                        <label class="radio-inline">
                            <input type="radio" name="gender"/>我是男生
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="gender"/>我是女生
                        </label>
                    </div>
                    <label class="input-group">
                        <span class="input-group-addon">电话：</span>
                        <input type="number" class="form-control"/>
                    </label>
                    <label for="xl">请选择您的学历</label>
                    <select id="xl" class="form-control">
                        <option>本科以上</option>
                        <option>本科</option>
                        <option>高中</option>
                    </select>
                </form>
            </div>

            <div class="panel-footer">
                <section class="btn-group dropdown">
                    <button class="btn btn-info">登录</button>
                    <button class="btn btn-info dropdown-toggle" data-toggle="dropdown">
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li><a href="#">注册</a></li>
                        <li><a href="#">忘记密码</a></li>
                    </ul>
                </section>
            </div>
        </section>
    </article>
</section>

脚本： 关于我们.js

     /*团队部分*/
    let team = $("#team");
    let panelBody = team.find(".panel-body").eq(0);
    panelBody.find("p").eq(0).text("我们公司我们公司我们公司我们公司我们公司");
    panelBody.find("p").eq(1).text("我们公司我们公司我们公司我们公司我们公司");

    let tbody = $("#tbody");

    let tr01 = $(`<tr><td>张三</td><td>前端</td><td>11111111</td></tr>`);
    let tr02 = $(`<tr><td>李四</td><td>后端</td><td>22222222</td></tr>`);
    let tr03 = $(`<tr><td>王五</td><td>运维</td><td>33333333</td></tr>`);
    let tr04 = $(`<tr><td>赵六</td><td>设计</td><td>44444444</td></tr>`);
    tbody.append(tr01);
    tbody.append(tr02);
    tbody.append(tr03);
    tbody.append(tr04);

    let panelFooter = team.find(".panel-footer").eq(0);
    panelFooter.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.`);

4.全局CSS

样式： 关于我们.css

@charset "utf-8";

/*媒体查询，浏览器根据屏幕视口大小来选择具体使用哪一种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><a><i>&nbsp;作品展示</i></a></li>
            <li class="active"><a><i>&nbsp;关于我们</i></a></li>
        </ul>
    </section>
</nav>

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

<!--主体部分-->
<section class="container">
    <article id="team" class="col-md-6">
        <section class="panel panel-default">
            <div class="panel-heading">
                <div class="panel-title"><h4>团队简介</h4></div>
            </div>

            <div class="panel-body">
                <p class="text-muted"></p>
                <p class="text-muted"></p>
            </div>

            <table class="table table-bordered table-hover table-striped">
                <thead><tr><th>姓名</th><th>岗位</th><th>电话</th></tr></thead>
                <tbody id="tbody"></tbody>
            </table>

            <div class="panel-footer"></div>
        </section>
    </article>

    <article id="cooperation" class="col-md-6">
        <section class="panel panel-info">
            <div class="panel-heading">
                <div class="panel-title"><h4>商务合作</h4></div>
            </div>

            <div class="panel-body">
                <form>
                    <label class="input-group">
                        <span class="input-group-addon">姓名：</span>
                        <input class="form-control"/>
                    </label>
                    <div class="radio">
                        <label class="radio-inline">
                            <input type="radio" name="gender"/>我是男生
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="gender"/>我是女生
                        </label>
                    </div>
                    <label class="input-group">
                        <span class="input-group-addon">电话：</span>
                        <input type="number" class="form-control"/>
                    </label>
                    <label for="xl">请选择您的学历</label>
                    <select id="xl" class="form-control">
                        <option>本科以上</option>
                        <option>本科</option>
                        <option>高中</option>
                    </select>
                </form>
            </div>

            <div class="panel-footer">
                <section class="btn-group dropdown">
                    <button class="btn btn-info">登录</button>
                    <button class="btn btn-info dropdown-toggle" data-toggle="dropdown">
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li><a href="#">注册</a></li>
                        <li><a href="#">忘记密码</a></li>
                    </ul>
                </section>
            </div>
        </section>
    </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默认就是移动端*/
@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 team = $("#team");
    let panelBody = team.find(".panel-body").eq(0);
    panelBody.find("p").eq(0).text("我们公司我们公司我们公司我们公司我们公司");
    panelBody.find("p").eq(1).text("我们公司我们公司我们公司我们公司我们公司");

    let tbody = $("#tbody");

    let tr01 = $(`<tr><td>张三</td><td>前端</td><td>11111111</td></tr>`);
    let tr02 = $(`<tr><td>李四</td><td>后端</td><td>22222222</td></tr>`);
    let tr03 = $(`<tr><td>王五</td><td>运维</td><td>33333333</td></tr>`);
    let tr04 = $(`<tr><td>赵六</td><td>设计</td><td>44444444</td></tr>`);
    tbody.append(tr01);
    tbody.append(tr02);
    tbody.append(tr03);
    tbody.append(tr04);

    let panelFooter = team.find(".panel-footer").eq(0);
    panelFooter.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
文章
阅读
粉丝