你考虑清楚了吗就决定用 Bootstrap ?

时间:2022-09-14 11:26:00

近年来,在前端项目中, Bootstrap 已经成为了一个非常受欢迎的工具。 Bootstrap 的确有很多优点,然而,如果你的团队中恰好有一个专职的前端工程师。那我推荐你们不要使用 Bootstrap ,因为在某些情况下, Bootstrap 弊大于利。

Bootstrap 对什么有好处

Bootstrap 带有栅格系统,也有针对很多组件的样式和脚本,包括表格,导航栏,进度条,分页,表单样式,模态框和提示框。在这篇文章中,谈论 ‘Bootstrap’,我的意思是包含所有组件的实践(与只选择包括一部分相反,例如, 只是栅格)。 对于需要把项目输出成标记语言,并且不想操心将结果样式化的后端开发工程师来讲, Bootstrap 是一个好的工具。如果因为某些原因,比如预算或其他因素,在一个团队里没有前端开发者或设计师, Bootstrap 适合用来填坑。

对于设计师来讲, Bootstrap 也有一席之地:它是一个很有价值的工具,用来从设计软件快速移动到浏览器,而不需要过度担心前端代码策略。 甚至对于主要和数据打交道很少关注 UI 和布局的前端开发者,让一个开发者关注于搭建应用本身, Bootstrap 在这一方面也很好。

什么时候你最好别用它

然而,如果你的团队里有一个前端开发工程师,使用 Bootstrap 会潜在地浪费他们宝贵的时间,并且将他们的注意力从解决实际的问题转移。 Bootstrap 恰恰做的是前端开发者擅长的,但是它以一种很普遍的方式来实现。你的网站或应用是很具体的,所以如果你用一个普遍的系统,它有可能不会起作用。这意味着你的代码将包含全部的可能性才有可能实现具体的需求。

当你需要很多代码来覆盖 Bootstrap 的样式

Bootstrap 是由 Twitter 的开发者开发来系统化他们网站应用的样式。当你的网站应用的样式和他们不一样,这意味着你不得不覆盖掉他们的样式来。 大多数网站的样式并不像 Twitter 那样。因此,如果他们安装 Bootstrap ,他们会覆盖掉很多样式。 在一些我参与的网站中,我发现多达十分之九的 Bootstrap 样式会被网站自己的样式覆盖掉。很坦率的讲,这是荒谬的。

当它让简单的事情复杂化

CSS 用来为网页增加一系列简单的在某些条件下会被代码覆盖的样式规则。当你的网站中有 Bootstrap 的样式,几乎网站内所有的东西都已经被一系列复杂的代码规则设置好了。任何例外都会超出这个框架所设置好的规则。而大多数网站所面临的问题正是它们的样式对于 Bootstrap 来说往往是例外。 Bootstrap 的样式是复杂的:你会有一个带有 12 列的栅格系统,这 12 列能以你想要的任何方式组合使用,有特殊的类来基于用户的视图尺寸设置不同的偏移量和列结构。很多网站是简单的:在小屏幕上没有列,在更大的屏幕会有一到两列。

当它产生了技术债务

一个前端代码库依赖 Bootstrap 的时间越长,纠缠的越多,并且它包含了更多只是用来覆盖掉 Bootstrap 代码的规则。这常常导致代码库陷于巨大的技术债务,尤其当前端代码以经常需要手动更新的方式整合在后端的时候。

当它引入可能不是你的应用的命名习惯

命名很难,而且想出有意义的属于你的团队和应用的命名习惯很花时间。对于组件名使用合适的名词,不要和一些名词的缩写像 ’btn’ 的类名混淆。

结论

在开发网站的过程中 Bootstrap 和朋友在各种各样的阶段是有好处的。然而它们不是一个能使任何事都简单的魔法:相反,会有很多能够通过让前端开发者关注于亲自开发 UI 来避免的缺点。

你考虑清楚了吗就决定用 Bootstrap ?的更多相关文章

  1. Angular2入门系列教程7-HTTP(一)-使用Angular2自带的http进行网络请求

    上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...

  2. ABP入门系列(1)——学习Abp框架之实操演练

    作为.Net工地搬砖长工一名,一直致力于挖坑(Bug)填坑(Debug),但技术却不见长进.也曾热情于新技术的学习,憧憬过成为技术大拿.从前端到后端,从bootstrap到javascript,从py ...

  3. Hangfire项目实践分享

    Hangfire项目实践分享 目录 Hangfire项目实践分享 目录 什么是Hangfire Hangfire基础 基于队列的任务处理(Fire-and-forget jobs) 延迟任务执行(De ...

  4. Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数

    上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...

  5. Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数

    上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...

  6. Angular2入门系列教程3-多个组件,主从关系

    上一篇 Angular2项目初体验-编写自己的第一个组件 好了,前面简单介绍了Angular2的基本开发,并且写了一个非常简单的组件,这篇文章我们将要学会编写多个组件并且有主从关系 现在,假设我们要做 ...

  7. Vagrant 基础全面解析

    这篇 Vagrant 入门文章将带你创建一个 Vagrant 项目,这个过程将会用到 Vagrant 所提供的主要基本特性.如果想了解 Vagrant 能为你带来哪些好处,可以阅读 Vagrant 官 ...

  8. 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)

    通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...

  9. 旺财速啃H5框架之Bootstrap(五)

    在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...

  10. ASP&period;NET MVC with Entity Framework and CSS一书翻译系列文章之第二章:利用模型类创建视图、控制器和数据库

    在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...

随机推荐

  1. 去掉hive字段中的tab

    去除空格用trim 去除tab用如下方法 select regexp_replace(secdomainname,'\\s+','') from dwb_cndns_node_secdomain_d ...

  2. 必填项&lpar;required&rpar;

    当你设计表单时,你可以指定某些选项为必填项(required),只有当用户填写了该选项后,用户才能够提交表单. 例如,如果你想把一个文本输入字段设置为必填项,在你的input元素中加上required ...

  3. java 验证日期

  4. WINRAR评估版本弹出框消除

    网上有很多WINRAR评估版本,这些版本下载安装了之后总会有些广告弹出,让人很烦恼,现在教大家一个方法消除这些弹出框. 复制以下代码:    RAR registration data SeVeN U ...

  5. (转)Make命令简介与使用

    转载自阮一峰的博客: http://www.ruanyifeng.com/blog/2015/02/make.html 代码变成可执行文件,叫做编译(compile):先编译这个,还是先编译那个(即编 ...

  6. 比较全面的gdb调试命令 (转载)

    转自http://blog.csdn.net/dadalan/article/details/3758025 用GDB调试程序 GDB是一个强大的命令行调试工具.大家知道命令行的强大就是在于,其可以形 ...

  7. python实现XSS过滤(BeautifulSoup和白名单处理)

    下面我做的莫名其妙的代码格式化是因为这个 --.-- 首先大致说一下XSS,就是在HTML里插入恶意的javascript代码,使得在该HTML加载时执行恶意代码,达到攻击的目的. 可能存在的地方呢, ...

  8. java-包装类

    包装类存在的意义: 1.对于有些情况,我们不能使用基本数据类型,只能使用引用数据类型.这个时候使用包装类对基本数据类型进行类话来实现. 在jdk1.5前,我们必须手动将基本数据类型数据包装,1.5版本 ...

  9. docker &plus; mysql安装sonarqube

    docker sonarqube地址:https://hub.docker.com/_/sonarqube docker mysql地址:https://hub.docker.com/_/mysql ...

  10. 集合框架&lowbar;DAY17

    1:五种数据结构: 数组:长度固定,有序,查找方便   链表:添加删除方便   栈:先进后出    队列:先进先出   树结构:完成排序动作 2:泛型(了解) (1)是一种把明确数据类型的工作推迟到创 ...