南通web前端培训零基础班

南通web前端培训零基础班 从Bootstrap官网http：//getbootstrap.com/getting-started/#download下载 Bootstrap开源框架。Bootstrap 主要包含css、fonts和 js文件夹：css 文件夹存放的是bootstrap.css基本样式，在网页中使用命令即可；fonts 文件夹存储网页中可以使用的各种字体；js文件夹存放的是bootstrap.js等js文件，在网页中可以通过 标签来使用js组件。Bootstrap是根据移动终端优先的原则设计的。它支持响应式网页（RWD，Responsive Web Design），为了控制网页的尺寸比例和触屏缩放，需要使用命命令添加viewport元素。

设置页面流式布局，网页中的各元素会根据设备分辨率的不同而自动调整大小，但元素位置并不会发生变化。流式布局通常将页面分为12列，将网页的宽度设置为，具体代码因太多此处省略。运用Bootstrap提供的各种样式、组件和插件完成WEB前端设计。例如制作一个提交按钮，通过以下代码实现提交。

AngularJS主要用于构建单页面的动态页面的设计，更多关注的是构建 CRUD（增加Create、查询Retrieve、更新Update、删除Delete）应用，由Misko Hevery 等人在2009年创建，是一款的JS框架，被广泛应用。

AngularJS主要使用MVC的分层设计模式，将管理数据的model、应用逻辑controller和向用户显示数据的界面（view）清晰地分离开，以提高代码的易读性和可移植性，使得程序清晰易读。在 AngularJS 应用中， model被存储在各个对象的属性中，view就是文档对象模型（DOM），controller就是JS类和代码。

从网上下载AngularJS框架。将要使用的js文件复制到工程文件的js文件夹中，并在页面中使用命令引入。使用 ng-app命令在动态页面中创建模块。AngularJS 的MVC结构是基于整个具体应用的。通常在页面的容器标签中使用ng-app命令来创建具体模块，例如设置控制器controller。在网页中通过ng-controller指令设置控制器，{{text}}。再通过JS代码控制逻辑，app.controller（"testController"，function（$scope）{$scope.text = 'welcome'；}）。设置模型数据model。通过ng-model 命令动态设定模型数据model内容， {{text}}。

南通web前端培训零基础班 本文针对新一代信息技术的发展，将Bootstrap和AngularJS框架运用在WEB前端开发中，希望能对WEB前端设计的研究提供一定的参考。当然本文只是简单介绍了Bootstrap和AngularJS框架的基本应用，详细的应用有待进一步的完善。