bootstrap 开发
讲解bootstrap从入门到精通的教程。
月轩居士
Archimedes said: give me a fulcrum,I will move the earth.Program ape said: give me a keyboard,I can change the world.
展开
-
bootstrap分页
1、引入的css样式 我们需要引入bootstrap自带的表格样式,这样比较好看,如果再需要修改的话,我们就在其基础上再改。"stylesheet" type="text/css" href="http://sandbox.runjs.cn/uploads/rs/238/n8vhm36h/bootstrap.min.css"> "stylesheet" typ转载 2015-12-12 09:28:19 · 1123 阅读 · 0 评论 -
Web前端CSS框架—Bootstrap学习笔记
Bootstrap是Twitter推出的一个开源的用于前端开发的工具包,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。 Bootstrap中包含了丰富的Web组件,根据这些组件,可以快速的搭建一个漂亮、功能完备的网站。其中包括以下组件:下拉菜单、按钮组、按钮下拉菜单、导航、导航条、面包屑、分页、排版、缩略图转载 2015-01-30 14:31:04 · 2209 阅读 · 0 评论 -
15款创建漂亮幻灯片的 jQuery 插件
1. SkipprSkippr 是一个超级简单的 jQuery 幻灯片插件。只是包括你的网页中引入 jquery.skippr.css 和 jquery.skippr.js 文件就能使用了。Skippr 能够自适应窗口宽度,而且导航是独特的条形导航。效果演示 源码下载2. PrezentoPrezento 这款 jQuery 插件可以让你网页以新颖的交互方式呈原创 2015-07-16 13:58:07 · 2508 阅读 · 0 评论 -
Bootstrap学习模态框(model)插件
模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。如果您想要单独引用该插件的功能,那么您需要引用 modal.js。或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。用法您可以切转载 2015-09-02 14:12:48 · 2087 阅读 · 0 评论 -
Bootstrap学习:插件概览
站点引用 Bootstrap 插件的方式有两种:单独引用:使用 Bootstrap 的个别的 *.js 文件。一些插件和 CSS 组件依赖于其他插件。如果您单独引用插件,请先确保弄请这些插件之间的依赖关系。编译(同时)引用:使用 bootstrap.js 或压缩版的 bootstrap.min.js。不要尝试同时引用这两个文件,因为 bootstrap.js 和 boots转载 2015-09-02 14:13:13 · 538 阅读 · 0 评论 -
Bootstrap学习:Wells
Well 是一种会引起内容凹陷显示或插图效果的容器。为了创建 Well,只需要简单地把内容放在带有 class .well 的中即可。下面的实例演示了一个默认的 Well:html>head> title>Bootstrap 实例 - 默认的 Welltitle> link href="/bootstrap/css/bootstrap.min.css" re转载 2015-09-02 14:13:40 · 601 阅读 · 0 评论 -
Bootstrap学习:面板
本章将讲解 Bootstrap 面板(Panels)。面板组件用于把 DOM 组件插入到一个盒子中。创建一个基本的面板,只需要向元素添加 class .panel 和 class .panel-default 即可,如下面的实例所示:html>head> title>Bootstrap 实例 - 默认的面板title> link href="/bootstrap/css/b转载 2015-09-02 14:14:03 · 644 阅读 · 0 评论 -
Bootstrap学习:列表组
本章我们将讲解列表组。列表组件用于以列表形式呈现复杂的和自定义的内容。创建一个基本的列表组的步骤如下:向元素 添加 class .list-group。向 添加 class .list-group-item。下面的实例演示了这点:html>head> title>Bootstrap 实例 - 基本的列表组title> link href="/bootstrap转载 2015-09-02 14:14:21 · 597 阅读 · 0 评论 -
Bootstrap学习:多媒体对象
本章我们将讲解 Bootstrap 中的多媒体对象(Media Object)。这些抽象的对象样式用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。媒体对象轻量标记、易于扩展的特性是通过向简单的标记应用 class 来实现的。你可以在 HTML 标签中添加以下两种形式来设置媒体对象:转载 2015-09-02 14:15:10 · 659 阅读 · 0 评论 -
Bootstrap学习:进度条
本章将讲解 Bootstrap 进度条。在本教程中,您将看到如何使用 Bootstrap 创建加载、重定向或动作状态的进度条。Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果。Internet Explorer 9 及之前的版本和旧版的 Firefox 不支持该特性,Opera 12 不支持动画。默认的进度条创建一个基本的进度条的步骤如下:添转载 2015-09-02 14:15:32 · 871 阅读 · 0 评论 -
Bootstrap学习:缩略图
本章将讲解 Bootstrap 缩略图。大多数站点都需要在网格中布局图像、视频、文本等。Bootstrap 通过缩略图为此提供了一种简便的方式。使用 Bootstrap 创建缩略图的步骤如下:在图像周围添加带有 class .thumbnail 的 标签。这会添加四个像素的内边距(padding)和一个灰色的边框。当鼠标悬停在图像上时,会动画显示出图像的轮廓。下面的实例演示了默认转载 2015-09-02 14:16:06 · 718 阅读 · 0 评论 -
Bootstrap学习:页面标题
页面标题(Page Header)是个不错的功能,它会在网页标题四周添加适当的间距。当一个网页中有多个标题且每个标题之间需要添加一定的间距时,页面标题这个功能就显得特别有用。如需使用页面标题(Page Header),请把您的标题放置在带有 class .page-header 的 中:html>head> title>Bootstrap 实例 - 页面标题title> lin转载 2015-09-02 14:16:29 · 487 阅读 · 0 评论 -
Bootstrap学习:超大屏幕
本章将讲解 Bootstrap 支持的另一个特性,超大屏幕(Jumbotron)。顾名思义该组件可以增加标题的大小,并为登陆页面内容添加更多的外边距(margin)。使用超大屏幕(Jumbotron)的步骤如下:创建一个带有 class .jumbotron. 的容器 div>。除了更大的 ,字体粗细 font-weight 被减为 200px。12下面的实例演示了这点:htm转载 2015-09-02 14:16:45 · 717 阅读 · 0 评论 -
Bootstrap学习:徽章
本章将讲解 Bootstrap 徽章(Badges)。徽章与标签相似,主要的区别在于徽章的边角更加圆滑。徽章(Badges)主要用于突出显示新的或未读的项。如需使用徽章,只需要把 添加到链接、Bootstrap 导航等这些元素上即可。下面的实例演示了这点:html>head> title>Bootstrap 实例 - 徽章(Badges)title> link转载 2015-09-02 14:17:00 · 1203 阅读 · 0 评论 -
Bootstrap学习:标签
本章将讲解 Bootstrap 标签。标签可用于计数、提示或页面上其他的标记显示。使用 class .label 来显示标签,如下面的实例所示:html>head> title>Bootstrap 实例 - 标签title> link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> script src=转载 2015-09-02 14:17:20 · 633 阅读 · 0 评论 -
Bootstrap学习:分页
本章将讲解 Bootstrap 支持的分页特性。分页(Pagination),是一种无序列表,Bootstrap 像处理其他界面元素一样处理分页。分页(Pagination)下表列出了 Bootstrap 提供的处理分页的 class。 默认的分页下面的实例演示了上表中所讨论的 class .pagination 的用法:html>head> ti转载 2015-09-02 14:17:35 · 709 阅读 · 0 评论 -
Bootstrap学习:面包屑导航
面包屑导航(Breadcrumbs)是一种基于网站层次信息的显示方式。以博客为例,面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置。Bootstrap 中的面包屑导航(Breadcrumbs)是一个简单的带有 .breadcrumb class 的无序列表。分隔符会通过 CSS(bootstrap.min.css)中下面所示的 class 自动被添加:.b转载 2015-09-02 14:17:55 · 2780 阅读 · 0 评论 -
Bootstrap学习:导航栏
导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点。导航栏是响应式元组件就,作为应用程序或网站的导航标题。导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开。在 Bootstrap 导航栏的核心中,导航栏包括了为站点名称和基本的导航定义样式。默认的导航栏创建一个默认的导航栏的步骤如下:向标签添加 class .navbar、.nav转载 2015-09-02 14:18:24 · 877 阅读 · 0 评论 -
Bootstrap学习:导航元素
本章我们将讲解 Bootstrap 提供的用于定义导航元素的一些选项。它们使用相同的标记和基类 .nav。Bootstrap 也提供了一个用于共享标记和状态的帮助器类。改变修饰的 class,可以在不同的样式间进行切换。表格导航或标签创建一个标签式的导航菜单:以一个带有 class .nav 的无序列表开始。添加 class .nav-tabs。下面的实例演示了这点转载 2015-09-02 14:18:58 · 702 阅读 · 3 评论 -
Bootstrap学习:输入框组
本章将讲解 Bootstrap 支持的另一个特性,输入框组。输入框组扩展自 表单控件。使用输入框组,您可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。通过向输入域添加前缀和后缀的内容,您可以向用户输入添加公共的元素。例如,您可以添加美元符号,或者在 Twitter 用户名前添加 @,或者应用程序接口所需要的其他公共的元素。向 .form-control 添加前缀或后缀转载 2015-09-02 14:19:16 · 748 阅读 · 1 评论 -
Bootstrap学习:按钮下拉菜单
本章将讲解如何使用 Bootstrap class 向按钮添加下拉菜单。如需向按钮添加下拉菜单,只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可。您也可以使用来指示按钮作为下拉菜单。 下面的实例演示了一个基本的简单的按钮下拉菜单:html>head> title>Bootstrap 实例 - 基本的按钮下拉菜单title> link href="/boo转载 2015-09-02 14:19:46 · 594 阅读 · 0 评论 -
Bootstrap学习:按钮组
按钮组允许多个按钮被堆叠在同一行上。当你想要把按钮对齐在一起时,这就显得非常有用。您可以通过 Bootstrap 按钮(Button) 插件 添加可选的 JavaScript 单选框和复选框样式行为。下面的表格总结了 Bootstrap 提供的使用按钮组的一些重要的 class: 基本的按钮组下面的实例演示了上面表格中讨论到的 class .btn-group 的转载 2015-09-07 10:37:37 · 846 阅读 · 1 评论 -
Bootstrap学习:下拉菜单
本章将重点介绍 Bootstrap 下拉菜单。下拉菜单是可切换的,是以列表格式显示链接的上下文菜单。这可以通过与 下拉菜单(Dropdown) JavaScript 插件 的互动来实现。如需使用下列菜单,只需要在 class .dropdown 内加上下拉菜单即可。下面的实例演示了基本的下拉菜单:html>head> title>Bootstrap 实例 - 下拉菜单(Dro转载 2015-09-07 10:37:56 · 811 阅读 · 1 评论 -
Bootstrap学习:字型图标
本章将讲解字形图标(Glyphicons),并通过一些实例了解它的使用。Bootstrap 捆绑了 200 多种字体格式的字形。首先让我们先来理解一下什么是字形图标(Glyphicons)。什么是字形图标(Glyphicons)?字形图标(Glyphicons)是在 Web 项目中使用的图标字体。虽然,Glyphicons Halflings 需要商业许可,但是您可以通过基于项目的转载 2015-09-07 10:40:06 · 1098 阅读 · 0 评论 -
Bootstrap学习:响应式实用工具
Bootstrap 提供了一些帮助器类,以便更快地实现对移动设备友好的开发。这些可以通过媒体查询结合大型、小型和中型设备,实现内容对设备的显示和隐藏。需要谨慎使用这些工具,避免在同一个站点创建完全不同的版本。响应式实用工具目前只适用于块和表切换。 打印类下表列出了打印类。使用这些切换打印内容。 实例下面的实例演示了上面所列举的帮助器类的用法。调整浏览转载 2015-09-07 10:40:45 · 552 阅读 · 0 评论 -
Bootstrap学习:帮助其类
关闭图标使用通用的关闭图标来关闭模态框和警告框。使用 class close 得到关闭图标。html>head> title>Bootstrap 实例 - 关闭图标title> link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> script src="/scripts/jquery.min转载 2015-09-07 10:41:04 · 480 阅读 · 0 评论 -
Bootstrap学习:图像
在本章中,我们将学习 Bootstrap 对图像的支持。Bootstrap 提供了三个可对图像应用简单样式的 class:.img-rounded:添加 border-radius:6px 来获得图像圆角。.img-circle:添加 border-radius:500px 来让整个图像变成圆形。.img-thumbnail:添加一些内边距(padding)和一个灰色的边框。请看下转载 2015-09-07 10:41:32 · 529 阅读 · 0 评论 -
Bootstrap学习:按钮
本章将通过实例讲解如何使用 Bootstrap 按钮。任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式,具体如下表所示: Class 描述btn 默认的/标准的按钮。btn-primary 提供额外的视觉效果,标识一组按钮中的原始动作。转载 2015-09-07 10:41:52 · 545 阅读 · 0 评论 -
Bootstrap学习:表单
表单布局Bootstrap 提供了下列类型的表单布局:垂直表单(默认)内联表单水平表单垂直或基本表单基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤:向父 元素添加 role="form"。把标签和控件放在一个带有 class .form-group 的 div> 中。这是获取最佳间距所必需的。向所有的转载 2015-09-07 10:42:20 · 598 阅读 · 0 评论 -
Bootstrap学习: 表格
Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素:标签 描述table> 容纳以表格形式显示数据的元素。thead> 表格标题行的容器元素(tr>),用来标识表格列。tbody> 表格主体中的表格行的容器元素(tr>)。tr> 一组出现在单行上的表格单元格的容器元素(td> 或 th>)。td> 默认的表格单元格。转载 2015-09-07 10:42:46 · 519 阅读 · 0 评论 -
Bootstrap学习:代码
Bootstrap 允许您以两种方式显示代码:第一种是 code> 标签。如果您想要内联显示代码,那么您应该使用 code> 标签。第二种是 pre> 标签。如果代码需要被显示为一个独立的块元素或者代码有多行,那么您应该使用 pre> 标签。请确保当您使用 pre> 和 code> 标签时,开始和结束标签使用了 unicode 变体: < 和 >。123让我们来看看下面转载 2015-09-07 10:43:19 · 468 阅读 · 0 评论 -
Bootstrap学习: 排版
Bootstrap 使用 Helvetica Neue、 Helvetica、 Arial 和 sans-serif 作为其默认的字体栈。使用 Bootstrap 的排版特性,您可以创建标题、段落、列表及其他内联元素。标题Bootstrap 中定义了所有的 HTML 标题(h1 到 h6)的样式。请看下面的实例:html>head> title>Bootstr转载 2015-09-07 10:43:33 · 541 阅读 · 0 评论 -
Bootstrap学习:网格系统
什么是网格(Grid)?在平面设计中,网格是一种由一系列用于组织内容的相交的直线(垂直的、水平的)组成的结构(通常是二维的)。它广泛应用于打印设计中的设计布局和内容结构。在网页设计中,它是一种用于快速创建一致的布局和有效地使用 HTML 和 CSS 的方法。简单地说,网页设计中的网格用于组织内容,让网站易于浏览,并降低用户端的负载。什么是 Bootstrap 网格系转载 2015-09-07 10:43:52 · 907 阅读 · 0 评论