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. CSS rem长度单位

    1. 概述 1.1 说明 rem是css3中新增的一个单位属性(font size of the root element),根据页面的根节点(html)的字体大小进行转换的单位,通过此单位属性可以进 ...

  2. 44)django-环境变量设置

    如果外面程序需要调用django,就需要设置django环境指明调用那个项目. # _*_ coding:utf-8 _*_ __author__ = "shisanjun" im ...

  3. Confluence 6 配置 简易信息聚合（RSS）

    一个 Confluence 的管理员可以配置下面的 RSS 特性: Confluence 针对 RSS 聚合返回的最大项目数量. Confluence 针对 RSS 聚合允许的最大时间周期. 上面两个 ...

  4. Java Web 开发的JavaBean + Servlet + Sql Server

    日期:2018.12.9 博客期:026 星期日 我知道对于每个人都需要对开发web进行了解,而我们常用的技术,也应该有所了解 /*<------------------->*/知识点: ...

  5. flask 中orm关系映射 sqlalchemy的查询

    flask的orm框架(SQLAlchemy)-一对多查询以及多对多查询   一对多,多对多是什么? 一对多.例如,班级与学生,一个班级对应多个学生,或者多个学生对应一个班级. 多对多.例如,学生与课 ...

  6. NHibernate入门

    这里是官方的Demo,可以看看,因为我也是通过官方的demo学习的.   https://github.com/nhibernate/nhibernate-core/tree/master/src/N ...

  7. 使用react 在页面上引用静态图片，图片不显示

    const url='../assets/logo.png'; <img src={url} alt=''/> 1.使用require <img src={require('../a ...

  8. mongoDB通过_id删除doc

    转载: 点击查看原文 做项目遇到一个需求,需要根据mongodb数据记录里面的_id字段删除相应的docs,实际使用时发现直接如下使用 db.collection('infochanges').rem ...

  9. Jmeter3.0 中文乱码的解决方法

    在Body Data中输入中文时,发现是乱码,如下图 这种情况在jmeter3.0的版本中才会产生,由于3.0中优化body data后,使用默认的字体(Consolas)不支持汉字的显示. 解决方法 ...

  10. 使用shell脚本定时采集日志数据到hdfs分布式文件系统

    1.首先对linux操作系统的crontab命令进行熟悉和了解: .crond是linux下用来周期性的执行某种任务或等待处理某些事件的一个守护进程,与windows下的计划任务类似,当安装完成操作系 ...