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

本文讲的是你考虑清楚了吗就决定用 Bootstrap ?,


近年来,在前端项目中, 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 来避免的缺点。





原文发布时间为:2016年08月21日


本文来自合作伙伴掘金,了解相关信息可以关注掘金网站。

时间: 2024-08-30 22:16:12

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

div布局-请问怎么让div中的div在垂直方向上居中呢?

问题描述 请问怎么让div中的div在垂直方向上居中呢? 比如:下面这段代码,如何让里面的div在垂直方向上面居中呢(不好意思,实在是没有悬赏币了) .out{ width:500px; height:500px; background:blue;}.inn{ width:200px; height:200px; background:red;} 解决方案 你的inn怎么比out还大..搞反了吧..通过margin来定位.absolute定位最好,不需要考虑父容器,只需要依据自身的宽和高度来调整

PHP开发框架laravel安装与配置教程

 Laravel是一套简洁.优雅的PHP Web开发框架,本文将详细介绍Laravel如何进行配置 配置说明 框架下载好了,但是想要很好的使用,可能我们还有一些东西需要知道,这就是配置.和项目有关的配置是在app/config文件夹里,但是除了这里还有一些配置可能是我们需要的.作为一个基础教程,我就不一一介绍了,只是选择一些大家配置比较多的地方讲解一下. app/config中的配置说明 在app/config文件夹中经常配置的一般有两个文件:app.php和database.php两个文件,他

修改build-gnuradio免翻墙免炖github本地安装

1.将VMWare镜像中的~/sdr/ 复制到你的linux中 2.将以下文本替换掉build-gnuradio里的内容,没错 echo 'simpower91 modified here' echo 'Do you want to skip downloading from the internet?[yes]' read simskip if [ "$simskip"a = 'no'a ] then gitfetch fi echo 'simpower91 modified end

VxWorks镜像简介

VxWorks镜像可分为三类:   可加载型VxWorks镜像:存储在开发机上,运行在板上RAM中   基于ROM的VxWorks镜像:存储在板上ROM,运行在板上RAM中   ROM驻留的VxWorks镜像:存储在板上ROM,运行在板上ROM中 一.可加载的VxWorks镜像     可加载的VxWorks镜像存储在开发机上,运行在RAM中.     在开发的初期阶段,可以根据需要添加或删除一些VxWorks组件,生成可加载的VxWorks镜像,存放在开发主机的某个目录下,便于调试.     

使用lomboz调试JSP

js 前言 凡是有JSP编写经验的人都有JSP调试困难的体会.由于自动化调试工具的缺乏使得在调试JSP时不得不在文件中大量的使用打印语句.这种做法对于定位JSP范围内的错误是一个简单有效的手段,但如何快速有效的定位在JSP中调用的对象的内部错误就显得有点力不从心了.因为这样将不得不频繁地编译.发布.启停服务器,给调试带来极大的不便. 传说中所见即所得的JSP调试工具,就笔者目前掌握的情况来看,并不存在.如果读者有这方面信息的希望告知,呵呵.但是JSP的调试工具却的确存在,而且它是免费的!It's

JS表格组件神器bootstrap table详解(基础版)_javascript技巧

一.Bootstrap Table的引入 关于Bootstrap Table的引入,一般来说还是两种方法: 1.直接下载源码,添加到项目里面来. 由于Bootstrap Table是Bootstrap的一个组件,所以它是依赖Bootstrap的,我们首先需要添加Bootstrap的引用. 2.使用我们神奇的Nuget 打开Nuget,搜索这两个包 Bootstrap已经是最新的3.3.5了,我们直接安装即可. 而Bootstrap Table的版本竟然是0.4,这也太坑爹了.所以博主建议Boot

sqoop2 运行 show version --all 出错

问题描述 sqoop2运行showversion--all出现如下错误:sqoop:000>showversion--allclientversion:Sqoop1.99.5sourcerevision9665c01f674d69d41a6fcfffb2c0b94590f70f59CompiledbyvbasavarajonWedFeb1809:42:27PST20150[main]WARNorg.apache.hadoop.util.NativeCodeLoader-Unabletoloadn

bootstrap问题,请问如何让栅格div水平居中

问题描述 bootstrap问题,请问如何让栅格div水平居中 div栅格是左对齐的,现在我想让一个col-md-11的div水平居中,请问应该怎么办? PS:如果是偶数的话可以用左右各放一个空div的方法实现 如 1 10 1 但是奇数不行啊 ... 解决方案 DIV水平和垂直居中问题div垂直水平居中的问题

html-CSS中,line-height与font-size关系

问题描述 CSS中,line-height与font-size关系 如果font-size大于line-height会怎么显示,这幅图该怎么理解 解决方案 font-size大于line-height会溢出容器显示,如果容器增加overflow:hidden就会隐藏溢出的内容 <div style="font-size:20px;line-height:12px">abb</div> <div style="font-size:20px;line

配置-cruisecontrol集成SVN启动报错?

问题描述 cruisecontrol集成SVN启动报错? 用CC每日构建是启动配置报错只要是SVN自动更新代码 下面是错误信息 net.sourceforge.cruisecontrol.CruiseControlException: svn failed with exception at net.sourceforge.cruisecontrol.util.CommandExecutor.executeAndWait(Com mandExecutor.java:115) at net.sou