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. ActiveMQ-为什么需要消息中间件？

    消息中间件的优势 UNIX的进程间通信就开始运用消息队列技术,一个进程将数据写入某个特定的队列中,其它进程可以读取队列中的数据,从而实现异步通信.对于如今的分布式系统,消息队列已经演变为独立的消息中间 ...

  2. js——类型转换

      总述                   类型转换:显式.隐式(自动) 隐式转换是由编译器自动进行的,基本主要抽象操作有ToPrimitive, ToNumber, ToString, ToBoo ...

  3. 通过printf从目标板到调试器的输出

    最近在SEGGER的博客上看到Johannes Lask写的一篇关于在调试时使用printf函数从目标MCU输出信息到调试器的文章,自我感觉很有启发,特此翻译此文并推荐给各位同仁.当然限于个人水平,有 ...

  4. Confluence 6 用户宏示例 - Hello World

    下面示例显示了如何创建一个用户宏,在这个用户宏中显示文本 'Hello World!' 和任何用户在宏内容中输入的内容. Macro name helloworld Visibility Visibl ...

  5. 【JS】中ajax的URL中包含中文，后台接收乱码

    [问题]ajax提交get请求,url中参数包含中文,后台接收到显示乱码. [解决方案]前台: function getSiteInfoByName(siteName){ var res; $.aja ...

  6. vuejs项目---配置理解：

    当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面  (环境变量及其基本变量的配置) 1 2 3 4 5 6 7 8 9 10 11 12 ...

  7. LeetCode（122）：卖股票的最佳时机 II

    Easy! 题目描述: 给定一个数组,它的第 i 个元素是一支给定股票第 i 天的价格. 设计一个算法来计算你所能获取的最大利润.你可以尽可能地完成更多的交易(多次买卖一支股票). 注意:你不能同时参 ...

  8. 【sqli-labs】Less11~Less16

    学习sqli-labs的笔记,前面的笔记内容比较详细.后面的只记录关键点了. Less11: POST注入, 有回显,有错误提示 从11题起是POST注入,发现有两个输入框.用firefox的F12查 ...

  9. AI-CBV写法

    AI-CBV写法 CBV固定样式 #url.py from django.conf.urls import url from django.contrib import admin from app0 ...

  10. windows解压.tar00文件

    通常是单个文件太大分拆出来的,例如data.tar00, data.tar01, data.tar02等 cmd命令行进入几个tar0x文件所在目录,执行: copy /b data.tar0* da ...