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。鉴于本人也是菜鸟,水平有限,在此仅举一些入门级例子和大家一起相互交流学习,感兴趣的童鞋可以自己研究一下哈。
分享到:
相关推荐
这个里面 包含整个bootstrap源程序 你所需要的都在了、里面.Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。 本教程将向您...
Bootstrap5图标库bootstrap-icons是前端开发中一个非常实用的资源,它为开发者提供了大量美观、一致的SVG图标,可以方便地集成到Bootstrap5项目中,为网页设计增添丰富的视觉元素。Bootstrap图标库的设计理念是简洁...
Bootstrap,由Twitter开发,是一款广泛应用于前端开发的开源框架,以其简洁、直观和强大的特性而闻名。Bootstrap 3.3.7是该框架的一个稳定版本,提供了丰富的组件、响应式设计以及易于定制的样式,旨在帮助开发者...
Bootstrap是世界上最流行的前端开发框架之一,它为开发者提供了丰富的组件和设计工具,使得构建响应式、移动优先的网站变得简单高效。在这个“Bootstrap后台登录界面模板”中,我们可以找到一个预设计好的登录页面...
开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min...
Bootstrap是世界上最流行的前端开发框架,由Twitter的开发者创建,它为快速构建响应式、移动优先的网站提供了强大的工具。这个“bootstrap源码.rar”压缩包包含的正是Bootstrap框架的源代码,这对于理解其工作原理、...
Bootstrap Icons:Bootstrap 有史以来第一次拥有自己的图标库,并且是专门为 Bootstrap 的组件和文档定制开发的。 Bootstrap Icons 的设计初衷是与 Bootstrap 组件配合使用,从表单到导航组件等。Bootstrap Icons ...
在"bootstrap-4.6.2下载bootstrap.min.cssbootstrap.bundle.min.js"的标题中,我们可以看到两个关键文件:`bootstrap.min.css`和`bootstrap.bundle.min.js`。`bootstrap.min.css`是Bootstrap的核心CSS文件,经过压缩...
Bootstrap是世界上最受欢迎的前端开发框架之一,用于构建响应式、移动优先的网页项目。这个框架提供了丰富的组件、样式和JavaScript插件,极大地简化了网页设计和开发过程。在标题和描述中提到的"bootstrap.min.js...
Bootstrap是世界上最流行的前端开发框架之一,它为开发者提供了丰富的组件和设计工具,使得构建响应式、移动优先的网站变得简单高效。"Bootstrap布局设计器"是一个专门用于创建和编辑Bootstrap布局的工具,它可以...
Bootstrap是世界上最受欢迎的前端开发框架之一,用于构建响应式布局和移动设备优先的Web项目。这个框架由Twitter的开发者创建,极大地简化了网页设计和开发流程。本压缩包包含两个版本的Bootstrap——3.4.1和4.6.1,...
Bootstrap实现的自适应页面简单应用示例 在本文中,我们将详细介绍Bootstrap实现的自适应页面简单应用示例,结合具体实例形式分析了基于Bootstrap的列表布局结构页面实现与使用技巧。 首先,让我们了解什么是...
bootstrap中文文档,实际上是将bootstrap整个站扒下来了,使用浏览器打开index.htm即可,注意编码格式为UTF-8,如果出现乱码考虑修改浏览器编码。 主要便于离线环境下前端开发使用。 Bootstrap 是最受欢迎的 HTML...
Bootstrap评论列表模板是一种基于Bootstrap前端框架设计的网页组件,它为网站提供了一种标准化的、美观的、响应式的用户评论展示方式。Bootstrap是由Twitter开发并开源的,它是一套强大的前端开发工具集,包含了丰富...
Bootstrap栅格系统是一种基于12列的响应式布局框架,旨在帮助开发者构建适应不同设备屏幕大小的网页。这种系统能够确保网页在PC、平板、手机等不同设备上呈现出优雅的自适应效果,优化用户体验。Bootstrap栅格系统的...
Bootstrap是一个流行的前端开发框架,用于快速构建响应式和移动优先的网站。在本文中,我们将探讨如何使用Bootstrap来创建一个带有验证码和验证功能的登录表单。 首先,要创建这样一个表单,我们需要引入Bootstrap...
Bootstrap 是一个广泛使用的前端开发框架,用于创建响应式网站和应用程序。它最初由 Twitter 的开发人员马克·奥托(Mark Otto)和雅各布·桑特森(Jacob Thornton)开发,并已成为世界上使用最广泛的开源前端框架之...
Bootstrap 期末项目设计报告模板知识点总结 一、Bootstrap 介绍 Bootstrap 是一个流行的前端框架,用于构建响应式、mobile-first 的 Web 应用程序。它提供了一些常用的 HTML、CSS 和 JavaScript 组件,可以快速...
Bootstrap 详细学习课件文档 Bootstrap 是由美国 Twitter 公司开发的,目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的前端框架,简单灵活,可以大大提高 web 开发效率。 Bootstrap 概述 ...
Bootstrap 4.0 是一个流行的前端开发框架,用于构建响应式和移动优先的网页项目。这个资源包"bootstrap_4.0_template"提供了一个基于Bootstrap 4.0的基础模板,适用于快速开发前台和后台界面。下面我们将深入探讨...