资讯频道 → Web前端
阅读更多

9顶
1踩

Web前端

原创新闻 Bootstrap 定制工具集锦

2013-07-26 18:30 by 见习编辑 tyygming 评论(12) 有19678人浏览
bootstrap 模板 twitter HTML CSS

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！


Bootstrap并不是单单意味着HTML/CSS界面框架，更确切的说，它改变了整个游戏规则。这个囊括了应有尽有的代码框架使得许多应用和网站的设计开发变得简便许多，而且它将大量的HTML框架普及成了产品。

可悲的是，它纯粹的功能唤起了我们本能的懒惰，很多人始终坚持使用它的默认设置。但是，Bootstrap的真谛是“基石”。Bootstrap框架，并不意味着它是全部终结解决方案。

Bootstrap的开发者们确实做了非常棒的工作，使得很多事情变得简单，他们的代码被模块化，你可以下载框架的独立组件。他们在网站上甚至提供了一款基本自定义工具，允许你进行定制。

另外，一些真正的设计者和开发者也开发了一些定制工具。现在你已经没有借口再去使用Bootstrap的默认设定了。

一、Bootstrap主题工具

以下的这些工具可以将基本的bootstrap变得不再是你熟识的那个样子。它们中的一些可能在使用时会有限制，或者只允许在特定条件下使用。但是如果它们符合你的需求的话，那么会为你省下不少时间和金钱。

1.  Flat UI

Flat UI（扁平化设计界面）由Designmodo发布，是为那些偏爱扁平化设计的人存在的，与Bootstrap多少有些拟物化的设计正相反，它的每一个UI元素都被根据最新的美学重新设计了。

Flat UI是免费的，但是你也可以使用付费的专业版本，专业版本中有附加元素、功能和PSD文件。



2.  Fbootstrapp

Fbootstrapp用于开发兼容Facebook用户界面的元素，用官网的话说就是“Fbootstrapp是一套用于Facebook iFrame应用开发的工具包”。它包括基本的排版、表格、按钮、表单、网格、导航和更多的CSS和HTML样式元素，让界面看起来和体验起来都和典型的Facebook一样。



3.  Jumpstart UI

Bootstrap主要用于应用，如果你想要将它用于经典的“管理员界面”，你还需要额外的工作。不过，Jumpstart UI简化了这些工作，为你带来3种不同的模板，此外还提供了管理员UI图标、小部件样式、基于jQuery的数据可视化插件等等。



4.  BootMetro

为你带来Windows 8的Metro UI风格界面。



二、Bootstrap客制化工具

所以你想让Bootstrap更好地达到你的UI需求，你将如何开始？你当然可以直接看代码，但是这样做是非常困难的。

如果你想手动更改排版、按钮、链接颜色或者是导航样式，你可以在Bootstrap网站上的客制化应用中编辑所有的变量，但是当你修改时候，你看不到任何可视性的反馈，也就是说你在修改的时候，完全不可预见修改后的样子。

但幸运的是，我们有以下这几款可视化定制工具。

1.  StyleBootstrap

StyleBootStrap是款很强大的工具，可以编辑在框架中见到的大多数默认UI元素。



2.  Bootstrap Magic

Bootstrap Magic是一款帮助你重塑架构的工具。它的界面简单友好，比StyleBootstrap可以微调更多的元素。



三、插件 & 片段

有些东西是Bootstrap没有的，但是对我们而言却是非常重要的。

1.  Font Awesome

Bootstrap 提供的图像字符图标非常酷，但是却很有限。通过Font Awesome，你可以为361个图标进行修改，比如改变颜色、添加阴影，像写CSS一样简单。



2.  Bootsnipp

Bootsnipp是一个HTML片段库，可与Bootstrap结合使用，并且不需要添加其他库。片段包括：注册和登录表单、日历、类似Gmail的E-mail界面、media player界面等等。



Via Nelly@极客社区
  • 大小: 33.4 KB
  • 大小: 21.5 KB
  • 大小: 31.1 KB
  • 大小: 40.4 KB
  • 大小: 43.7 KB
  • 大小: 35.5 KB
  • 大小: 30.9 KB
  • 大小: 43 KB
  • 大小: 49.1 KB
来自: www.gbin1.com
9
顶
1
踩
评论 共 12 条 请登录后发表评论
12 楼 stroer 2014-06-09 16:17
先悄悄地收起来
11 楼 wzjin 2013-12-18 11:13
要好好研究一下。
10 楼 shusanzhan 2013-08-08 13:44
mark 一下 让人耳目一新
9 楼 小鑫。 2013-08-05 10:02
mark
8 楼 cbbaaa1989 2013-08-05 09:36
markmarkmark
7 楼 yangzexuan 2013-08-03 16:18
markmark
6 楼 wzjin 2013-08-03 09:26
mark  
5 楼 littleyeah 2013-07-31 10:55
mark  
4 楼 ぁ文安国ぁ 2013-07-30 14:08
mark   留着用
3 楼 非法用户 2013-07-29 23:26
很好
2 楼 jackra 2013-07-29 17:55
看好3和4模式
1 楼 x734545751k 2013-07-27 09:51
Bootstrap这等好东西得研究研究

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • Bootstrap4如何定制自己的颜色和风格

    本篇就教你如何定制 Bootstrap4，使你的页面更与众不同一些。 0. 需要的工具 Node.js 编译 Bootstrap4、下载Bootstrap的依赖包，需要在电脑上安装 Node.jsBootstrap4 源代码 修改 Boostrap 需要一份源代码，访问 ...

  • Bootstrap定制

    2.Bootstrap定制 定制Bootstrap的两种方法： (1)直接修改Bootstrap.less，重新编译得到bootstrap.css (2)在官网上有一个“定制工具”，修改需要选项，下载即可 3.如何让一个容器的背景透明，而上方的文字不透明 不...

  • bootstrap在线定制工具

    四种最好的免费Bootstrap在线设计工具 Bootstrap带来了设计革命，本文介绍的四种免费Bootstrap在线设计工具，可视化所见所得设计网页，然后输出Html/CSS代码，其中有些甚至可以实现拖曳，也有可以设定自己的主题...

  • bootstrap交互式网页设计工具_15 个最好的 Bootstrap 设计工具推荐

    15个最好的Bootstrap设计工具推荐15个最好的Bootstrap设计工具推荐发表于6小时前|2482次阅读| 来源CSDN|17条评论|作者王果bootstrap前端开发EaselBootsnippBootstrapDesignerFancyboot摘要：Bootstrap不单单是一个...

  • Bootstrap_3.SCSS、Bootstrap定制

    SCSS、Bootstrap定制1 SCSS1.1 动态语言概述1.2 SCSS定义2 Bootstrap定制 Bootstrap重点：媒体查询技术+栅格布局+SCSS 1 SCSS 1.1 动态语言概述 CSS缺点： 语法不够强大，没有变量和合理的样式复用机制； 逻辑上...

  • Bootstrap3 工具提示插件的使用方法

    工具提示 当鼠标移动到特定元素上时，显示相关的提示信息，比如给出链接说明或缩写词的全称等，是一个非常人性化的功能。 ... 由于原生的工具提示样式单调...鉴于此，Bootstrap提供了一个工具提示插件，它功能完善，...

  • LauncherBootstrap:启动器的 Bootstrap 工具

    定制所有自定义都在src\main\resources\com\skcraft\launcher文件夹中完成。 将bootstrapper_icon.png替换为您自己的程序图标。 使用文本编辑器更改bootstrap.properties 。 在lang自定义语言文件。用户的文件在 ...

  • 关于Bootstrap的定制

    Bootstrap定制方法

  • bootstrap-tooltip-custom-class:通过添加自定义类来扩展Bootstrap工具提示和Popover。 适用于Bootstrap 3和Bootstrap 4

    Bootstrap工具提示自定义类 通过添加自定义类来扩展Bootstrap工具提示和Popover。 适用于Bootstrap 3和Bootstrap 4 。 定义自己的定制类或使用预定义的定制类： 工具提示： .tooltip-primary ， .tooltip-success ...

  • Sass项目中定制bootstrap

    而编译又是可以通过的，为了有智能提示建议将bootstrap-sass-3.3.7\assets\stylesheets\bootstrap文件夹复制一份到工程里，源码里代码尽量不要修改，我们自己的内容放到另外一个文件夹里。        ...

  • bootstrap影响自定义的css,定制自己的Bootstrap样式

    官方提供了个性化定制功能 ,可以选择自己需要的组件，插件，自己设置不同模块的less变量，最后从官网下载到一份编译后的个性化bootsrap。如果是比较复杂的项目，虽然官网开放的变量上百个，但还是不能满足业务需求，...

  • bootstrap交互式网页设计工具_四种最好的免费Bootstrap在线设计工具

    四种最好的免费Bootstrap在线设计工具Bootstrap带来了设计革命，本文介绍的四种免费Bootstrap在线设计工具，可视化所见所得设计网页，然后输出Html/CSS代码，其中有些甚至可以实现拖曳，也有可以设定自己的主题模板...

  • Bootstrap开篇：构建现代响应式网页的终极工具

    3. 使用Bootstrap组件：根据你的需求，选择合适的...4. 自定义主题：如果你对默认的主题不满意，可以通过修改Bootstrap的样式表或者使用定制工具（如Bootstrap Themes）来定制自己的主题。二、Bootstrap的主要特点。

  • Bootstrap入门教程一Hello Bootstrap初识

    Bootstrap是基于 HTML5、CSS3和Javascriopt开发的，它在 jQuery的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件，为实现快速开发提供了一套前端工具包，包括丰富的...

  • Bootstrap

     Bootstrap 读音 / bu:tstræp/ˈ ，是一个非常受欢迎的前端框架 最流行的 HTML 、 CSS 和 JS 框架，用于在 ...（ v5.x ） Bootstrap 底层是使用 Sass 构建，支持定制（ Sass 、 Color 、 CSS variable .... ）。

  • bootstrap源码定制-环境搭建

    概述项目中开发web，对于bootstrap，我想说确实好用，但是有些时候要做一些个性化定制样式，比如按钮大小、颜色，表格样式等等，在全局使用bootstrap的同时，还要有自己的定制样式，有三种方法可以做到： ...

  • bootstrap4 Grandin.zip

    Grandin是一个响应基于Bootstrap4框架的web UI工具包,使用Grunt, Bower,SCSS，很容易定制开发人员友好。专业包装,有大量的UI组件,部件、表单、表格、图表、页面和应用程序。这是移动先行布局的管理框架。每个组件是...

  • Bootstrap4 定制自己的颜色和风格

    Bootstrap4 定制自己的颜色和风格 Bootstrap是现在最流行的CSS框架，有许多网站、后台管理系统的样式都是基于Bootstrap设计的。然而，Bootstrap 始终保持着那蓝色 + 浅灰色彩基调，最新的 Bootstrap4 也是如此，...

  • Bootstrap入门到实战

    Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

Global site tag (gtag.js) - Google Analytics