如何简单快速修改bootstrap

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

可悲的是,它纯粹的功能唤起了我们本能的懒惰,很多人始终坚持使用它的默认设置。现在,你要知道,这些经过丰富想象力的默认样式和布局网格都不差,他们都是Twitterteam花费了大量时间和精力的产物。他们是坚实的基础。

   但是,Bootstrap的真谛是“基石”。Bootstrap框架,并不意味着它是全部终结解决方案。这个规则的一个例外可能是,如果你在内部开发了些东西,是公众看不到的。但是即使这样,你的想法会将人们带的更远,甚至改变一切。

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

其余的,则决定于我们。一些真正的设计者和开发者已经加紧创建工具和变更,我们没有理由落于人后。现在已经没有借口再去使用Bootstrap的默认设定了。

Bootstrap 变更

   以下是一系列变更已经非常成熟了,可以将你基本的bootstrap变得不再是你熟识的那个样子。这些变更的使用可能有些限制,也有些是在特定条件下使用的,但是如果他们符合你的需求,他们会为你省下不少时间和金钱。

Flat UI

    第一种变更就是FlatUI(扁平化设计界面),由Designmodo发布。FlatUI迅速普及开来,在设计界有很好的理由:那就是它做的很漂亮。它是为那些偏爱扁平化设计的人存在的 - 与Bootstrap多少有些的拟物化设计正相反
-每一个UI元素都被依据崭新的美学重新设计了。

   矢量图标,一个新的字形图标字体,自定义的UI元素(类似于to-do list)和多种改变起来非常容易的颜色主题,FlatUI让我,可能许多人也一样,重新设想Bootstrap可以如何展现。我经常觉得,基本的段落元素中的文本大小对于网站而言有些小,说句公道话,我觉得他们只适合于应用程序的界面,在应用程序的界面里,你可以将文本放在狭小的空间里。

 

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

Fbootstrapp

  

   记得我之前说过有些变更是有特定使用条件的?我当然不是玩笑的。Fbootstrapp已经完全重新开发用于兼容Facebook的用户界面元素。

   为什么要这么做呢?用他们自己的话说就是“Fbootstrapp是一套发起了FacebookiFrame应用开发的工具包。它包括了基本的排版,表格,按钮,表单,网格,导航和更多元素的CSS和HTML样式,让他们看起来和体验起来都和典型的Facebook一样”。

   Facebook的开发者们,注意,你们的工作开始变得简单了。

Jumpstart UI 管理模板

    Bootstrap主要是用于应用,如果你想要将它在经典的“管理员界面”上应用,你还需要额外的工作。    JumpstartUI为你带来三种不同的模板,让你不再费力。

    管理员UI图标,小部件的样式,基于jQuery的数据可视化插件还有更多其他的,被引入了干净的,可自定制的,全响应布局中。

    这种变更不同于其他的最大一点是,它没有任何免费的版本,而必须付费才能使用。它只需要15到20美元,与它可以实现的功能,以及它符合你的特殊需求这两点而言,这个价格非常的划算。

BootMetro

     有些人喜欢它,但更多人厌恶它,但是不可否认的是Windows8和其Metro UI在设计界引起了轰动。我并不认为这种UI有特别的用处(一些软件商店除外),不过我们有一个BootMetro

它是免费的,而且看起来特性完善,所以放心使用吧。对于大多数人而言,他可能不是特别有用,但是他是一种新奇的代码体验。

Bootstrap客制化工具

    所以你想引导你的Bootstrap更好的达到你的UI需求,你要如何开始?你当然可以直接看代码,我可以告诉你,这样做是非常困难的。

    如果你想手动改变所有的排版,或者是按钮,链接颜色,又或者是导航样式,你可以在Bootstrap网站上的客制化应用中编辑所有的变量,但是你必须知道所有颜色的HEX代码,而且当你做改变的时候,你看不到任何的可视性返回,也就是说你在修改的时候,完全不可预见你编辑后的样子是什么样的。

    但是幸运的是,现在有很少一部分Bootstrap主题创作者为了这种客制化需求,特别做出了一些工具。以下是我至今认为最好的两种。

StyleBootstrap

    如果你忽略笨拙的界面,StyleBootStrap是款很强大的工具,用于编辑你可以在框架总见到的大多数默认UI元素。

Bootstrap Magic

    BootstrapMagic是一款帮助你重塑架构的工具。它的界面简单友好,比StyleBootstrap可以微调更多的元素。因此,它需要更多的时间,但是它比起手动修改所有元素还是节省了不少时间。

插件  &
片段

    有些东西是Bootstrap没有的,但是对我们而言却是非常重要的。首先是图标。

Font Awesome

    Bootstrap提供的图像字符图标非常酷,但是却很有限。你有一个“黑暗”图标,还会有一个“光亮”图标,这些都是一个可爱的小精灵图像。但是图标字体,应该更为灵活。任何你可以用CSS3做的编辑,在这些图标上也都应该可以实现。比如改变颜色,给他们加上一个阴影,像写CSS一样简单。FontAwesome可以现在可以为361个图标进行这样的修改。

Bootsnipp

    Bootsnipp是一个HTML片段库,与Bootstrap结合使用,并且不需要添加其他库。片段包括:注册和登陆表单,日历,类似Gmail的e-mail界面,mediaplayer界面,甚至更多。

这并不是全部

    Twitter宠爱的模板越来越被广泛适应,也许在自定义Bootstrap上有更多的方法,更多的信息,是我的列表乃至任何列表中都没有的。毕竟,互联网就是为此而存在的,对吧?

来源:http://www.gbin1.com/technology/javascript/20130722-modify-bootstrap-quickly/

时间: 2024-09-09 12:26:51

如何简单快速修改bootstrap的相关文章

WindowsXP快速修改文件打开方式的方法

  WinXP用户安装了一些应用程序之后,会使得原来的一些文件关联发生改变,那么怎么才能快速修改这些文件的打开方式呢?今天小编就教大家一个简单的方法. 解决方法: 1. 在任何一个MPG文件上点击右键. 2. 选择"属性"命令,在"常规"选项卡中点击"更改"按钮. 3. 打开更改"打开方式"对话框,从中选择"超级解霸"即可,当然你也可以选择其它的媒体播放器.对于其它类型的文件也可以采用此方法快速修改打开方式

Photoshop简单快速给照片加锐化马赛克效果

  看到有人利用Fireworks锐化马赛克效果,觉得效果还真不错!其实用Photoshop也可以简单快速的制作这种效果,今天就给大家来一个例子. 方法/步骤 1.打开原图,按Ctrl+J复制图层: 2.选择:滤镜-->像素化-->马赛克(具体的数据我就不说了,自己设置) 3.选择:滤镜-->像素化-->碎片 4.选择:滤镜-->画笔描边-->成角的线条 5.选择:滤镜-->锐化-->锐化(连续三次) 6.修改模式和不透明 7.拼合图层,完成!! 以上就是P

在Excel文档中快速修改全角半角字符

  在Excel文档中快速修改全角半角字符 在Excel中输入大量数据时,如果不小心出现了全.半角混杂的情况怎么办?这里有个简单的方法可以快速修改Excel文档中的全角半角字符,操作如下. 先将Excel中的数据复制到一个word文件中,然后单击"格式→更改大小写",在弹出的对话框中选择"半角",再单击"确定"按钮. 接着再把word文件中的数据复制到Excel,单击"编辑→选择性粘贴",在弹出的对话框中,选择"文本

InnoDB表快速修改varchar字段长度方案

前一篇文章末尾提到InnoDB快速修改字段长度.其实用场景在于,在设计表时,若需要预留varchar类型字段,还无法确定实际需要的长度.而当需要启用到预留的字段时,表中可能已经有很多数据,此时要根据需要修改字段长度, 若能够不需要重做数据,则能够减少这个修改操作对线上服务的影响. 几点说明 1. 注意到这里适用的是varchar类型, char类型不在本文讨论范围内.实际上,由于varchar类型字段数据并不是直接存储在聚簇索引中,才使得快速修改成为可能.而char类型改变长度至少要将整个聚簇索

简单快速诊断Windows服务器是否中毒或被入侵

本期分享专家:五贤,搞过开发,玩过小机.AIX,目前在阿里云从事云产品技术支持,专注于云计算相关的系统运维.奉行"上天给了人两只手,两只眼,而只有一张嘴.就是要让我们多动手,多观察,少耍嘴皮." 对于云上业务,Windows 服务器中毒或被入侵的案例很多.Windows 系统中毒或被入侵后,可能会导致系统报错.系统进程 CPU 或内存使用异常.无法远程等诸多问题.遇到这类问题后往往都比较急躁,不知如何下手,所以今天技术专家五贤来教大家如何诊断你的服务器是否有病毒? 一张图教你如何理清处

Photoshop简单快速制作双重二次曝光效果教程

给各位Photoshop软件的使用者们来详细的解析分享一下简单快速制作双重二次曝光效果的教程. 教程分享: 打开一张适合做重曝的图片,比如侧面呀四分之三脸的.调好色调液化磨皮这些哈.   然后就开始到网上找素材喽,我是平常积累了一些素材,这里要一张张试啊,个人觉得纹路清晰一些的树.叶.花什么的挺好.   接下来的步骤就是用移动工具把人物拖到你选好的背景素材当中,调整为合适大小之后就可以来进行透明度的修改.   因为我的PS技术比较渣,看到微博上有双重曝光的照片觉得很美很特别,所以就大胆地想尝试一

Illustrator简单快速的绘制可爱小鸟教程

给各位Illustrator软件的使用者们来详细的简单快速的绘制可爱小鸟的教程. 教程分享: 第一步:根据照片我们先用2分钟仔细观察下山雀的特点和动态,观察好后我们打开Adobe Illustrator CS2软件,用工具箱中的椭圆工具拉个圆做山雀的身体,如图A所示;然后我们再按刚才的方法拉个圆做山雀的头部,如图B所示.   第二步:使用工具箱中的铅笔工具,沿图中虚线部分进行路径修改,如图A所示;修改好路径后用填充工具把线转换成面,并选择类似颜色,如图B所示.   第三步:选中上面的那个部分,点

快速修改android系统默认日期方法

快速修改android系统默认日期方法             在android系统的设备上,都有一个默认的开始日期,看过很多设备,有些设备在没有联网的时候没有同步到系统时间的时候,居然默认的还是1970年的日期,也见过有些设备默认到2000年1月1日的,这样相对进了一步,但是还不够.笔者下面很简单的介绍一下一个超级简单的方法: /***********************************************************************************

CSS3变换 教你简单快速实现简单的变换效果

CSS3变换 教你简单快速实现简单的变换效果