南通web前端培训零基础班
科迅教育
发表于:2020-03-24 16:48:47 45次浏览南通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框架的基本应用,详细的应用有待进一步的完善。
南通web前端培训零基础班原创内容,请点击 南通web前端培训
热门课程
-
南通嵌入式培训
询价
-
南通C#培训-科迅教育
询价
-
南通Python课程
询价
-
南通嵌入式开发培训价格【南通科迅教育】
询价
-
南通零基础Web前端培训
询价