当前位置:千赢国际官网 > 千赢网页手机版登入 > Javascript中的Prototype到底是什么,Bootstrap入门书籍

Javascript中的Prototype到底是什么,Bootstrap入门书籍

文章作者:千赢网页手机版登入 上传时间:2019-07-12

导航条

Bootstrap 使用了一些 HTML5 元素和 CSS 属性,所以需要使用 HTML5 文档类型。

Javascript也是面向对象的语言,但它是一种基于原型Prototype的语言,而不是基于类的语言。在Javascript中,类和对象看起来没有太多的区别。

导航条(navbar)和上一节介绍的Bootstrap入门书籍之(四)菜单、按钮及导航。导航(nav),就相差一个字,多了一个“条”字。其实在Bootstrap框架中他们还是明显的区别。在导航条(navbar)中有一个背景色、而且导航条可以是纯链接(类似导航),也可以是表单,还有就是表单和导航一起结合等多种形式。它们在移动设备上可以折叠(并且可开可关),且在视口(viewport)宽度增加时逐渐变为水平展开模式。

<!DOCTYPE html>
<html lang="zh-CN">
 ...
</html>

什么是prototype:

基础导航条

为了让 Bootstrap 开发的网站对移动设备友好,确保适当的绘制和触屏缩放,需要在网页的 head 之中添加 viewport meta 标签,如下所示:

function定义的对象有一个prototype属性,prototype属性又指向了一个prototype对象,注意prototype属性与prototype对象是两个不同的东西,要注意区别。在prototype对象中又有一个constructor属性,这个constructor属性同样指向一个constructor对象,而这个constructor对象恰恰就是这个function函数本身。 是不是很绕?用伪代码表示如下:

实际上,导航条和导航在外观上的差别并不是那么的大,但是在实际使用中导航条要比导航复杂得多。下面就来实现一个最基础的导航条。

<meta name="viewport" content="width=device-width, //视口宽度为设备宽度
   initial-scale=1.0, //缩放程度
   maximum-scale=1.0, //最大缩放级别(可选)
   user-scalable=no">//禁止页面缩放(可选)
var function{
prototype:prototype{
constructor:constructor == function
}
}
<div class="navbar navbar-default" role="navigation"><!--role是为了方便屏幕阅读器理解此处内容-->
 <ul class="nav navbar-nav">
 <li class="active"><a href="#">HTML</a></li>
 <li><a href="#">CSS</a></li>
 <li><a href="#">JavaScript</a></li>
 <li><a href="#">PHP</a></li>
 </ul>
</div>

千赢国际官网,Bootstrap 使用 Normalize 来建立跨浏览器的一致性。Normalize.css 是一个很小的 CSS 文件,在 HTML 元素的默认样式中提供了更好的跨浏览器一致性。

还不明白?看图吧:

可以达到的效果是这样的:

关于布局

千赢国际官网 1

宽屏:

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。

prototype的作用:

千赢国际官网 2 

img-responsive 用于img元素

这个prototype到底有什么作用呢?看下面的例子:

窄屏:

container 用于包裹页面上的内容的元素

function jb51(){
}
jb51.prototype.name = "a";
var test = new jb51();
alert(test.name)//"a";

千赢国际官网 3 

  • 行需要放在container,并用来创建列的水平组。
  • 预定义的网格类,比如 .row 和 .col-xs-4,可用于快速创建网格布局。

奇怪吧,明明没有为test设置name属性,可是为什么会有值?

在制作一个基础导航条时,主要注意以下几点:

千赢国际官网 4

这就是prototype的功劳了,uw3c中prototype属性中的name对象,在uw3c被new构造函数之后,被继承到了对象test的属性中。接着看:

1.首先在制作导航的列表( <ul class="nav"> )基础上添加类名 .navbar-nav

  • 行列可相互嵌套,嵌套后的自适应以父级元素为准,而不是设备宽度
  • 要创建三个相等的列,则使用三个 col-xs-4,要是12个列就12个col-xs-1。
var name = "js";
function jb51(name){
alert(this.name);//"css"
}
jb51.prototype.name = "css";
var test = new jb51();
test()

2.在列表外部添加一个容器(div)在这里允许的话 推荐使用 <nav> ,并且使用类名 .navbar 和 .navbar-default

<div class="container">
 <div class="row">
 <div class="col-xs-6 col-md-2 col-md-offset-1"></div>
 <div class="col-xs-6 col-md-3"></div>
 <div class="col-xs-6 col-md-3"></div>
 <div class="col-xs-6 col-md-3"></div>
 </div>
 <div class="row">...</div>
</div>
<div class="container">.... 
<!--以上代码在手机上就是两行两列,在电脑上是一行四列,其中第一列前面有空白,比其它列宽度小三分之一-->
//可使用.col-md-push-* 和 .col-md-pull-* 这种类设定显示,col-md-push-6按照我个人的理解,是在左面浮动了6列,然后再插入元素,col-md-pull-3则是在右边浮动了3列,然后从右往左插入元素

为什么alert的值不是“js”?这个过程大致如下:

3.navbar 类的主要功能就是设置左右padding和圆角等效果,通过 .navbar-default 来进行控制导航条的颜色比如还有 .navbar-inverse 。

  • 媒体查询是非常别致的"有条件的 CSS 规则"。它只适用于一些基于某些规定条件的 CSS。如果满足那些条件,则应用相应的样式。
var test={};
uw3c.call(test);

带标题、二级菜单

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
//对于所有带有 min-width: @screen-sm-min 的设备,如果屏幕的宽度小于 @screen-sm-max,则会进行一些处理。

第一步是建立一个新对象(test)。

在Web页面制作中,一般都可以在菜单前面看到有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过 .navbar-header 和 .navbar-brand 来实现,如:

关于排版

第二步将该对象(test)内置的原型对象设置为构造函数(就是uw3c)prototype 属性引用的那个原型对象。

<div class="navbar-header">
 <a href="##" class="navbar-brand">WEB开发</a>
</div>
  • 关于文本

第三步就是将该对象(test)作为this 参数调用构造函数(就是uw3c),完成成员设置等初始化工作。

当然也可以用来做logo, 中文官网描述 ,在此不进行详细描述。

<small>本行内容是在标签内</small><br>
<strong>本行内容是在标签内</strong><br>
<em>本行内容是在标签内,并呈现为斜体</em><br>
<p class="text-left">向左对齐文本</p>
<p class="text-center">居中对齐文本</p>
<p class="text-right">向右对齐文本</p>
<p class="text-muted">本行内容是减弱的</p>灰
<p class="text-primary">本行内容带有一个 primary class</p>蓝
<p class="text-success">本行内容带有一个 success class</p>绿
<p class="text-info">本行内容带有一个 info class</p>深蓝
<p class="text-warning">本行内容带有一个 warning class</p>黄
<p class="text-danger">本行内容带有一个 danger class</p>红

其中第二步中出现了一个新名词就是内置的原型对象,注意这个新名词跟prototype对象不是一回事, 为了区别我叫它inobj,inobj就指向了函数uw3c的prototype对象。在uw3c的prototype对象中出现的任何属性或者函数都可以在test对象中直接使用,这个就是JS中的原型继承了。

二级菜单自然不用多说,在上一篇博客中已经进行了详细说明,若还是不太了解的话,可以再去翻翻我的上一篇博客,我们一起来看看下面这段代码以及能实现的效果:(注意这里使用的是 navbar-inverse 反色的导航条)

Bootstrap 定义 <abbr> 元素的样式为显示在文本底部的一条虚线边框,当鼠标悬停在上面时会显示完整的文本(只要您为 <abbr> title 属性添加了文本)。为了得到一个更小字体的文本,请添加 .initialism 到 <abbr>。

通常,这样创建一个对象:

<div class="navbar navbar-inverse" role="navigation">
 <div class="navbar-header">
 <a href="##" class="navbar-brand">WEB开发</a>
 </div>
 <ul class="nav navbar-nav">
 <li class="active"><a href="#">HTML</a></li>
 <li><a href="#">CSS</a></li>
 <li class="dropdown" >
 <a href="#" class="dropdown-toggle" data-toggle="dropdown">JavaScript
 </a>
 <ul class="dropdown-menu">
 <li><a href="#">jQuery</a></li>
 <li><a href="#">Vue</a></li>
 <li><a href="#">NodeJS</a></li>
 </ul>
 </li>
 <li ><a href="#">PHP</a></li>
 </ul>
</div>
<abbr title="World Wide Web">WWW</abbr><br>
<abbr title="Real Simple Syndication" class="initialism">RSS</abbr>
function person(name){
this.sayHi = function(){
alert('hi '   this.name);
}
this.name = name;
}
var p = new person("dan");
p.sayHi(); 

效果如下:

  • 使用 <address> 标签,您可以在网页上显示联系信息。
  • 使用<Blockqoute>标签作为引用

以上,使用new关键字,通过对象(函数也是特殊对象)创建一个对象实例。

千赢国际官网 5 

<blockquote>这是一个带有源标题的引用。<small>Someone famous in Source Title</small></blockquote>

在基于类的语言中,属性或字段通常都是在类中事先定义好了,但在Javascript中,在创建对象之后还可以为类添加字段。

带表单

  • list-unstyled用于未定义样式列表ul,list-inline用于水平列表ul
  • pre-scrollable使pre可滚动
  • <code>内联显示代码,<pre>显示多行代码
function animal(){}
var cat = new animal();
cat.color = "green"; 

我们常常在导航条中都能看到搜索表单,比如知乎,新浪微博等等都具有,Bootstrap框架当然不可能缺掉这样的东西。使用方法也非常简单:

关于表格

以上,color这个字段只属于当前的cat实例。
对于后加的字段,如果想让animal的所有实例都拥有呢?

在Bootstrap框架中提供了一个 .navbar-form ,在 .navbar 容器中放置一个带有 .navbar-form 类名的表单;再添加 .navbar-left 让表单左浮动,更好实现对齐。

千赢国际官网 6

--使用Prototype
function animal(){}
animal.prototype.color= "green";
var cat = new animal();
var dog = new animal();
console.log(cat.color);//green
console.log(dog.color);//green 

在Bootstrap中,还提供了 .navbar-right 样式,让元素在导航条靠右对齐。

千赢国际官网 7

通过Prototype不仅可以添加字段,还可以添加方法。

把这段代码复制到代码当中看看效果吧:

通过把任意的 .table 包在 .table-responsive class 内,您可以让表格水平滚动以适应小型设备(小于 768px)。当在大于 768px 宽的大型设备上查看时,您将看不到任何的差别。

function animal(){}
animal.prototype.color= "green";
var cat = new animal();
var dog = new animal();
console.log(cat.color);//green
console.log(dog.color);//green
animal.prototype.run = funciton(){
console.log("run");
}
dog.run(); 
<form action="##" class="navbar-form navbar-left" rol="search">
 <div class="form-group">
 <input type="text" class="form-control" placeholder="请输入关键词" />
 </div>
 <button type="submit" class="btn btn-default">搜索</button>
</form>
<div class="table-responsive">
 <table class="table">
 <caption>响应式表格布局</caption>
 <thead>
 <tr>
 <th>产品</th>
 <th>付款日期</th>
 <th>状态</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>产品1</td>
 <td>23/11/2013</td>
 <td>待发货</td>
 </tr>
 </tbody>
 </table>
</div> 

原来通过prototype属性,在创建对象之后还可以改变对象的行为。
比如,可以为数组这个特殊对象添加一个方法。

本文由千赢国际官网发布于千赢网页手机版登入,转载请注明出处:Javascript中的Prototype到底是什么,Bootstrap入门书籍

关键词: 千赢国际官网 千亿国际qy8.vip