bootstrap 用到吐了 有木有。。。很多项目都不适用。。。而且太重了,扩展也有很多郁闷的地方。。。 希望找个 简单 具备一定的必要的组件。。。兼容性好点的,适用于国内及电商产品
Bootstrap 从工程角度来说,应该是最为 developed 了?不知道为啥不行?
太重的话,订制组件?风格不对的话,找合适的 bootstrap them?
bootstrap 目前来说应该算是最好的,加上 4 出来后又做了很多改进,而且说实话并不重。当然可以参考一下其它的 UI 库(完整列表)
bootstrap 配合 sass 使用,你可以按需引用组件,样式和功能可以找三方插件来扩展,就资源和成本来说,还是很有优势的
人们开始讨厌 bootstrap 的理由,大概跟 jquery 一样吧(逃
问题如此模糊,感觉不怎么好回答吧,什么样叫「不重」?「必要组件」包含哪些?「兼容性好」到底要到哪个 ie 版本?「适合国内」单纯指国内浏览器兼容性还是另有所指? 虽然有 base、skeleton 等轻型框架,但好像并不符合「兼容性好」,「适合国内」的特点。基本都是 ie8+ 的起步,新的基本都是 ie9 起步。Semantic UI 之类的还是 ie10+。 自己写的话,抛弃 rem,加上各种 fallback,弄个 reset 起步应该是最灵活的。 要么就是 css 预处理 + bootstrap、foundation 等等来深度定制,切掉你不要的部分。
最近发现了一个东西w3.css
,w3 官方的 css 库,缺点是没有包含 JS 处理,但样式感觉比 bootstrap 默认的好看很多
国内镜像地址
BS 并不重,并且可以很方便的自定义。当然如果设计师做出来的和 BS 差别蛮大就真的不推荐使用了。自己写一套,和设计师商量好,沉淀出公司内部的一套 UI 设计语言,开发起来效率也是高的飞起(一定一定要有模块化的思想,css 模块一定要有文档)。如果真的不愿意使用 BS 的话,推荐使用 pure.css 吧,压缩只有 4K,精致小巧,我在上家公司基于 pure.css 写了一套公司内部的 UI 设计语言,现在还在使用,推荐下 pure.css。
花了几天时间从 Bootstrap 1.0 看到 4.0,它提供的功能和可定制化程度远比你想象的多。而且围绕 Bootstrap 而做的主题定制和网站真的超级多(包括很多你完全看不出来的)。
可以浏览感受一下:http://expo.getbootstrap.com/
选择 Bootstrap 还是 Foundation?
Bootstrap 是 Twitter 员工开发的,Foundation 是 Zurb 公司的产品,两者都是开源的响应式框架,都得到了广泛应用。相比之下,Twitter 的名气无疑比 Zurb 要大得多,因此很多人在做这道选择题时,会毫不犹豫地选择 Bootstrap。然而事实上,Foundation 的语法比 Bootstrap 更简洁、更清晰、更优雅,也更容易实现自定义风格。因此,我个人推荐 Foundation。
以表单为例,Bootstrap 的代码:
<form>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="Name">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" placeholder="Email">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Foundation 的代码:
<form>
<div class="row column">
<label>Name
<input type="text" id="name" placeholder="Name">
</label>
<label>Email
<input type="email" id="email" placeholder="Email">
</label>
<button type="submit" class="button">Submit</button>
</div>
</form>
再以导航栏为例,Bootstrap 的代码:
<nav class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#">Site Title</a>
</div>
<ul class="nav navbar-nav">
<li><a href="#">Item One</a></li>
<li><a href="#">Item Two</a></li>
<li><a href="#">Item Three</a></li>
</ul>
</nav>
Foundation 的代码:
<div class="top-bar">
<div class="top-bar-left">
<ul class="menu">
<li class="menu-text">Site Title</li>
<li><a href="#">Item One</a></li>
<li><a href="#">Item Two</a></li>
<li><a href="#">Item Three</a></li>
</ul>
</div>
</div>
可以看到,相比之下 Foundation 的代码更简洁,在页面结构更复杂、代码量更大的情况下,这会带来显著的好处。
#29 楼 @chinakr 要知道,简洁需要建立在语义化和易懂的前提下,bootstrap 分级很清晰,所以难免会让人产生有点臃肿的感觉,但是却很容易理解和看懂,而且扩展也形成了一定的规则,不信让任何人看上面的对比代码都会很轻易看懂 bootstrap 的,而 fundation 是不容易看懂的。如 bootstrap 的 button 样式名为 btn
(为什么非得要搞个btn
而不像 fundation 那样什么都不写,显然这是一种无侵入做加法的原则,带来的肯定是灵活),默认样式为 btn-default
,成功为btn-success
,Adminlte 框架又在此之上添加了扁平样式 btn-flat
,以及背景色 bg-groon
,所以一个 button 的样式大致就成了:
<button class="btn btn-default btn-flat bg-groon"></button>
虽说代码量是多了那么一点点,但是相比那些看不懂的简写,我相信易懂更重要。
此外,BS4 引入了 rem 作为单位以及其它的一些优化,显然这要比所谓的“简洁”更重要了。
你们以为 Bootstrap 带来的是一套 CSS 组件和样式么!?
不!Bootstrap 给我们的是一套前端规范,用它你再也不用和你团队的其他人争论怎么组织哪些组件,怎么命名了,Bootstrap 给你指定了一套路子,而且新招进来的人也能很快熟悉或者本来就已经熟悉了。
不过话说回来,有时候我也不太喜欢 Bootstrap 的某些地方... 覆盖样式略显困难,原来的代码写太多了,设计差别大的时候要覆盖好多属性...