热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

前端框架_TwitterBootstrap:前端框架利器

本文由编程笔记#小编为大家整理,主要介绍了TwitterBootstrap:前端框架利器相关的知识,希望对你有一定的参考价值。 
本文由编程笔记#小编为大家整理,主要介绍了Twitter Bootstrap:前端框架利器相关的知识,希望对你有一定的参考价值。


 Web 前端开发者每天都与 html、CSS、Javascript 打交道,然而不少人都是周而复始地写模板、样式和交互效果,并没有想过如何将这些重复的工作整合在一起。Twitter 推出的 Bootstrap 能够帮助 Web 前端开发者摆脱这种重复劳动。

        Bootstrap 的历史

        为了应对复杂的需求,早期的 Twitter 前端工程师在开发网站时几乎采用了所有自己熟悉的前端库。造成了网站维护困难、扩展性不强、开发成本高等问题。此时 BootStrap 被提上了日程。Twitter 要求前端工程师完全依靠这一单一框架进行前端开发。

        Twitter 在 2011 年 8 月将其开源,并在 2012 年 2 月 3 日发布了2.0版。在 GitHub 上,这个项目已有拥超过 2 万位关注者和 4000 个分支。 Bootstrap 的设计者、著名前端工程师 Mark Otto 这样写道:“Bootstrap 是我和 Jacob Thornton 编写的一个前端工具箱,目的是为了帮助设计师和 Web 前端开发人员快速有效地创建一个结构简单、性能优良、页面精致的 Web 应用。它使用了最新的浏览器技术,可以提供精致的网页排版方式以及表单、按钮、表格、网格栅格化、导航等诸多元素。”Bootstrap 的内置样式继承了 Mark Otto 简洁亮丽的设计风格,任何开发团队都能使用它提供的 HTML 模板、CSS 样式和 jQuery 组件来布署或者重建一个外观漂亮的页面应用。

        BootStrap 2 的新特性

        BootStrap 2 在原有特性的基础上着重改进了用户的体验和交互性,比如新增加的媒体展示功能,适用于智能手机上多钟屏幕规格的响应式布局,另外新增了 12 款 jQuery 插件,可以满足 Web 页面常用的用户体验和交互功能。

        BootStrap 2 的运用

        Bootstrap 的文件结构

        读者可以直接从 GitHub 下载到 Bootstrap 源码,本地解压后可以看到这样的目录结构:docs、img、jquery-ui- bootstrap、js 和 less。其中最为重要的是“docs”下的 CSS 样式文件,“less”中的编译文件和“js”下的 jQuery 插件。

        Bootstrap 的安装

        关于如何应用提取出来的文件大致有两步:第一是如何安装 Bootstrap 的基本样式,第二是如何调用 Bootstrap 的 jQuery 插件,我们首先来看样式的安装。

        样式的安装有多种方法,图 1 展示的是一种常用的调用样式方法“link”。

图 1 Bootstrap 样式调用方式

        这里有两个关键点,其中“bootstrap.css”是 Bootstrap 中的基本样式文件,只要使用 Bootstrap 就必须调用这个文件。而 “bootstrap-responsive.css”则可以根据你的爱好来选择,如果想让项目具有响应式布局的效果,就必须要调用这个样式文件,而且调 用必须遵循先后顺序,“bootstrap-responsive.css”必须放置在“bootstrap.css”之后,否则便不具有响应式布局功 能。而最后的“style.css”是项目中的自定义样式,用来覆盖 Bootstrap 中的一些默认设置,便于开发者定制。

        “CSS”样式安装完后,就可以进入“js”的调用,方法很简单,只需把想要的 jQuery 插件按照与上一步相似的方式加入到代码中。

        Bootstrap 2 的模块

        BootStrap 2 的模块从大的方面可以分为布局框架、页面排版、基本组件、jQuery 插件以及变量编译的 Less 几个部分。与第 1 版相比,Bootstrap 2 增加了多个新模块,比如布局框架中的“响应式布局”,页面排版中的“ICON”,基本组件中的“进度条”,而 jQuery 插件从以前的 5 个效果增加到 12 个,完全可以满足项目常用的交互效果。下面来简单了解一下 Bootstrap 2 中各模块的功能。

        页面布局

        布局在每个项目中都必不可少,Bootstrap 在 960gs 的基础上扩展了一套优秀的 Grids 布局,而在“响应式布局”中有更强大的功能,能让网格布局适应各种设备。使用也相当简单,只需要按照 HTML 模板应用,就能轻松地构建你所需的布局效果。此外,改变模板中的类名,就能实现不同的布局风格。比如常见的“固定布局”,只需要在 HTML 中添加“container”类名;而要实现“流体布局”,只需要在 HTML 中添加“container-fluid”类名。 Bootstrap 还为开发者设计了“Responsive”, 令布局框架更为出色。开发者可以在此基础上进行任何样式的覆盖,从而实现理想中的响应式设计。

        页面排版

        页面排版的好坏直接影响产品风格,说直白点就是好不好看。在 Bootstrap 中,页面的排版都是从全局的概念上出发,定制了主体文本、段落文本、强调文本、标题、Code 风格、按钮、表单、表格等格式。而 Bootstrap 2 中又添加了几个新亮点。其一是“Code”使用了“Google Prettify”插件,增强了代码的阅读体验;其二在“按钮”中增加了组合、下拉、图标等效果,如图 2 所示。

Twitter Bootstrap:前端框架利器

        第三就是“Icon”的使用,Bootstrap 在“Icon”部分采用了“Sprites”技术,为大家准备了上百种常用的“Icon”图标应用。

        说起 Icon,这里有必要在向读者推荐一个从 BootStrap 扩展出来的 Font Awesome 项目。它是 Dave Gandy 在 Bootstrap 的基础上扩展出来的一个 Icon 主题,最大的特点在于,整套图标中没有运用任何图片。大家可能会觉得奇怪,没有图片如何制作 Icon?难道是通过纯 CSS 编写的吗?是的,Font Awesome 项目中主要运用了 CSS3 的“@font-face”和“伪元素”一起实现。

        要使用 Font Awesome,首先需要在服务器上安装“fontawesome-webfont”字体,接着在样式中通过“@font-face”来启用这些字体:

Twitter Bootstrap:前端框架利器

        具备了上面的条件后,就只要样式中调用“FontAwesome”字体,并在“伪类元素”中使用对应的“字符编码”:

Twitter Bootstrap:前端框架利器

        这样一来,就不采用任何图片实现 Icon 效果,一起来看一个效果图吧。

Twitter Bootstrap:前端框架利器

        基本组件

        基本组件是 Bootstrap 2 的精华之一,里面都是开发者平时需要的交互组件。比如“网站导航”、“Tabs”、“工具条”、“面包屑”、“分页栏”、“提示标签”、“产品展示”、 “提示信息块”和“进度条”等。这些组件都配有“jQuery”插件,运用它们可以大幅度提高用户的交互体验,使产品不再那么呆板无吸引力。说了这么多种 组件,具体该如何使用?下面我以常见的“Tabs”组件为例,向大家展示使用方法。

        要想使用 BootStrap 基本组件,必须满足三点:第一,最基本的 HTML 结构要对号;第二,需要 Bootstrap 中的“jQuery”插件提供相应功能;第三,在项目中对应的“Tabs”元素上启用“Tabs”功能。

        1. HTML Markup

Twitter Bootstrap:前端框架利器

        2. 调用 jQuery 插件

        3. 开启“Tab”功能

Twitter Bootstrap:前端框架利器

        对于其他组件,使用方法相近,在此不做赘述。

        jQuery 插件

        Bootstrap 中的 jQuery 插件主要用来帮助开发者实现与用户交互的功能,在第 1 版中,Bootstrap 就为大家提供了 6 种常见的插件。

        弹出框(Modals):在 Javascript 模板基础上自定义的一款流线型、灵活性极强的弹出蒙板效果的插件;

        下拉框(Dropdowns):Bootstrap 中一款轻巧实用的插件,可能帮助你制作具有下拉功能,比如下拉菜单、下拉按钮、下拉工具条等效果;

        滚动条(Scrollspy):实现滚动条位置的效果,比如在导航中有多个标签,用户点击其中一个标签,滚动条会自己动定位到导航中标签对应的文本位置;

        Tabs:这个插件能够快速实现本地内容的转换,动态切换标签对应的本地内容;

        提示工具(Tooltips):是一款优秀的 jQuery 插件,无需加载任何图片,采用 CSS3 新技术,动态显示“data-attributes”存储的标题信息;

        提示面板(Popover):在 Tooltips 的插件上扩展,用来显示一些叠加内容的提示效果,此插件需要配合 Tooltips 一起使用。

        Bootstrap 2 在前面 6 种插件的基础上又新增加了 6 种 jQuery 插件:

        警报信息(Alert):用来关闭警报信息块;

        按钮(Button):用来控制按钮的状态或更多组件功能,比如“复选框”、“单选按钮”以及“载入状态条”等;

        手风琴(Collapse):一款轻巧实用的手风琴插件,可以用来制作折叠面板或菜单等效果;

        幻灯片(Carouse):实现图片播放功能的插件;

        补全文本(Typeahead):可以记住文本框输入的文本,下次输入时可以自动补全;

        动画效果(Transitions):BootStrap 使用这个插件,为一些动效果增加了过渡性,使动画效果更细腻、生动。

        上面简单介绍了 Bootstrap 2 中的 jQuery 插件,至于如何使用,还需要根据 Bootstrap 所提供的文档,以及各插件的参数,具体问题具体分析。因为只有充分了解,才能灵活运用。

        变量编译 Less

        Less 是一个动态 CSS 语言框架,基于自己的 JS 引擎或者服务器端对传统的 CSS 进行了动态的扩展,使得 Less 具有更强大的功能和灵活性。基于 Less,我们编辑 CSS 就可以像使用编程语言一样,定义变量、嵌入声明、混合模式、运算等。Bootstrap 中有一套编辑好的 Less 框架,开发者可以将其应用到自己的项目,也可以通过 less.js、Less.app 或 Node.js 等方法来转译 Less 文件。Less 文件一旦编译,Bootstrap 框架就仅包含 CSS 样式,这意味着没有多余的图片、Flash 之类元素。Less 好处是利于编写,但缺点是只适合用于开发一些简洁的 CSS 样式。举个简单的例子,如果你想为多个样式设置同一个颜色,可以这样写。

        编译后的 CSS 如下所示:

        以上代码只是最简的 Less 应用示范。除了变量,还可以在 CSS 中进行数学运算、传参、文件相互引用、规则嵌套等。可以想象,这种编写 CSS 的方式会为前端开发带来多大的改变。无论是从灵活性、扩展性还是可维护性上,Less 都让 CSS 开发效率有了大幅提升。

        Bootstrap 的 jQuery UI

        Bootstrap 的 jQuery UI 其实是从框架中衍生出来的一个 jQuery UI 主题,受到 Twitter 项目的启发,Addy Osmani 也在 Bootstrap 的基础上整理出一个 jQuery UI Bootstrap 主题。

        jQuery UI Bootstrap 除了包含 Bootstrap 各个方面功能之外,还在其基础上补充了以下特性:动态添加 Tabs、日期范围选择组件、自定义文件载入框、滑动块、日期控件。

        BootStrap 2 案例

        通过前面的介绍,你可能已经体会到 Bootstrap 的强大,但能否运用到生产项目中,可能还存有疑问。

        目前使用 Bootstrap 的著名案例有 NASA 和 MSNBC 的 Breaking News。此外很多 CMS 也在运用 Bootstrap 框架,比如大家熟悉的 WordPress、Drupal 等。如果你还想了解更多 Bootstrap 案例,可以参考 Wrapbootstrap.com。

        BootStrap 2 的优势和缺点

        如今的 Bootstrap 已包括了几十个组件,每个组件都自然地结合了设计与开发,具有完整的实例文档,定义了真正的组件和模板。无论处在何种技术水平的开发者,也无论处在哪个工作流程中,都可以使用 Bootstrap 快速、方便地构建开发者喜欢的应用。

        难能可贵的是,Bootstrap 依旧本着“并行开发”、“作为产品的风格指南”和“迎合所有的技能水平”的原则帮助开发者解决实际问题,不断完善自己,吸引更多人选择 Bootstrap 应用于自己的项目中。

        然而古人云“万物相生相克”,有好就有坏,Bootstrap 也是一样。对于在国内的开发者来说,最可怕的就是 IE 兼容问题。目前 Bootstrap 对 IE6 到 IE8 的支持都不友好。另一个缺点是,采用 Bootstrap 的模板,网站结构时常会显得臃肿。此外,覆盖一些样式时会造成代码冗余。但与其他前端框架相比,我个人觉得 Bootstrap 的缺点仅此而以,至于其他方面希望有机会与大家一起探讨和学习。

        总结

        Bootstrap 是一套前端开发利器。它可以帮助我们加速项目开发,让我们身处在一个完备的系统中,拥有一致的设计和实现方法。不需要在外观上花费过多时间,使开发者能将精力集中于更重要的功能。

        Bootstrap 将改变我们的合作方式与开发进程,任何人都可以基于 Bootstrap 建立可扩展的前端工具包,或者在它的基础上启动属于自己的框架。

        作者廖伟华,网名大漠,目前供职于上海慕和网络科技视觉设计部,从事 Web 前端和手机游戏工作,对 Web 前端、移动端、前端框架抱有浓厚兴趣。



推荐阅读
  • [译]技术公司十年经验的职场生涯回顾
    本文是一位在技术公司工作十年的职场人士对自己职业生涯的总结回顾。她的职业规划与众不同,令人深思又有趣。其中涉及到的内容有机器学习、创新创业以及引用了女性主义者在TED演讲中的部分讲义。文章表达了对职业生涯的愿望和希望,认为人类有能力不断改善自己。 ... [详细]
  • Nginx使用AWStats日志分析的步骤及注意事项
    本文介绍了在Centos7操作系统上使用Nginx和AWStats进行日志分析的步骤和注意事项。通过AWStats可以统计网站的访问量、IP地址、操作系统、浏览器等信息,并提供精确到每月、每日、每小时的数据。在部署AWStats之前需要确认服务器上已经安装了Perl环境,并进行DNS解析。 ... [详细]
  • 这是原文链接:sendingformdata许多情况下,我们使用表单发送数据到服务器。服务器处理数据并返回响应给用户。这看起来很简单,但是 ... [详细]
  • CSS3选择器的使用方法详解,提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]
  • Android Studio Bumblebee | 2021.1.1(大黄蜂版本使用介绍)
    本文介绍了Android Studio Bumblebee | 2021.1.1(大黄蜂版本)的使用方法和相关知识,包括Gradle的介绍、设备管理器的配置、无线调试、新版本问题等内容。同时还提供了更新版本的下载地址和启动页面截图。 ... [详细]
  • 知识图谱——机器大脑中的知识库
    本文介绍了知识图谱在机器大脑中的应用,以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例,说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案,如搜索关键词"Marie Curie",会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革,不仅美国的微软必应,中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]
  • 如何用UE4制作2D游戏文档——计算篇
    篇首语:本文由编程笔记#小编为大家整理,主要介绍了如何用UE4制作2D游戏文档——计算篇相关的知识,希望对你有一定的参考价值。 ... [详细]
  • 本文介绍了使用PHP实现断点续传乱序合并文件的方法和源码。由于网络原因,文件需要分割成多个部分发送,因此无法按顺序接收。文章中提供了merge2.php的源码,通过使用shuffle函数打乱文件读取顺序,实现了乱序合并文件的功能。同时,还介绍了filesize、glob、unlink、fopen等相关函数的使用。阅读本文可以了解如何使用PHP实现断点续传乱序合并文件的具体步骤。 ... [详细]
  • 解决Cydia数据库错误:could not open file /var/lib/dpkg/status 的方法
    本文介绍了解决iOS系统中Cydia数据库错误的方法。通过使用苹果电脑上的Impactor工具和NewTerm软件,以及ifunbox工具和终端命令,可以解决该问题。具体步骤包括下载所需工具、连接手机到电脑、安装NewTerm、下载ifunbox并注册Dropbox账号、下载并解压lib.zip文件、将lib文件夹拖入Books文件夹中,并将lib文件夹拷贝到/var/目录下。以上方法适用于已经越狱且出现Cydia数据库错误的iPhone手机。 ... [详细]
  • 【MEGA DEAL】Ruby on Rails编码训练营(97%折扣)限时特惠!
    本文介绍了JCG Deals商店提供的Ruby on Rails编码训练营的超值优惠活动,现在只需29美元即可获得,原价为$1,296。Ruby on Rails是一种用于Web开发的编程语言,即使没有编程或网页设计经验,也能在几分钟内构建专业的网站。该训练营共有6门课程,包括使用Ruby on Rails进行BDD的课程,使用RSpec 3和Capybara等。限时特惠,机会难得,赶快行动吧! ... [详细]
  • 本文介绍了南邮ctf-web的writeup,包括签到题和md5 collision。在CTF比赛和渗透测试中,可以通过查看源代码、代码注释、页面隐藏元素、超链接和HTTP响应头部来寻找flag或提示信息。利用PHP弱类型,可以发现md5('QNKCDZO')='0e830400451993494058024219903391'和md5('240610708')='0e462097431906509019562988736854'。 ... [详细]
  • 小程序自动授权和手动接入的方式及操作步骤
    本文介绍了小程序支持的两种接入方式:自动授权和手动接入,并详细说明了它们的操作步骤。同时还介绍了如何在两种方式之间切换,以及手动接入后如何下载代码包和提交审核。 ... [详细]
  • 如何实现JDK版本的切换功能,解决开发环境冲突问题
    本文介绍了在开发过程中遇到JDK版本冲突的情况,以及如何通过修改环境变量实现JDK版本的切换功能,解决开发环境冲突的问题。通过合理的切换环境,可以更好地进行项目开发。同时,提醒读者注意不仅限于1.7和1.8版本的转换,还要适应不同项目和个人开发习惯的需求。 ... [详细]
  • 恶意软件分析的最佳编程语言及其应用
    本文介绍了学习恶意软件分析和逆向工程领域时最适合的编程语言,并重点讨论了Python的优点。Python是一种解释型、多用途的语言,具有可读性高、可快速开发、易于学习的特点。作者分享了在本地恶意软件分析中使用Python的经验,包括快速复制恶意软件组件以更好地理解其工作。此外,作者还提到了Python的跨平台优势,使得在不同操作系统上运行代码变得更加方便。 ... [详细]
  • mui框架offcanvas侧滑超出部分隐藏无法滚动如何解决
    web前端|js教程off-canvas,部分,超出web前端-js教程mui框架中off-canvas侧滑的一个缺点就是无法出现滚动条,因为它主要用途是设置类似于qq界面的那种格 ... [详细]
author-avatar
名将箱包_714
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有