`
gemantic
  • 浏览: 338788 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Bootstrap

阅读更多
Bootstrap英文意思是:靴带;
这里介绍Bootstrap 是一种Web前端CSS框架
Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。
Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。

文档章节
(1)脚手架:
全局性的样式文件,用于重置背景、链接样式、栅格系统等,并包含两个简单的布局结构。
(2)基本CSS样式:
常见的HTML元素 -- 如排版、代码、表格、表单、和按钮的样式。还包括 Glyphicons, 一个非常棒的图标集。
(3)组件:
常见界面组件 -- 如标签、pill、导航、警告、页面标题的基本样式,JavaScript插件
(4)JavaScript插件
和组件类似,这些Javascript插件用来实现提示(tooltip)、弹出框(popover)、模态对话框(modal)等具有交互性的组件。
(5)组件列表
组件库 和 JavaScript插件集 一同提供了以下组件元素:
按钮组
    按钮下拉菜单、用于导航的标签、pill、列表、导航条、 Labels、 Badges、Page headers and hero unit、缩略图、警告对话框、 进度条、模态对话框(Modals)、下拉菜单(Dropdowns)、Tooltips、Accordion、Popovers、Carousel、Typeahead
3、基本的HTML模版
现在, 这里展示一个典型的HTML文件:
<!DOCTYPE html>
    <html>
    <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
    <h1>Hello, world!</h1>
    <script src="http://code.jquery.com/jquery.js"></script>
    </body>
    </html>
使用了Less的Bootstrap具备如下优点:
1、Bootstrap实现起来依旧很简单,使用也很简单,把Bootstrap.css拖入你的代码即可。编译less文件可以用less.js,Less.app或Node.js等多种方案实现。
2、一旦编译,Bootstrap框架仅包含CSS文件,这意味着没有多余的图片、Flash或Javascript,只有用于Web应用开发的简洁而强大的CSS样式
兼容性:
目前Bootstrap的最新版本是2.0,支持几乎所有的主流浏览器,包括Safari、Chrome,Firefox、IE7.0及以上,最新版本还支持智能手机WebUI。
2.0的新特性:
Bootstrap的版本更新很快,2011年11月刚发布了1.4,2012年2月份就再次放出新版本2.0,而且有了大幅改进。
2.0版本采用了更灵活也更受欢迎的12栏网格布局,并以此来实现其各种布局框架。增加了响应式设计,以适
应各种移动终端的需求。
完善和改进原有样式库,并提供更丰富的新样式,包括样式繁多的图标(icon),漂亮易用的进度条等。
改进和增加了自定义jQuery插件,完善文档,修复bug,同时还提供了很多基于Bootstrap构建的网站样例。
Less CSS 是一个使用广泛的 CSS 预处理器,通过简单的语法和变量对 CSS 进行扩展,可减少很多 CSS 的代码量。LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承, 运算, 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox),也可一在服务端运行 (借助 Node.js).
个人觉得Bootstrap 的网站简洁大方,很少用到图片,但是效果确实很炫(大家有没有注意到里面的小三角是纯css写的哦)。唯一的缺憾就Bootstrap里面也有很多html5和css3,而ie尤其是ie6对它支持太烂了。
关于less,关于一下嵌套,可以运算相对于css比较强大。除此之外我没有发现less特别强的地方。而且它需要依赖js。鉴于本人也是菜鸟,水平有限,在此仅举一些入门级例子和大家一起相互交流学习,感兴趣的童鞋可以自己研究一下哈。





分享到:
评论
3 楼 gemantic 2013-06-27  
Bootstrap 不错前端框架,本人正在用这个做,里面的组件不错哦,简单易用而且挺玄。
2 楼 gemantic 2013-05-23  
Bootstrap谁用谁知道,less也还不错滴!
关于响应式,你可以参考一下,都还不错的
http://mediaqueri.es/
1 楼 gemantic 2013-04-10  
Bootstrap的网格模型非常好用.简单的说.
就是将屏幕的宽度分成12列.
通过设置每个Div的大小就可以方便的完成布局.

Bootstrap更神奇的地方就是响应式设计.
你几乎不用有任何的代价就能轻易的做出适应各种屏幕的页面.


Bootstrap布局的例子


葡萄藤
http://www.ptteng.com

可以用手机和Pad访问一下, 感受一下响应式布局.

相关推荐

    bootstrap bootstrap-3.3.7

    这个里面 包含整个bootstrap源程序 你所需要的都在了、里面.Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。 本教程将向您...

    Bootstrap5 图标库 bootstrap-icons

    Bootstrap5图标库bootstrap-icons是前端开发中一个非常实用的资源,它为开发者提供了大量美观、一致的SVG图标,可以方便地集成到Bootstrap5项目中,为网页设计增添丰富的视觉元素。Bootstrap图标库的设计理念是简洁...

    bootstrap文件及bootstrap图标大全

    Bootstrap,由Twitter开发,是一款广泛应用于前端开发的开源框架,以其简洁、直观和强大的特性而闻名。Bootstrap 3.3.7是该框架的一个稳定版本,提供了丰富的组件、响应式设计以及易于定制的样式,旨在帮助开发者...

    Bootstrap后台登录界面模板_后台模板_bootstrap_

    Bootstrap是世界上最流行的前端开发框架之一,它为开发者提供了丰富的组件和设计工具,使得构建响应式、移动优先的网站变得简单高效。在这个“Bootstrap后台登录界面模板”中,我们可以找到一个预设计好的登录页面...

    开发工具 dataTables.bootstrap.min

    开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min...

    bootstrap源码.rar

    Bootstrap是世界上最流行的前端开发框架,由Twitter的开发者创建,它为快速构建响应式、移动优先的网站提供了强大的工具。这个“bootstrap源码.rar”压缩包包含的正是Bootstrap框架的源代码,这对于理解其工作原理、...

    Bootstrap 图标库下载

    Bootstrap Icons:Bootstrap 有史以来第一次拥有自己的图标库,并且是专门为 Bootstrap 的组件和文档定制开发的。 Bootstrap Icons 的设计初衷是与 Bootstrap 组件配合使用,从表单到导航组件等。Bootstrap Icons ...

    bootstrap-4.6.2下载bootstrap.min.cssbootstrap.bundle.min.js

    在"bootstrap-4.6.2下载bootstrap.min.cssbootstrap.bundle.min.js"的标题中,我们可以看到两个关键文件:`bootstrap.min.css`和`bootstrap.bundle.min.js`。`bootstrap.min.css`是Bootstrap的核心CSS文件,经过压缩...

    bootstrap.min.js和bootstrap.min.css

    Bootstrap是世界上最受欢迎的前端开发框架之一,用于构建响应式、移动优先的网页项目。这个框架提供了丰富的组件、样式和JavaScript插件,极大地简化了网页设计和开发过程。在标题和描述中提到的"bootstrap.min.js...

    bootstrap布局设计器

    Bootstrap是世界上最流行的前端开发框架之一,它为开发者提供了丰富的组件和设计工具,使得构建响应式、移动优先的网站变得简单高效。"Bootstrap布局设计器"是一个专门用于创建和编辑Bootstrap布局的工具,它可以...

    bootstrap-3.4.1-dist.zip,bootstrap-4.6.1-dist.zip

    Bootstrap是世界上最受欢迎的前端开发框架之一,用于构建响应式布局和移动设备优先的Web项目。这个框架由Twitter的开发者创建,极大地简化了网页设计和开发流程。本压缩包包含两个版本的Bootstrap——3.4.1和4.6.1,...

    bootstrap实现的自适应页面简单应用示例

    Bootstrap实现的自适应页面简单应用示例 在本文中,我们将详细介绍Bootstrap实现的自适应页面简单应用示例,结合具体实例形式分析了基于Bootstrap的列表布局结构页面实现与使用技巧。 首先,让我们了解什么是...

    bootstrap 3.4.1 中文文档 离线

    bootstrap中文文档,实际上是将bootstrap整个站扒下来了,使用浏览器打开index.htm即可,注意编码格式为UTF-8,如果出现乱码考虑修改浏览器编码。 主要便于离线环境下前端开发使用。 Bootstrap 是最受欢迎的 HTML...

    bootstrap评论列表模板

    Bootstrap评论列表模板是一种基于Bootstrap前端框架设计的网页组件,它为网站提供了一种标准化的、美观的、响应式的用户评论展示方式。Bootstrap是由Twitter开发并开源的,它是一套强大的前端开发工具集,包含了丰富...

    Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统

    Bootstrap栅格系统是一种基于12列的响应式布局框架,旨在帮助开发者构建适应不同设备屏幕大小的网页。这种系统能够确保网页在PC、平板、手机等不同设备上呈现出优雅的自适应效果,优化用户体验。Bootstrap栅格系统的...

    Bootstrap实现登录校验表单(带验证码)

    Bootstrap是一个流行的前端开发框架,用于快速构建响应式和移动优先的网站。在本文中,我们将探讨如何使用Bootstrap来创建一个带有验证码和验证功能的登录表单。 首先,要创建这样一个表单,我们需要引入Bootstrap...

    Bootstrap中文手册-v4.3.1.pdf

    Bootstrap 是一个广泛使用的前端开发框架,用于创建响应式网站和应用程序。它最初由 Twitter 的开发人员马克·奥托(Mark Otto)和雅各布·桑特森(Jacob Thornton)开发,并已成为世界上使用最广泛的开源前端框架之...

    bootstrap 期末项目 设计报告 模板

    Bootstrap 期末项目设计报告模板知识点总结 一、Bootstrap 介绍 Bootstrap 是一个流行的前端框架,用于构建响应式、mobile-first 的 Web 应用程序。它提供了一些常用的 HTML、CSS 和 JavaScript 组件,可以快速...

    bootstrap详细学习课件文档

    Bootstrap 详细学习课件文档 Bootstrap 是由美国 Twitter 公司开发的,目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的前端框架,简单灵活,可以大大提高 web 开发效率。 Bootstrap 概述 ...

    bootstrap_4.0_template

    Bootstrap 4.0 是一个流行的前端开发框架,用于构建响应式和移动优先的网页项目。这个资源包"bootstrap_4.0_template"提供了一个基于Bootstrap 4.0的基础模板,适用于快速开发前台和后台界面。下面我们将深入探讨...

Global site tag (gtag.js) - Google Analytics