`
gemantic
  • 浏览: 335878 次
  • 性别: 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 开发更加快捷。 本教程将向您...

    Bootstrap 图标库下载

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

    bootstrap-4.5.0.zip

    Bootstrap (Web框架 可用) Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。Bootstrap提供了优雅的...

    Bootstrap期末课程设计

    资源名称:Bootstrap期末课程设计 内容使用语言:HTML5+css3+js+bootstrap框架 使用/学习场景:完成整个学期成果,了解框架的好处 应用场景:对于使用框架对于完成一个网页的实现更加容易 特点:加深对前端语言的...

    bootstrap-table后端分页功能完整实例

    本文实例讲述了bootstrap-table后端分页功能。分享给大家供大家参考,具体如下: 使用bootstrap-table实现后台分页 插件资源点击此处本站下载。 引用以下css &lt;link rel="stylesheet" href="../plugins/...

    bootstrap-editable.zip

    可编辑bootstrap-table及相关组件:bootstrap3、bootstrap-table相关、bootstrap-table-editable.js、bootstrap-editable.js、bootstrap-editable.css; 配合起来,可以实现可编辑bootstrap-table列表。代码实现: ...

    bootstrap实现登录页面

    实现静态的登录页面,借助于bootstrap框架。Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。 ...

    Bootstrap.By.Example.1785288

    Master Bootstrap 4's frontend framework and build your websites faster than ever before About This Book Become an expert in Bootstrap framework, and speed up front-end development and prototyping ...

    Bootstrap HTML5 Responsive Templates (Bootstrap模版24种)

    (Bootstrap模版24种) Agency.zip andia-agency.zip bolt.zip bootbusiness.zip brushed.zip business-casual.zip codester-free-responsive-bootstrap-template.zip essentia.zip flatty.zip flat_theme.zip ...

    Bootstrap5 图标库 bootstrap-icons

    Bootstrap5 图标库 bootstrap-icons

    bootstrap-table 分页Demo

    bootstrap-table后端分页的参数设置Demo。 bootstrap-table是一款非常有名的开源表格插件,在很多项目中广泛的应用。Bootstrap-table插件提供了非常丰富的属性设置,可以实现查询、分页、排序、复选框、设置显示列、...

    全面解析多种Bootstrap图片轮播效果

    分享了三种Bootstrap图片轮播效果,相信总有一款你满意的! 第一种效果:Bootstrap简单轮播 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Bootstrap 实例 - 简单的轮播(Carousel)插件&lt;/title...

    swagger-bootstrap-ui-1.9.6-API文档-中文版.zip

    赠送jar包:swagger-bootstrap-ui-1.9.6.jar; 赠送原API文档:swagger-bootstrap-ui-1.9.6-javadoc.jar; 赠送源代码:swagger-bootstrap-ui-1.9.6-sources.jar; 赠送Maven依赖信息文件:swagger-bootstrap-ui-...

    基于bootstrap-table 实现 右侧列固定

    基于bootstrap-table 实现 右侧列固定,也可以针对左侧列固定,针对操作列使用起来非常方便,引用jquery、bootstrap-table-fixed 样式和js文件后,可以随意设置,灵活。 fixedColumns: true,//fixedtNumber:2, //...

    Bootstrap 3 综合实战项目教程,Web前端响应式开发项目实战视频教程带源码资源

    Bootstrap 3 综合实战项目教程,Web前端响应式开发项目实战视频教程带源码资源Bootstrap 3 综合实战项目教程,Web前端响应式开发项目实战视频教程带源码资源Bootstrap 3 综合实战项目教程,Web前端响应式开发项目...

    两套bootstrap5框架后台管理模板 - Amdash

    Amdash是基于Bootstrap5框架实现的后台管理模板。它有多个仪表盘样式,工作在所有主要浏览器、桌面和所有智能手机设备上。非常易于定制和开发人员友好的HTML5模板。集合与最新jQuery UI组件和bootstrap插件。它可以...

    bootstrap

    bootstrap

    bootstrapValidator.js验证在bootstrap4.0使用

    1.bootstrap使用4.0 2.customValidator.css Bootstrap v4.0.0-beta (https://getbootstrap.com) jQuery v3.2.1

    开发工具 dataTables.bootstrap.min

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

    Bootstrap Table 搜索框和查询功能

    知识点bootstrapTable 刷新和查询配置 2.提升js代码性能 1.减少全局变量声明 2.缓存dom节点查找结果 3.局部变量缓存全局变量  /** * @param col bootstrapTable列表生成配置对象 */ var searchValue ={};//查询...

Global site tag (gtag.js) - Google Analytics