bootstrap组件的官网,

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

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

还有js文件都在里面

练习的作业:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>作业</title>
  8.     <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">
  9.     <style>
  10.         #h3s {
  11.             float: right;
  12.         }
  13.        #last-one {
  14.            margin-right: 110px;
  15.            float:right;
  16.        }
  17.     </style>
  18. </head>
  19. <body>
  20. <!--正文开始-->
  21. <div class="container">
  22.     <!--页面头部开始-->
  23.     <div class="page-header">
  24.         <h3>信息收集卡
  25.             <small>共三步</small>
  26.         </h3>
  27.     </div>
  28. <!--页面头部结束-->
  29.  
  30.     <!--进度条开始-->
  31.     <div class="progress">
  32.         <div class="progress-bar progress-bar-success" role="progressbar"
  33.              aria-valuenow="35" aria-valuemin="0"
  34.              aria-valuemax="100" style="width: 33%">1/3
  35.             <span class="sr-only">40% Complete (success)</span>
  36.         </div>
  37.     </div>
  38.     <!--进度条结束-->
  39.  
  40.     <!--面板整体开始-->
  41.     <div class="panel panel-primary">
  42.         <!--面板heading开始-->
  43.         <div class="panel-heading">
  44.             <h3 class="panel-title">基本信息
  45.                 <span id="h3s" class="glyphicon glyphicon-pushpin" aria-hidden="true"></span>
  46.             </h3>
  47.         </div>
  48.         <!--面板heading结束-->
  49.  
  50.         <!--表单开始-->
  51.         <div class="panel-body">
  52.  
  53.             <form class="form-horizontal">
  54.                 <!--输入框开始-->
  55.                 <div class="form-group">
  56.                     <label for="inputName" class="col-xs-2 col-md-2 control-label">姓名</label>
  57.                     <div class="col-xs-4 col-md-4">
  58.                         <input type="email" class="form-control" id="inputName" placeholder="姓名">
  59.                     </div>
  60.                 </div>
  61.                 <div class="form-group">
  62.                     <label for="inputPhone" class="col-xs-2 col-md-2 control-label">手机</label>
  63.                     <div class="col-xs-4 col-md-4">
  64.                         <input type="password" class="form-control" id="inputPhone" placeholder="手机">
  65.                     </div>
  66.                 </div>
  67.                 <div class="form-group">
  68.                     <label for="inputEmail3" class="col-xs-2 col-md-2 control-label">邮箱</label>
  69.                     <div class="col-xs-4 col-md-4">
  70.                         <input type="email" class="form-control" id="inputEmail3" placeholder="邮箱">
  71.                     </div>
  72.                 </div>
  73.                 <div class="form-group">
  74.                     <label for="inputPassword3" class="col-xs-2 col-md-2 control-label">密码</label>
  75.                     <div class="col-xs-4 col-md-4">
  76.                         <input type="password" class="form-control" id="inputPassword3" placeholder="密码">
  77.                     </div>
  78.                 </div>
  79.                 <!--输入框结束-->
  80.  
  81.                 <!--头像上传开始-->
  82.                 <div class="form-group">
  83.                     <label for="exampleInputFile" class="col-xs-2 col-md-2 control-label">头像</label>
  84.                     <div class="col-xs-4 col-md-4">
  85.                         <input type="file" id="exampleInputFile">
  86.                         <p class="help-block">只支持png、jpg、jif格式。</p>
  87.                     </div>
  88.                 </div>
  89.                 <!--头像上传结束-->
  90.                 <hr>
  91.  
  92.                 <!--radio选择框开始-->
  93.                 <div class="form-group">
  94.                     <label for="dpt" class="col-xs-2 col-md-2 control-label">属性</label>
  95.                     <div class="col-xs-8 col-md-8">
  96.                         <input type="radio" id="dpt" class="style-info" value="option1">
  97.                         <span>我是一条咸鱼</span>
  98.                     </div>
  99.  
  100.                     <div class="col-xs-9 col-md-9 ">
  101.                         <input type="radio" class="style-info" value="option1" disabled>
  102.                         <span>我是一个好人</span>
  103.                     </div>
  104.  
  105.                     <div class="col-xs-4 col-xs-offset-2 col-md-4 col-md-offset-2  ">
  106.                         <input type="radio" class="style-info" value="option1">
  107.                         <span>我是一条翻不了身的咸鱼</span>
  108.                     </div>
  109.                 </div>
  110.                 <!--radio选择框结束-->
  111.             </form>
  112.         </div>
  113.         <!--表单结束-->
  114.     </div>
  115.     <!--面板整体结束-->
  116. </div>
  117. <!--正文结束-->
  118.  
  119. <!--最后的翻页按钮-->
  120. <!--这是一个办法,就是button的框会有点长-->
  121. <!--<button type="button" class="btn btn-success col-xs-1 col-xs-offset-10">下一步</button>-->
  122. <!--还有一个办法就是使用css去设定,用padding-right去填充,或者是margin-right去填充-->
  123. <input id="last-one" type="button" class="btn btn-success" value="下一步">
  124. <script src="../day58/jquery-3.2.1.min.js"></script>
  125. <script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>
  126. </body>
  127. </html>

简单的考试练习题:

  1. 一、123 + ”789” 的值是______？解释为什么？
  2. 值为”123789”
  3. +可代数字运算符，可代表字符串连接符。
  4. 此时的+两侧一个是数字，一个是字符串，+就是字符串连接符，进行拼接。
  5. 二、给定一个字符串例如：”abaasdffggghhjjkkgfddsssss3444343” ；问题如下：
  6. 1、    字符串的字节长度
  7. var s = “abaasdffggghhjjkkgfddsssss3444343”
  8. s.length
  9. s["length"]
  10. 2、    取出指定位置的字符，如：0,3,5,9等
  11. s[0] s[3] s[5] s[9]
  12. s.charAt(0)    s.charAt(3)    s.charAt(5)    s.charAt(9)
  13. 3、    查找指定字符是否在以上字符串中存在，如：i，c ，b等
  14. s.indexOf('i')         s.indexOf('c')         s.indexOf('b')
  15. a.includes("i")        a.includes("c")        a.includes("b")
  16. s.search(“i”)
  17. s.match(‘i’)
  18. var r1=/[i]/g;        console.log(r1.test(s1))
  19. 4、    替换指定的字符，如：g替换为22,ss替换为b等操作方法
  20. s.replace('g','22')        s.replace('ss','b')
  21. s.replace(/g/g,"22")    s.replace(/ss/g,"b")
  22. 5、    截取指定开始位置到结束位置的字符串，如：取得1-5的字符串
  23. s.substring(1,5)
  24. s.slice(1,5)
  1. 四、请写出以下代码的执行结果，并解释原因。
  2. <script>
  3.     var age;
  4.  
  5.     function bar(age) {
  6.  
  7.         console.log(age);            # 1
  8.         var age = 99;
  9.         var sex = "male";
  10.         console.log(age);            # 2
  11.  
  12.         function age() {
  13.             alert(123);
  14.         }
  15.         console.log(age);            # 3
  16.         return 100;
  17.     }
  18.  
  19.     result = bar(5);
  20.     console.log(result)                # 4
  21.  
  22.     function func() {
  23.         console.log(age)            # 5
  24.     }
  25.  
  26.     func()
  27. </script> 
  28.  
  29. 答案：
  30. # 1 ƒ age() {
  31.             alert(123);
  32.         }
  33. # 2 99
  34. # 3 99
  35. # 4 100
  36. # 5 undefined
  37.  
  38. Js代码分为两个阶段：词法分析阶段和执行阶段；
  39. Js代码的编译阶段会找到所有的声明，并用合适的作用域将它们关联起来，这是词法作用域的核心内容；
  40. 包括变量声明(var a)和函数声明(function a(){})在内的所有声明都会在代码被执行前的编译阶段首先被处理，
  41. 过程就好像变量声明和函数声明从他们代码中出现的位置被移动到执行环境的顶部，这个过程就叫做提升
  42.  
  43. 只有声明操作会被提升，赋值和逻辑操作会被留在原地等待执行
  44.  
  45. 函数优先
  46. 提升操作会优先进行函数的声明
  47. 函数会首先被提升然后才是变量，重复的变量声明会被忽略，只剩下赋值操作，多个函数声明可以进行覆盖
  48. 声明的顺序是这样的：
  49. 1. 找到所有的函数声明，初始化函数体，如有同名的函数则会进行覆盖
  50. 2. 查找变量声明，初始化为undefined，如果已经存在同名的变量，就什么也不做直接略过
  51.  
  52.  
  53. 五、 指出下面thist指代的是什么？并解释一下this和$ ( this )的区别。
  54. <body>
  55. <ul>
  56.     <li>1</li>
  57.     <li>2</li>
  58.     <li>3</li>
  59.     <li>4</li>
  60.     <li>5</li>
  61. </ul>
  62. <button id="btn">click</button>
  63.  
  64. <script>
  65.     $('#btn').on('click',function () {
  66.         console.log(this);                # 1
  67.         $('li').each(function () {
  68.             console.log(this);            # 2
  69.         })
  70.     })
  71. </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. [PHP]session回收机制及php.ini session生命期

    由于PHP的工作机制,它并没有一个daemon线程,来定时地扫描session信息并判断其是否失效.当一个有效请求发生时,PHP会根据全局变量 session.gc_probability/sessi ...

  2. hbase搭建

    0. 软件版本下载 http://mirror.bit.edu.cn/apache/hbase/   1. 集群环境 Master 172.16.11.97 Slave1 172.16.11.98 S ...

  3. 虚拟机时间同步14 Aug 04:09:18 ntpdate[2941]: no server suitable for synchronization found

    因为虚拟机经常挂起,所以需要时间同步 [root@slave1 /root]$ cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime cp: over ...

  4. python中的zip、map、reduce 、lambda、filter函数的使用

    飞机票 lambda函数 lambda只是一个表达式,函数体比def简单很多. lambda的主体是一个表达式,而不是一个代码块.仅仅能在lambda表达式中封装有限的逻辑进去. lambda表达式是 ...

  5. Ubuntu16.04安装JDK8与Tomcat7

      本篇教程在示例步骤中使用了以下版本的软件.操作时,请您以实际软件版本为准. 操作系统:Ubuntu 16.04.3 LTS (GNU/Linux 4.4.0-105-generic x86_64) ...

  6. Confluence 6 通过 SSL 或 HTTPS 运行 - 为 HTTPS 修改你的 Confluence 基础 URL

    在你的浏览器中,进入  > 基本配置(General Configuration). 单击 编辑(Edit). 修改服务器的基础 URL 为 HTTPS.请参考文档  configuring t ...

  7. Confluence 6 站点高级自定义

    你可以继续编辑的全局布局文件来继续更新你的主面板.请查看 Customizing the Confluence Dashboard 页面来获得更多有关的信息.你需要具有一些基本的Velocity 知识 ...

  8. Linux磁盘与文件系统管理笔记

    ### Linux磁盘与文件系统管理 linux 最传统的文件系统格式是EXT2,centos7 默认文件系统是xfs(日志式文件系统) 磁盘的组成: 盘片 机械手臂 主轴马达 (机械硬盘) 磁盘格式 ...

  9. Zookeeper安装（本地，伪分布式，集群）

    概述 ZooKeeper是一个分布式开源框架,提供了协调分布式应用的基本服务,它向外部应用暴露一组通用服务——分布式同步(Distributed Synchronization).命名服务(Namin ...

  10. 弹框勾选datatable中的数据，点击保存后添加到另一个表中，同一个页面

    需求描述:做编辑的时候,点击添加按钮,弹出数据表table2,勾选弹出框中的数据,点击保存后能够添加到table1中,并且已经被添加到table1中的数据,在弹出框中显示已选,checkbox隐藏:t ...