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>
简单的考试练习题:
一、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的更多相关文章
- day 58 bootstrap -part1
我们的bootstrap主要使用都是官网里面的内容,官网里面的都整理得很完备,有需要的时候就直接去里面找即可, 关于这个bootstrap,我所理解的就是,我们前面所学的那些,从html开始一直到后面 ...
- day 58 关于bootstrap
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 15、响应式布局和BootStrap 全局CSS样式知识点总结-part2
1.表格 <div class="container"> <table class="table "> <thead> &l ...
- 模拟Bootstrap响应式网格系统
Bootstrap响应式(适应于不同的终端设备).Bootstrap栅格系统是利用百分比把视口等分为12个,然后利用媒体查询,设置float属性使之并列显示 一.媒体查询 媒体查询包含一个可选的媒体类 ...
- 利用Bootstrap快速搭建个人响应式主页（附演示+源码）
1.前言 我们每个程序员都渴望搭建自己的技术博客平台与他人进行交流分享,但使用别人的博客模板没有创意.做网站后台的开发人员可能了解前端,可是自己写一个不错的前端还是很费事的.幸好我们有Bootstra ...
- Bootstrap Metronic 学习记录（二）菜单栏
1.简介 1) .环境配置 2) .提取页面 2).动态生成菜单(无限级别树) 2.系统环境配置 项目需要程序数据支撑,这里选择MVC5.0+EF6.0[SQLSERVER](不对MVC架构和SQ ...
- Ubuntu 14.04 编译安装 boost 1.58
简介 Boost is a set of libraries for the C++ programming language that provide support for tasks and s ...
- 基于bootstrap的后台二级垂直菜单[转]
最近做一个后台的管理项目,用到了Twitter推出的bootstrap前端开发工具包,是一个基于css3/html5的框架.花周末时间,写了一个非常简单后台的菜单.本着开源的精神,现在把它分享出来(呵 ...
- Bootstrap框架(基础篇)
本文引用慕课网http://www.imooc.com/learn/141 作者大漠 讲的很详细,我没有全篇都引用,其中很多是添加了自己的一些理解. Bootstrap框架是基于JQuery 所以 ...
随机推荐
- bzoj3730 震波 [动态点分治，树状数组]
传送门 思路 如果没有强制在线的话可以离线之后CDQ分治随便搞. 有了强制在线之后--可能可以二维线段树?然而我不会算空间. 然后我们莫名其妙地想到了动态点分治,然后这题就差不多做完了. 点分树有一个 ...
- 信息摘要算法之六：HKDF算法分析与实现
HKDF是一种特定的键衍生函数(KDF),即初始键控材料的功能,KDF从其中派生出一个或多个密码强大的密钥.在此我们想要描述的是基于HMAC的HKDF. 1.HKDF概述 密钥派生函数(KDF)是密码 ...
- Vue.js结合vue-router和webpack编写单页路由项目
一.前提 1. 安装了node.js. 2. 安装了npm. 3. 检查是否安装成功: 打开cmd,输入node,没有报“node不是内部或外部命令”表示安装成功node.js. 打开cmd,输入np ...
- 《剑指offer》从上往下打印二叉树
本题来自<剑指offer> 从上往下打印二叉树 题目: 从上往下打印出二叉树的每个节点,同层节点从左至右打印. 思路: 队列的思想. 先将根节点加入,当取该节点时候,依次将左右子树加入,直 ...
- CF1000G
蜜汁树形dp... 首先分析一下:他要求一条边至多只能经过两次,那么很容易会发现:从x到y这一条路径上的所有边都只会被经过一次.(如果过去再回来那么还要过去,这样就三次了,显然不合法) 那么其他能产生 ...
- 支付宝WAP支付总结
一:支付宝开放文档: 支付宝手机网站支付的开发文档: https://docs.open.alipay.com/203 二:配置应用环境: 开发者调用接口前需要先生成RSA2密钥,RSA2密钥包含应用 ...
- Scrapy库的安装(windows版)
这个是需要安装的所有文件 1. wheel pip install wheel 2. lxml http://www.lfd.uci.edu/~gohlke/pythonlibs/#lxml 3. P ...
- ReactNative——页面跳转
效果图: 进入工作目录,运行 react-native init NavigatorProject 创建项目NavigatorProject import React, { Component } f ...
- Junit4 IDEA测试学习一
1.Junit4 下载 https://github.com/junit-team/junit4/releases 4.12 还需要还导入hamcrest-core-1.3.jar 2.IDEA Te ...
- IDEA导入JAR的源代码