暑假答辩作品总结

网页截图：1 123 2345

678

学习了bootstrap。Bootstrap运用css，js，jq三者结合创造了一个强大的体系。这个体系以类名（class名）的方式使用，给了前端开发极大的便利。比如举个例子：你想设置一个盒子宽为50%，颜色为红色，点击时为蓝色，边框1px的细线，里面内容居中。如果没有bootstrap，你将一个个设置它的css样式工作量特别大。但是bootstrap会将这些直接写好放在他的文件夹里然后给它起一个固定的类名，你只需要到官网下载他的压缩包解压放在你自己搭建网站的文件夹里，使用时只需要给你的div设这个特定的类名方可。运用这种方法bootstrap有很多固定漂亮的样式与操作，你直接使用并按需求稍作修改即可。比如导航栏，表单，按钮，轮播图，面板，表格等等各种东西，任你组合。而且值得一提它有一套网格系统对于响应式有极大的便利和它的字体图标很好用。在实际运用中要注意bootstrap与jq版本兼容的问题。
学习了jquery。Jquery是js的简易版，它的一些语法通俗易懂，而且语句简短，将原生js的代码压缩了很多。比如jq可以轻松获取html中的各种节点只需要运用$符号，它修改html的样式也非常简单直接“.css（）”，而且很多属性直接“.”加你需要的操作就可以，还有各种事件和动画，它的语法结构特别简单。所以记住了jq的语法能省去你不少时间。但是实际运用中一定要将双引号记清楚，记住什么时候才要加。
做了答辩作品。答辩作品做的游戏公司官网，熟悉了上星期的html的各种知识，改正了自己的几个误解。一是url地址在css文件里使用第一层是css文件本身。二是translate3d(x,y,z)中的坐标轴与数学上不一样，z代表前后，y代表上下，x代表左右。三是在节点的获取叠加时不能使用“节点,节点,节点节点”的方式要一一写开。也学到了以前没用过的操作：将视频做成背景，使用bootstrap和jq写html，学习了三维的翻转。其中运用bootstrap之前一定要对你的整体网站有个大概的设计，不然类名起的特别纠结。三维空间上的反转主要是距离与角度之间的转换，你要想出之间的转换公式，而且注意在使用之前一定要给你的父级元素加上position: relative;-moz-transform-style:preserve-3d;-moz-transform:perspective(600px)；（其中-moz-与600根据自己需求设定）的语句不然实现不了三维还是二维。

part1：强大的bootstrap

先说它的网格系统，一张图让你先感受它的厉害

然后我们来具体讲讲怎么使用

首先它将页面当作一个表格，不限行数，但分为十二列，也就是说每行有十二个格子，不管屏幕怎么变它都是十二列，所以它的格子宽度会自动随着页面变化而变化，这不是一个强大的响应式么。所以在此想法上网格诞生了。语法如下：

<div class="container>//可以想象为一张表的开始

<div class="row">//可以想象为表中每一行的开始

<div class="box1 col-md-5 col-sm-6"></div>//可以想象为表中每一行的单元格，12个中占5个

<div class="box2 col-md-2 col-sm-6"></div>//可以想象为表中每一行的单元格，12个中占2个

<div class="box3 col-md-5 col-sm-6"></div>//可以想象为表中每一行的单元格，12个中占5个

</div>

<div class="row">//可以想象为表中再一行的开始

</div>

<div class="container>//可以想象为再一张表的开始

<div class="row">//可以想象为表中再一行的开始

</div>

上表中有各个类（class）名对照的大小，当屏幕从900px->700px时：box1、3从12个占5个变成了12个占6个，其他盒子也一样根据这样的规则变化，box4、5因为代码设置没变，box6、7变成占一整行。（自动脑补盒子高度不变哈）

因为一行只有12个，而变换后box1、2、3加起来18个超出了12个，所以自动挤下来一个。

代码效果如下（前提你要设边框）：

当屏幕大小从md->sm时各个div位置大小的变化

在网格的使用时经常要使用一个类名col-offset-数字，这个就是让你的盒子向右移几个单元格。

例如如果你给box3再加一个类名col-sm-3，效果将变成：

好了网格就讲到这里，大家应该会基础的使用了，get get。。。

从网格的运用中大家应该知道了bootstrap其实就是主要是对类名的使用。为了大家方便理解来举个例子：你想设置一个盒子宽为50%，颜色为红色，点击时为蓝色，边框1px的细线，里面内容居中。如果没有bootstrap，你将一个个设置它的css样式工作量特别大。但是bootstrap会将这些直接写好放在他的文件夹里然后给它起一个固定的类名，你只需要到官网下载他的压缩包解压放在你自己搭建网站的文件夹里，使用时只需要给你的div设这个特定的类名方可。运用这种方法bootstrap有很多固定漂亮的样式与操作，你直接使用并按需求稍作修改即可。比如导航栏，表单，按钮，轮播图，面板，表格等等各种东西，任你组合。

而且值得一提它的字体图标很好用。链接：http://www.runoob.com/try/demo_source/bootstrap3-glyph-icons.htm

在这里只简单讲一下一些组件的使用方法，详细的请找bootstrap教程

按钮：<button class="btn btn-warning"></button><div class="btn btn-success"></div>

效果如下：一个普通的按钮有了警告的颜色和圆角，一个盒子也变成了按钮有了成功的颜色和圆角

表单：

<div class="form-group has-error">
       <label class="col-sm-2 control-label" for="inputError">//label标签可以不写，但一般bootstrap是将其组在一起形成组件
           输入错误
       </label>
       <div class="col-sm-10">
           <input type="text" class="form-control" id="inputError">
       </div>
   </div>

运行结果：

导航栏：

<div class="navbar navbar-inverse col-md-6" role="navigation">
               <ul class="nav navbar-nav">
                    <li><a href="play.html">Java</a></li>
                    <li><a href="contact.html">ios</a></li>
                    <li><a href="contact.html">Android</a></li>
                  </ul>
               </div>

效果如下：

这些都是bootstrap的样式，组件的应用，像轮播图、分页这种涉及到网页交互的比较难，建议直接使用，如果感兴趣想要深入请自行寻找教程。

暑假答辩作品总结

猜你喜欢