day 58 bootstrap part2

bootstrap组件的官网,

https://v3.bootcss.com/components/#page-header

在bootstrap里面出了HTML和css样式之外还有很多的辅助工具,我们叫做组件

还有js文件都在里面

 

练习的作业:

 

<!DOCTYPE html>
<html lang="en">
<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 rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">
    <style>
        #h3s {
            float: right;
        }
       #last-one {
           margin-right: 110px;
           float:right;
       }
    </style>
</head>
<body>
<!--正文开始-->
<div class="container">
    <!--页面头部开始-->
    <div class="page-header">
        <h3>信息收集卡
            <small>共三步</small>
        </h3>
    </div>
<!--页面头部结束-->

    <!--进度条开始-->
    <div class="progress">
        <div class="progress-bar progress-bar-success" role="progressbar"
             aria-valuenow="35" aria-valuemin="0"
             aria-valuemax="100" style="width: 33%">1/3
            <span class="sr-only">40% Complete (success)</span>
        </div>
    </div>
    <!--进度条结束-->

    <!--面板整体开始-->
    <div class="panel panel-primary">
        <!--面板heading开始-->
        <div class="panel-heading">
            <h3 class="panel-title">基本信息
                <span id="h3s" class="glyphicon glyphicon-pushpin" aria-hidden="true"></span>
            </h3>
        </div>
        <!--面板heading结束-->

        <!--表单开始-->
        <div class="panel-body">

            <form class="form-horizontal">
                <!--输入框开始-->
                <div class="form-group">
                    <label for="inputName" class="col-xs-2 col-md-2 control-label">姓名</label>
                    <div class="col-xs-4 col-md-4">
                        <input type="email" class="form-control" id="inputName" placeholder="姓名">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPhone" class="col-xs-2 col-md-2 control-label">手机</label>
                    <div class="col-xs-4 col-md-4">
                        <input type="password" class="form-control" id="inputPhone" placeholder="手机">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputEmail3" class="col-xs-2 col-md-2 control-label">邮箱</label>
                    <div class="col-xs-4 col-md-4">
                        <input type="email" class="form-control" id="inputEmail3" placeholder="邮箱">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPassword3" class="col-xs-2 col-md-2 control-label">密码</label>
                    <div class="col-xs-4 col-md-4">
                        <input type="password" class="form-control" id="inputPassword3" placeholder="密码">
                    </div>
                </div>
                <!--输入框结束-->

                <!--头像上传开始-->
                <div class="form-group">
                    <label for="exampleInputFile" class="col-xs-2 col-md-2 control-label">头像</label>
                    <div class="col-xs-4 col-md-4">
                        <input type="file" id="exampleInputFile">
                        <p class="help-block">只支持png、jpg、jif格式。</p>
                    </div>
                </div>
                <!--头像上传结束-->
                <hr>

                <!--radio选择框开始-->
                <div class="form-group">
                    <label for="dpt" class="col-xs-2 col-md-2 control-label">属性</label>
                    <div class="col-xs-8 col-md-8">
                        <input type="radio" id="dpt" class="style-info" value="option1">
                        <span>我是一条咸鱼</span>
                    </div>

                    <div class="col-xs-9 col-md-9 ">
                        <input type="radio" class="style-info" value="option1" disabled>
                        <span>我是一个好人</span>
                    </div>

                    <div class="col-xs-4 col-xs-offset-2 col-md-4 col-md-offset-2  ">
                        <input type="radio" class="style-info" value="option1">
                        <span>我是一条翻不了身的咸鱼</span>
                    </div>
                </div>
                <!--radio选择框结束-->
            </form>
        </div>
        <!--表单结束-->
    </div>
    <!--面板整体结束-->
</div>
<!--正文结束-->

<!--最后的翻页按钮-->
<!--这是一个办法,就是button的框会有点长-->
<!--<button type="button" class="btn btn-success col-xs-1 col-xs-offset-10">下一步</button>-->
<!--还有一个办法就是使用css去设定,用padding-right去填充,或者是margin-right去填充-->
<input id="last-one" type="button" class="btn btn-success" value="下一步">
<script src="../day58/jquery-3.2.1.min.js"></script>
<script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
View Code

 

简单的考试练习题:

一、123 + ”789” 的值是______？解释为什么？ 
值为”123789” 
+可代数字运算符，可代表字符串连接符。
此时的+两侧一个是数字，一个是字符串，+就是字符串连接符，进行拼接。 
二、给定一个字符串例如：”abaasdffggghhjjkkgfddsssss3444343” ；问题如下： 
1、    字符串的字节长度  
var s = “abaasdffggghhjjkkgfddsssss3444343”
s.length
s["length"]
2、    取出指定位置的字符，如：0,3,5,9等
s[0] s[3] s[5] s[9]
s.charAt(0)    s.charAt(3)    s.charAt(5)    s.charAt(9)
3、    查找指定字符是否在以上字符串中存在，如：i，c ，b等 
s.indexOf('i')         s.indexOf('c')         s.indexOf('b')
a.includes("i")        a.includes("c")        a.includes("b")
s.search(“i”)
s.match(‘i’)
var r1=/[i]/g;        console.log(r1.test(s1))
4、    替换指定的字符，如：g替换为22,ss替换为b等操作方法
s.replace('g','22')        s.replace('ss','b')
s.replace(/g/g,"22")    s.replace(/ss/g,"b")
5、    截取指定开始位置到结束位置的字符串，如：取得1-5的字符串 
s.substring(1,5)
s.slice(1,5)
四、请写出以下代码的执行结果，并解释原因。
<script>
    var age;

    function bar(age) {

        console.log(age);            # 1
        var age = 99;
        var sex = "male";
        console.log(age);            # 2

        function age() {
            alert(123);
        }
        console.log(age);            # 3
        return 100;
    }

    result = bar(5);
    console.log(result)                # 4

    function func() {
        console.log(age)            # 5
    }

    func()
</script> 

答案：
# 1 ƒ age() {
            alert(123);
        }
# 2 99
# 3 99
# 4 100
# 5 undefined

Js代码分为两个阶段：词法分析阶段和执行阶段；
Js代码的编译阶段会找到所有的声明，并用合适的作用域将它们关联起来，这是词法作用域的核心内容；
包括变量声明(var a)和函数声明(function a(){})在内的所有声明都会在代码被执行前的编译阶段首先被处理，
过程就好像变量声明和函数声明从他们代码中出现的位置被移动到执行环境的顶部，这个过程就叫做提升

只有声明操作会被提升，赋值和逻辑操作会被留在原地等待执行

函数优先
提升操作会优先进行函数的声明
函数会首先被提升然后才是变量，重复的变量声明会被忽略，只剩下赋值操作，多个函数声明可以进行覆盖
声明的顺序是这样的：
1. 找到所有的函数声明，初始化函数体，如有同名的函数则会进行覆盖
2. 查找变量声明，初始化为undefined，如果已经存在同名的变量，就什么也不做直接略过
 

五、 指出下面thist指代的是什么？并解释一下this和$ ( this )的区别。
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
<button id="btn">click</button>

<script>
    $('#btn').on('click',function () {
        console.log(this);                # 1
        $('li').each(function () {
            console.log(this);            # 2
        })
    })
</script>

 

posted @ 2018-01-09 19:19  dream-子皿  阅读(182)  评论(0)  编辑  收藏  举报