Web前端知识(五)

2021-09-10 17:03:06 浏览数 (1)

4.2.1.jq其它牛逼功能补充(压轴)

4.2.1.1.attr()

- 基本使用

- 综合案例-美女相册

4.2.1.2.index()

- 基本使用

- 综合案例-tab选项卡

4.2.1.3.each()

- 基本使用

代码语言：javascript复制
<meta </metacharset="UTF-8">

   



    <script </scriptsrc='js/jquery-3.1.1.js'>

   



        $(function () {

            /*1.遍历数组*/

            var array = ["gxq", "xmg", 20];

            $.each(array, function (index, value) {

                console.log(index, value);

            });



            /*2.遍历对象*/

            var obj = {

                name: "gxq",

                age: 20

            };

            $.each(obj, function (key, value) {

                console.log(key, value);

            })



            /*3.遍历结点*/

            $('span').each(function (index,ele) {

                var text = $(ele).text();

                console.log(index,text);

            });





        });

   









我是一个span1

我是一个span2

我是一个span3

我是一个span4

我是一个span5

4.2. Bootstrap框架

4.2.1.为什么要学习BootStarp

4.2.2. BootStarp概述

4.2.3. BootStarp基本使用

4.2.3.1.下载
4.2.3.2.目录结构

4.2.4.BootStrap实战

4.2.1.起步

找到bs中的模板

4.2.2.全局CSS样式
4.2.2.1.按钮和图片
4.2.2.2. 配模适配(响应式)
4.2.2.2.1.移动设备设置

在 Bootstrap 2 中，我们对框架中的某些关键部分增加了对移动设备友好的样式。而在 Bootstrap 3 中，我们重写了整个框架，使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。也就是说，Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。

为了确保适当的绘制和触屏缩放，需要在 之中添加 viewport 元数据标签。

<meta< span=""> name="viewport" content="width=device-width, initial-scale=1"></meta<>

在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！

<meta< span=""> name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"></meta<>

以上只是一个初级的模板，要想适配所有屏幕，还需要将代码放在容器中

4.2.2.2.2.布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。

.container 类用于固定宽度并支持响应式布局的容器。

<div< span=""> class="container"> ... </div<>

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

<div< span=""> class="container-fluid"> ... </div<>

代码实战:

需求:页面上的商品展示，在PC端，一行显示6个，一行显示4个，一行显示2个

4.2.2.3.栅格系统

bootstrap将每一行分成12份

一行显示6个，每行占2份

一行显示2个 每行占6份

根据上网设备区分，它是怎么知道，你是上网设备呢？

媒体查询，会自动判断

参数如下:

假如大屏幕,每行显示6个 超大电脑,屏幕分辨率>1200 使用: col-lg-2 假如屏幕小点,每行显示4个 992<屏幕分辨率<1200 使用: col-md-3 再小点,每行显示2个 768<屏幕分辨率<992 使用: col-sm-6 继续小,每行显示1个 屏幕分辨率<768 使用:col-xs-12

代码实战:

<< span="">div class="container"> << span="">div style="border: 1px solid red;">1div> << span="">div style="border: 1px solid red;">1div> << span="">div style="border: 1px solid red;">1div> << span="">div style="border: 1px solid red;">1div> << span="">div style="border: 1px solid red;">1div> << span="">div style="border: 1px solid red;">1div> << span="">div style="border: 1px solid red;">1div> << span="">div style="border: 1px solid red;">1div> << span="">div style="border: 1px solid red;">1div> << span="">div style="border: 1px solid red;">1div> << span="">div style="border: 1px solid red;">1div> << span="">div style="border: 1px solid red;">1div>div>

【思考】:如果一行显示12个

需求:

1)每行显示12个 col-lg

2)每行显示4个 col-md

3)每行显示2个 col-sm

4)每行显示1个 col-sx

4.2.3.组件
4.2.3.1.导航条
4.2.4.JavaScript插件
4.2.4.1.tab标签页
4.2.4.2.弹出框
4.2.4.3.轮播图

实战代码:

代码语言：javascript复制
<div class="container">
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- 指示器 -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="images/nav_01.jpg" alt="...">
            </div>
            <div class="item">
                <img src="images/nav_02.jpg" alt="...">
                <div class="carousel-caption">
                  <p>您们牛逼吗?</p>
                    <button>肯定牛逼呀</button>
                </div>
            </div>
            <div class="item ">
                <img src="images/nav_03.jpg" alt="...">
            </div>
        </div>

        <!-- 控制 -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>
4.2.5BootStrap项目
4.2.5.1.搭建基本框架
4.2.5.2.添加导航条

- 删除多余的部分

代码语言：javascript复制
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

修改文字:

添加下划线

处理导航条细节

l添加 .navbar-fixed-top 类可以让导航条固定在顶部

注意:固定的导航条会遮住页面上的其他内容,可给设置padding

l包含一个.container或.container-fluid容器,从而让导航条居中显示或者自适应显示

l添加.navbar-inverse可以改变导航栏显示的背景颜色

导航条居中:

导航条固定在顶部

导航条背景色-反色

4.2.5.3.焦点图

基本代码:

代码语言：javascript复制
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="images/nav_01.jpg" alt="...">
        </div>
        <div class="item">
            <img src="images/nav_02.jpg" alt="...">
            <div class="carousel-caption">
                ...
            </div>
        </div>
        <div class="item">
            <img src="images/nav_01.jpg" alt="...">
        </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

观察发现，轮播图好像往上走了一点，被网页的头部遮挡住了，我们肿么办呢?

4.2.5.4.中间区域
代码语言：javascript复制
<!--中间部分-->
<div id="main">
    <div class="container-fluid">
        <div class="row">
                <div class="col-md-4">
                    <img src="images/apple.png">
                    <h2>iOS学院</h2>
                    <p>iOS学院，又称大神学院，学院内优秀学员比比皆是,不断挑战着业界薪资神话。学院的每一个学生都十分的牛逼,他们的梦想是用"指尖改变世界",励志做"中国的乔布斯"。</p>
                    <button class="btn btn-danger">咨询一下</button>
                </div>
                <div class="col-md-4">
                    <img src="images/java.png" alt="">
                    <h2>Java学院</h2>
                    <p>Java学院,学院的每一个学生也很牛逼,他们的梦想是通过代码改变自己,终极目标:"瞬间高富帅,赢取白富美"。</p>
                    <button class="btn btn-danger">咨询一下</button>
                </div>
                <div class="col-md-4">
                    <img src="images/web.png" alt="">
                    <h2>网页UI学院</h2>
                    <p>网页UI学院,又称女神学院。学院每个学生的梦想是:设计出能改变世界的UI界面,成为其他两大学院男生心目中的女神。</p>
                    <button class="btn btn-danger">咨询一下</button>
                </div>
            </div>
        </div>
</div>

调整图片大小和p的首行缩进和内容居中(文字和图片)

代码语言：javascript复制
#main
{
    text-align: center;
    padding-top: 20px;
}
#main  .container-fluid .row .col-md-4 img
{
    width: 140px;
}
#main  .container-fluid .row .col-md-4  p
{
    text-indent: 10%;
}
4.2.5.5.底部区域

1)tab选项卡

代码语言：javascript复制

<!--下部分-->

<div id="tabBar">

    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">iOS学院</a></li>
        <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Java学院</a></li>
        <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">UI学院</a></li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="home">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-8">
                        <h2>iOS学院史上最具逼格</h2>
                        <p>iOS学院，又称大神学院，学院内优秀学员比比皆是,不断挑战着业界薪资神话。学院的每一个学生都十分的牛逼,他们的梦想是用"指尖改变世界",励志做"中国的乔布斯"。</p>
                    </div>
                    <div class="col-md-4">
                        <img src="images/safari-logo.jpg" alt="">
                    </div>
                </div>
            </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="profile">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-4">
                        <img src="images/safari-logo.jpg" alt="">
                    </div>
                    <div class="col-md-8">
                        <h2>iOS学院史上最具逼格</h2>
                        <p>iOS学院，又称大神学院，学院内优秀学员比比皆是,不断挑战着业界薪资神话。学院的每一个学生都十分的牛逼,他们的梦想是用"指尖改变世界",励志做"中国的乔布斯"。</p>
                    </div>
                </div>
            </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="messages">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-8">
                        <h2>iOS学院史上最具逼格</h2>
                        <p>iOS学院，又称大神学院，学院内优秀学员比比皆是,不断挑战着业界薪资神话。学院的每一个学生都十分的牛逼,他们的梦想是用"指尖改变世界",励志做"中国的乔布斯"。</p>
                    </div>
                    <div class="col-md-4">
                        <img src="images/safari-logo.jpg" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

2）版权部分

代码语言：javascript复制


<< span="">div id="banquan">
    << span="">p class="pull-left">© 2015 广州粤嵌科技p>
    << span="">p class="pull-right">回到顶部p>
div>
bootstrap html 容器

0 人点赞