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>

简单的考试练习题:

一、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>

day 58 bootstrap part2的更多相关文章

  1. day 58 bootstrap -part1

    我们的bootstrap主要使用都是官网里面的内容,官网里面的都整理得很完备,有需要的时候就直接去里面找即可, 关于这个bootstrap,我所理解的就是,我们前面所学的那些,从html开始一直到后面 ...

  2. day 58 关于bootstrap

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. 15、响应式布局和BootStrap 全局CSS样式知识点总结-part2

    1.表格 <div class="container"> <table class="table "> <thead> &l ...

  4. 模拟Bootstrap响应式网格系统

    Bootstrap响应式(适应于不同的终端设备).Bootstrap栅格系统是利用百分比把视口等分为12个,然后利用媒体查询,设置float属性使之并列显示 一.媒体查询 媒体查询包含一个可选的媒体类 ...

  5. 利用Bootstrap快速搭建个人响应式主页（附演示+源码）

    1.前言 我们每个程序员都渴望搭建自己的技术博客平台与他人进行交流分享,但使用别人的博客模板没有创意.做网站后台的开发人员可能了解前端,可是自己写一个不错的前端还是很费事的.幸好我们有Bootstra ...

  6. Bootstrap Metronic 学习记录（二）菜单栏

    1.简介 1)  .环境配置 2)  .提取页面 2).动态生成菜单(无限级别树) 2.系统环境配置 项目需要程序数据支撑,这里选择MVC5.0+EF6.0[SQLSERVER](不对MVC架构和SQ ...

  7. Ubuntu 14.04 编译安装 boost 1.58

    简介 Boost is a set of libraries for the C++ programming language that provide support for tasks and s ...

  8. 基于bootstrap的后台二级垂直菜单[转]

    最近做一个后台的管理项目,用到了Twitter推出的bootstrap前端开发工具包,是一个基于css3/html5的框架.花周末时间,写了一个非常简单后台的菜单.本着开源的精神,现在把它分享出来(呵 ...

  9. Bootstrap框架(基础篇)

    本文引用慕课网http://www.imooc.com/learn/141  作者大漠  讲的很详细,我没有全篇都引用,其中很多是添加了自己的一些理解. Bootstrap框架是基于JQuery 所以 ...

随机推荐

  1. 第一篇----mysql体系

    mysql体系: 解释: 调用: 1.connectors:连接器 (远程调用mysql,Native很常用的mysql远程连接工具.其它是可以调用mysql支持的一些语言和方法) mysql结构 2 ...

  2. 密码正确 mysql无法登陆 red7.3 上安装mysql5.6后登录报错ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using passswd ：yes）

    集群需要mysql存储元数据,就在前几天还运行好好的,突然就进不去了......还是太菜,遇到的bug少. 引起这种故障的原因有很多......第一个坑比较多,大部分用户也就用第一个就可以解决问题,我 ...

  3. swiper轮播图（逆向自动切换类似于无限循环）

    swiper插件轮播图,默认的轮播循序是会从右向左,第一张,第二张,第三张,然后肉眼可见是的从第三张从左到右倒回第一张,这样就会有些视觉体验不高, ,不过还是能够用swiper本身的特性更改成无限循环 ...

  4. hash·余数hash和一致性hash

    网站的伸缩性架构中,分布式的设计是现在的基本应用. 在memcached的分布式架构中,key-value缓存的命中通常采用分布式的算法 一.余数Hash     简单的路由算法可以使用余数Hash: ...

  5. Java常见runtime exception

    ArithmeticException,:算数异常ArrayStoreException,数组存储异常BufferOverflowException,编码出错异常 解决方法: 使用Eclipse开发一 ...

  6. confluence搭建破解及汉化教程

    注:本文参考了 < confluence搭建破解及汉化教程  > 本文是在yum环境搭建好,且可用联网的前提下进行的实际操作并作记录的. 关于yum本地环境搭建可以参考此文:<Cen ...

  7. Java_oracle超出打开游标的最大数的原因和解决方案

    第一步:核查Oracle数据库 的游标的最大数 处理超出打开游标的最大数异常(ORA-01000: maximum open cursors exceeded) ORA-01000_maximum_o ...

  8. mongoDB基础使用

    环境交代 操作系统: CentOS 6.8 64位 mongodb: 4.06 安装 官方下载地址:https://www.mongodb.org/dl/linux/x86_64-rhel62 阿里云 ...

  9. django中数据库的配置及相关增删改查

    ORM ORM是什么?:(在django中,根据代码中的类自动生成数据库的表也叫--code first) ORM:Object Relational Mapping(关系对象映射) 类名对应---- ...

  10. 怎么编辑PDF，如何给PDF加水印

    在使用PDF文件的时候,往往会用到PDF编辑器来修改,那么,在使用PDF编辑器修改文件的时候,想要在文件中添加水印,这该怎么操作呢,不会的小伙伴可以看看下面的文章了哦,说不定就会了. 1.打开运行PD ...