活动公告当前位置:万彩娱乐平台 > 活动公告 > >

万彩娱乐平台AngularJs bootstrap搭载前台框架——基

  

[AngularJs,bootstrap搭载前台框架,AngularJs,bootstrap,bootstrap]AngularJs bootstrap搭载前台框架——基础页面

  

1.用AngularJs app种子初步搭载好框架之后就需要我们手动往里面填充一些东西了,首先打开我们的app文件夹下面的index.html,加入一些我们需要用的js和css(当然是bootstrap的),代码如下:  

  
  
  
  
  

当然要记得我们这里只是引入,还需要真正的加入这些js和css才行,具体放置位置你可以从上面的引入代码看出来,这里就不贴图了。

  

  

2.我们先做一个最简单的登录注册页面,下面是index.html中body标签中的代码:  

  
  
  
  
    
  
  
  
  
  
  

3.不要忘了我们需要修改app.js中的路由规则,具体代码如下:  

  
  
  'use strict';  // Declare app level module which depends on filters, and services  angular.module('jthink', ['jthink.filters', 'jthink.services', 'jthink.directives']).

  config(['$routeProvider', function($routeProvider) {  $routeProvider.when('/login', {templateUrl: 'partials/login.html', controller: MyCtrl2});  $routeProvider.when('/register', {templateUrl: 'partials/register.html', controller: MyCtrl2});  $routeProvider.otherwise({redirectTo: '/login'});  }]);  

  
  

4.定义好了这些规则之后我们当然不能缺少的是login.html和register.html,代码如下:  

  

login.html  

  
  
  
  
  
    
  
    
    
  
  
    
    
  
  
  
      
  
  
  
  
  
  

register.html  

  
  
  
  
  
    
  
    
    
  
  
    
    
  
  
    
    
  
  
  
    
  
  
  
  
  
  

不可缺少的还有css文件,当然这个是比较简单的,因为大部分工作bootstrap已经做完了,在app.css中加入下列布局代码:  

  
  
  /* app css stylesheet */  html,body {  height: 100%;  }  .wrap {  min-height: 100%;  height: auto !important;  height: 100%;  margin: 0 auto -80px;  }  .header {  height: 100%;  min-height: 100%;  height: auto !important;  }  .footer{  background-color: #333;  color: white;  height: 80px;  }  .container .credit {  margin: 10px 0;  }  #login .title label {  font-size: 2em;  font-weight: bold;  }  #register .title label {  font-size: 2em;  font-weight: bold;  }  
  
  

这么简单的一些代码就可以布局出一个比较像样的前台了,虽然简单了那么点,但是还是说得过去的:  

  

  

  

这都要归功于bootstrap的功劳啊,启动的时候需要nodejs启动,具体方法参照前一篇文章  
  

  

5.好了,这就差不多实现了,挺简单吧,自己试试吧,改改样式啊啥的,bootstrap的学习去官方网站中学习吧,挺容易的,下一篇该开始写我们的js了,差不多就是些controller和service了。

  

  

后续继续添加相关文章,谢谢大家对本站万彩娱乐的支持!

  

  

相关文章:  

  

AngularJs bootstrap搭载前台框架——js控制部分  
  
AngularJs bootstrap搭载前台框架——基础页面  
  
AngularJs bootstrap搭载前台框架——准备工作  
  
AngularJs bootstrap详解及示例代码  

(责任编辑:admin)

上一篇:JS的递增/递减运算符和带操作的赋值运算符的等

下一篇:javascript中typeof的使用示例

推荐内容

客户服务热线

010-400-12345

在线客服