前端开发利器: Bootstrap + AngularJS

2023-11-04

概述

在HTML5盛行的互联网时代,涌现诸多的前端html/css/js框架,基于其 适用范围、licence、发展前景等因素,本人对比总结出其中的两个佼佼者,分别是侧重页面美化展现的 Bootstrap 和侧重页面逻辑控制的 AngularJS ,基于 Bootstrap + AngularJS 创建HTML5应用,定不会让你失望,甚至让你兴奋至极!

PS:唯一的遗憾是对不支持HTML5的浏览器支持不好,毕竟此两件神器都是基于HTML5的。

Bootstrap

Bootstrap中包含了丰富的Web组件,根据这些组件,可以快速的搭建一个漂亮、功能完备的网站。其中包括以下组件:
下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、警告对话框、进度条、媒体对象等

Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。[1] 它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。[2] 国内一些移动开发者较为熟悉的框架,如WeX5前端开源框架等,也是基于Bootstrap源码进行性能优化而来。Bootstrap是基于HTML5和CSS3开发的,它在jQuery的基础上进行了更为个性化和人性化的完善,形成一套自己独有的网站风格,并兼容大部分jQuery插件。

推荐一个bootstrap的学习网站:http://www.runoob.com/bootstrap/bootstrap-environment-setup.html

推荐一个可视化的设计bootstrap页面的工具:http://www.ibootstrap.cn/


AngularJS

AngularJS试图成为WEB应用中的一种端对端的解决方案。这意味着它不只是你的WEB应用中的一个小部分,还是一个完整的端对端的解决方案。这会让AngularJS在构建一个CRUD(增加Create、查询Retrieve、更新Update、删除Delete)的应用时显得很“固执”(原文为 opinionated,意指没有太多的其他方式)。但是,尽管它很“固执”,它仍然能确保它的“固执”只是在你构建应用的起点,并且你仍能灵活变动。AngularJS的一些出众之处如下:
构建一个CRUD应用可能用到的全部内容包括:数据绑定、基本模板标识符、表单验证、路由、深度链接、组件重用、依赖注入。

AngularJS应用的解析

本节描述AngularJS应用程序的三个组成部分,并解释它们如何映射到模型-视图-控制器设计模式:

模板(Templates)

模板是您用HTML和CSS编写的文件,展现应用的视图。 您可给HTML添加新的元素、属性标记,作为AngularJS编译器的指令。 AngularJS编译器是完全可扩展的,这意味着通过AngularJS您可以在HTML中构建您自己的HTML标记!

应用程序逻辑(Logic)和行为(Behavior)

应用程序逻辑和行为是您用JavaScript定义的控制器。AngularJS与标准AJAX应用程序不同,您不需要另外编写侦听器或DOM控制器,因为它们已经内置到AngularJS中了。这些功能使您的应用程序逻辑很容易编写、测试、维护和理解。

模型数据(Data)

模型是从AngularJS作用域对象的属性引申的。模型中的数据可能是Javascript对象、数组或基本类型,这都不重要,重要的是,他们都属于AngularJS作用域对象。

AngularJS通过作用域来保持数据模型与视图界面UI的双向同步。一旦模型状态发生改变,AngularJS会立即刷新反映在视图界面中,反之亦然。

此外,AngularJS还提供了一些非常有用的服务特性

  1. 底层服务包括 HTTP,依赖注入,XHR、缓存、URL路由和浏览器抽象服务。
  2. 您还可以扩展和添加自己特定的应用服务。
  3. 这些服务可以让您非常方便的编写WEB应用。

推荐一个angularjs的学习网站:http://www.runoob.com/angularjs/angularjs-tutorial.html

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

前端开发利器: Bootstrap + AngularJS 的相关文章

  • Human Resource Machine 全成就通关 第41关

    HUMAN RESOURCE MACHINE PROGRAM COMMENT 0 a INBOX JUMPZ d COPYTO 24 b BUMPUP 24 JUMP a c COPYFROM 22 OUTBOX COPYFROM 24 C
  • 面试问到一个,让你写一下朋友圈点赞功能的测试用例!记录一下

    给你一个朋友圈点赞的功能 写出测试用例 UI 点击操作栏 是否正常弹出气泡 是否正常收回 是否流畅 样式是否与需求保持一致 未赞时 点击 点赞 样式变为已赞 已赞时 点击 取消 样式变为未赞 功能 给某一朋友的朋友圈进行点赞 检查接口 gt
  • QT串口 QSerialPort的使用与粘包处理

    1 在工程的pro文件中加入串口模块 QT serialport 2 添加头文件 include
  • CS231n——机器学习算法——线性分类(下:Softmax及其损失函数)

    在前两篇笔记中 基于线性分类上 线性分类中继续记笔记 1 Softmax分类器 SVM和Softmax分类器是最常用的两个分类器 Softmax的损失函数与SVM的损失函数不同 对于学习过二元逻辑回归分类器的读者来说 Softmax分类器就
  • Python就该这样学,我是如何2个月快速掌握Python的!学习大纲+学习方式+学习资料 汇总!

    一 学习建议 1 找到自己感兴趣的方向 并且结合市场需求进行选择 Python的应用范围 测试运维web人工智能大数据爬虫及数据分析办公自动化 2 学习过程中一定要勤加练习 并且尝试去使用学习过的内容实现一些简答的功能 遇到技术问题不要慌
  • vscode保存以后或者切换文件以后卡顿,代码提示卡顿

    主要原因 可能是因为你们装了这个扩展 导致vscode会对所有文件进行格式化 一般是开启了vscode保存快捷键格式化以后才会出现这个问题 解决方案 把这个快捷键改一下就好 一般问题是显示什么 正在启动格式化程序 然后每切换一个页面都要改一
  • 网络分析工具Wireshark Network Analyzer

    监听端口10001过滤设置 port 10001
  • go: 配置 vim 高亮插件

    在早期的 golang 源代码包里面是有 vim 插件的 但是呢 到了1 4的源码包的时候 就删除了 vim 插件 所以我们需要从 1 3 3 版本的代码中获得 vim配置 一 官网下载 可以从 golang 官网 Downloads Th
  • date到期(逾期)提醒的逻辑分析,例如快到一年提前一个月提醒

    需求 如快到一年时 提前一个月进行提醒 伪代码 create date x expire date 过期的肯定不用管 expire date m tip date tip date 就是提示开始的时间 所以这个sql大概应该这么写 crea
  • 解决由于已经达到 MaxReports 限制,没有写入 apport 报告的错误

    解决由于已经达到 MaxReports 限制 没有写入 apport 报告的错误 现将info文件夹更名 sudo mv var lib dpkg info var lib dpkg info old 再新建一个新的info文件夹 sudo
  • 初识Qt,几种写界面的方法

    1 我们可以直接在新建项目中选择Application中的Qt Widgets Application 此时Qt会为我们直接生成 ui文件 以及对应得 h头文件 cpp源文件 那么我们需要做的就只是在ui的设计下添加一些我们想让界面拥有的东
  • 重置或修改系统(Linux/windows/宝塔)密码

    一 linux忘记密码 3步重置root密码 虚拟机多了之后 root密码就不好记住了 忘了密还有这种方法修改哦 1 在启动项界面按 e 进入修改页面 2 找到linux16这一行 在末尾添加 rd break 3 再按Ctrl X进入单用
  • 浏览器中输入url请求之后发生的事情?

    一 浏览器查找域名的IP地址 1 请求一旦发起 比如 www baidu com 浏览器第一件事就是 解析这个域名 浏览器先查看本地硬盘的hosts文件 看看其中有没有和这个域名对应的规则 如果有的话 就直接使用hosts文件里面的ip地址
  • Java Excel导出复杂excel表格样式之ExcelUtil工具类

    Java Excel导出包括普通导出及复杂表格样式 主要是对于需要进行行列合并的列进行特殊处理 计算清楚起始行 结束行 起始列 结束列 普通导出可以是所有列 也可以是包含某些列 或者排除某些列 1 效果图 2 原理 如对于上图中的覆盖能力
  • java 文件拷贝的四种方式

    1 java 移动文件的方式有几种 在 Java 中 可以使用多种方法来移动文件 使用 java nio file Files 类的 move 方法 import java nio file Files import java nio fi
  • 1. AJAX: 2. JSON

    内容 1 AJAX 2 JSON AJAX 1 概念 ASynchronous JavaScript And XML 异步的JavaScript 和 XML 1 异步和同步 客户端和服务器端相互通信的基础上 客户端必须等待服务器端的响应 在
  • Android RecyclerView实现树形列表

    前段时间公司有个项目 需要展示客户关系的树形列表 当时网上找了一些资料 有些觉得挺复杂的 有些测试下来有bug 最终决定自己解决 最底下有demo 需要源码的同学可以下载 效果图 带节点的展开与收缩 并且可以实现项的单选 选中项字体为蓝色
  • Mac office 字体和字号显示问题

    Sierra英文的操作系统 word的没有常见的 宋体 等字体选项 而且字号的单位只有磅数 这时可以通过修改word默认的编辑语言解决 打开word的偏好设置 点击 East Asian Language 选择下拉菜单中的中文选项 重启之后
  • UPF learning4: supply power network 相关

    Supply network包含了下面3种元素 supply nets 电线 supply ports 插座 和power switch 开关 create supply port 创建一根电源 create supply net 创建一根

随机推荐

  • android 启动过程中如何清理cache,android 开发过程中涉及到的清除缓存操作

    标签 android 开发过程中会遇到很多缓存 常常使人摸不清楚 这里总结一下 希望下次遇到缓存相关问题能有所帮助 Clean Project 在这里插入图片描述 其中执行 clean 时会找到根项目和所有子项目的 clean task 所
  • 通过Maven命令创建Web项目

    1 创建Web项目 mvn archetype create DgroupId com demo 项目组标识 DartifactId omss 项目名称 DarchetypeArtifactId maven archetype webapp
  • 火爆全网的chat GPT 在煤矿智能问答方面的应用

    测试了19个煤矿智能化 综采方面的问题 甚至会自己写代码 看看chatGPT表现如何 什么是智能化煤矿 什么是记忆割煤 目前记忆割煤都存在哪些问题 煤矿数字孪生技术可以用哪些开源的应用来实现 智能化煤矿未来可以发展到什么程度 提供煤矿智能化
  • git仓库规范

    多人协作 项目名称 demo 我的名字 kk 1 前置概念 主目录 develop 开发目录 dev 主分支 develop demo 开发分支 dev demo kk 2 主目录 develop 该目录下可以有很多项目的分支 dev目录下
  • AI三大主义:符号主义、联结主义、行为主义

    一 符号主义 symbolicism 符号主义 symbolicism 逻辑主义 Logicism 心理学派 Psychlogism 计算机学派 Computerism 其原理主要为物理符号系统 即符号操作系统 假设和有限合理性原理 早期的
  • 【C#基础详解】(十四)面向对象 继承

    面向过程 优点 性能比面向对象高 因为类调用时需要实例化 开销比较大 比较消耗资源 比如单片机 嵌入式开发 Linux Unix等一般采用面向过程开发 性能是最重要的因素 缺点 没有面向对象易维护 易复用 易扩展 面向对象 面向对象的三个核
  • Zabbix安装时出现缺少PHP模块,解决过程

    我在安装时PHP缺少gettext模块和bcmath模块 一下为解决步骤 1 进入到PHP源码包目录下的ext目录 cd soft php 5 3 13 ext 2 会看到ext目录下有gettext目录和bcmath目录 3 进入gett
  • 对称二叉树

    这是蒟蒻认真写的第一篇题解 如有欠缺 请理解 题目描述 一棵有点权的有根树如果满足以下条件 则被轩轩称为对称二叉树 1 二叉树 2 将这棵树所有节点的左右子树交换 新树和原树对应位置的结构相同且点权相等 下图中节点内的数字为权值 节点外的
  • 下载google code中源码的几个工具

    Google code 一般以三种命令行方式提供源代码 格式如下 plain view plain copy hg clone https code google com p xxx git clone https code google
  • redis中批量删除key

    1 删除所有的key 可以使用redis自身的命令 flushdb 删除当前数据库中的所有Key flushall 删除所有数据库中的key 2 使用linux中的xargs来删除所有的key redis cli keys xargs re
  • 【R】【线性回归分析实验】

    文章目录 实验思维导图 1 收集 探索和准备数据 1 1 收集数据 1 2 探索和准备数据 2 基于数据训练模型 2 1 使用线性回归函数 2 2 建立模型 3 评估模型的性能 4 提高模型的性能 4 1 将年龄非线性化 4 2 数值转换二
  • 愉快地使用你的 Git Bash 工具

    在windows下使用git时自然会用到Git Bash 下面我分享一些Git Bash的使用技巧 欢迎补充 官方下载地址 http msysgit github io 设置初始路径 默认的 Git Bash 初始路径为安装目录 每次打开都
  • mvc三层架构

    三层架构是指 视图层View 业务逻辑层Service 持久层DAO View层 用于接收用户提交请求的代码 Service层 系统的业务逻辑主要在这里完成 DAO层 直接操作数据库的代码 主要是做数据持久层的工作 扩展 MVC指MVC模式
  • MySql 及MyBatis数据的批量操作

    1 Mybatis操作 1 批量更新
  • python hashlib_python import hashlib出现问题

    import hashlib时出现如下问题 gt gt gt import hashlib ERROR root code for hash md5 was not found Traceback most recent call last
  • ubuntu安装向日葵报错 处理时遇到错误:/var/cache/apt/archives/apport_2.20.1-0ubuntu2.4_all.deb

    执行安装命令 sudo dpkg i sunloginclient deb后 可能会报错 在处理时有错误发生 sunloginclient 此时执行 sudo apt get install f y 然后重新安装即可 但按以上方法操作后不一
  • RSA进阶之维纳攻击(wiener-attack )

    维纳攻击 场景 e很大 例题 第七届山东网络安全技能大赛 链接 https pan baidu com s 1IRInw3pB7SQfp3MxRJW17A 提取码 lcn3 e很大 妥了 维纳攻击 脚本在github上 https gith
  • 【完全开源】小安派-DSL 屏幕驱动开发板

    文章目录 概述 系统框图 2 8 3 5寸 屏电路 2 4寸触摸屏电路 1 28 寸圆形触摸屏电路 背光控制 关于Demo 1 28寸圆形屏智能手表Demo 2 4寸屏音乐播放器Demo 3 5寸屏天气站Demo 完全开源 概述 小安派 D
  • Altium Designer导入元器件3D封装

    一 前言 AD用了也有几年了 一开始只是单独用于制版 没有别的用途 随着工龄的增长 需求的内容也是越来越多 逐渐接触了3D模型建立 结构设计 有时需要导入PCB 3D效果 发现PCB导出的大多数只有芯片和电阻电容 很多开关 端子等特殊封装的
  • 前端开发利器: Bootstrap + AngularJS

    概述 在HTML5盛行的互联网时代 涌现诸多的前端html css js框架 基于其 适用范围 licence 发展前景等因素 本人对比总结出其中的两个佼佼者 分别是侧重页面美化展现的 Bootstrap 和侧重页面逻辑控制的 Angula