Bootsrap——介绍Bootsrap

目录

前端框架

1.前端框架是什么意思?

2.Web前端开发技术三要素

3.使用前端框架的好处

Bootsrap

1.WWW

    What?

    Why?

    Where?

环境安装


前端框架

1.前端框架是什么意思?

    前端框架一般指用于简化网页设计的框架,使用广泛的前端开发套件,比如,jquery,extjs,bootstrap等等,这些框架封装了一些功能,比如html文档操作,漂亮的各种控件(按钮,表单等等),使用前端框架可以帮助快速的网站。

    框架是提供一套完整的解决方案,按照规定好的代码结构来做编排,同时前端功能越来越强大而产生的前端框架,所以开发web产品就很必要用前端框架(前端架构)。

2.Web前端开发技术三要素

    Web前端开发技术框架包括三个要素:HTML、CSS和JavaScript,当然还有很多高级的前端框架,比如bootstrap、Jquery等。主要是用来帮助高效的开发出前端页面。

3.使用前端框架的好处

    使用前段框架可以降低界面开发周期和提高界面的美观性。

    有些框架比较轻量,比如jquery,有些框架比较重量,比如extjs。一般来说重量的框架会封装更多的功能,比如extjs,封装的grid控件有很强的数据展示和操作功能。
```

# 前端框架与前端类库的理解

```
前端框架的理解误区

  网站的价值在于它能为用户提供什么价值,在于网站能做什么,而不在于它是怎么做的,所以在网站还很小的时候就去追求网站的架构框架是舍本逐末,得不偿失的。前端框架同理,如果是一个简单的页面型产品,应用只是依赖服务器来生成Web页面和视图,并且只需要使用一些简单的Javascript或者JQuery来使应用更加具有互动性,那么一个JQuery前端类库就可以了,真的没必要用上一些高大上的框架。

  当然,框架的确是很有用的,重点是我们要知道什么时候该用什么框架。大公司大项目的经验和成功模式固然重要,值得学习借鉴,但我们不能因此变得盲从。只有深刻去理解前端框架,知道什么时候该用什么什么框架解决什么问题,才能有的放矢,直击要害。

  前端框架与前端类库的区别

  使用框架前,我觉得很重要的一点是弄清类库(诸如JQuery)和框架(诸如angularJS)的区别在何处。

  简单而言,类库,解决的是代码或者是模块级别的复用或者对复杂度的封装问题,例如将一个解决复杂问题的功能模块封装成一个函数,提供一个简单的接口。库它是一种工具,它提供了很多封装好的方法,用与不用取决于我们自身,即使用了也不会影响我们呢的代码结构。

  而框架,更多的是对模式级别的复用和对程序组织的规范。这里的模式是指比如MVC,为了实现M和V的解耦,把复杂的耦合关系由经常变化的业务代码转移到不经常变化的框架内部消化。是面向一个领域来提供一套解决方案,提高开发效率,如果我们选择了使用某框架,就应该遵循该框架所规定的规则。

  二者最主要的区别是:JQuery以DOM操作为中心,框架,准确来说是MVC框架,是以模型(model)为中心,而DOM操作是附加的。所以,以模型为中心最终达到的目的是带来一整套工作流程的变更,使得后台工程师可以编写前端的模型代码,把后台与前端打通,交互设计师处理UI跟模型的互动关系,UI设计师可以专注、无障碍的处理HTML源码,把它们以界面模板的形式提交给交互工程师。这一整套协作机制能大大提高开发效率。使用MVC框架使得前端任务更好的被解耦。
```


Bootsrap

1.WWW

    What?

        ①.诞生于2011年,来自Twitter公司,是目前最受欢迎的前端框架
        ②.是一个用于快速开发Web应用程序和网站的前端框架
        ③.Bootstrap是基于HTML、CSS、JS的,简洁灵活,使得Web开发更加快捷
        概述:Bootstrap是一个建立一个页面,就可以在三个终端(PC端、平板、手机)上完美展示的响应式前端框架

    Why?

        ①.响应式设计(Bootstrap的响应式CSS能够自适应台式机、平板电脑和手机)
        ②.移动设备优先
        ③.浏览器支持
        ④.容易上手

    Where?

       企业网站、博客、网站后台之类的网站
        电商(电商网站分类太多)

环境安装

    ①.下载Bootstrap库
        https://v4.bootcss.com/
    ②.页面中引入库
        bootstrap.css:Bootstrap核心样式【添加到head标签中】
        jquery-3.3.1.js:jQuery库【注意:必须在Bootstrap核心库引入之前引入jQuery库】
        bootstrap.js:Bootstrap核心库
        【添加到</body>之前】

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小羊持续开发

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值