现在位置: 首页 > HTML / CSS > Bootstrap 教程 > 文章
2019年03月24日 Bootstrap 教程 ⁄ 共 1649字 暂无评论 ⁄ 阅读 32 views 次
什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。 为什么使用 Bootstrap? 移动设备优先:自 Bootstrap 3 起,框架包含了贯穿于整个库的移动设备优先的样式。 浏览器支持:所有的主流浏览器都支持 Bootstrap。      ...
阅读全文
2019年03月24日 Bootstrap 教程 ⁄ 共 2282字 暂无评论 ⁄ 阅读 19 views 次
Bootstrap 安装是非常容易的。本章将讲解如何下载并安装 Bootstrap,讨论 Bootstrap 文件结构,并通过一个实例演示它的用法。 下载 Bootstrap 您可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本。当您点击这个链接时,您将看到如下所示的网页: 您会看到两个按钮: Download Bootstrap:下载 Bootstrap。点击该按钮,您可以下载 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本。不包含文档和最初的源代码...
阅读全文
2019年03月24日 Bootstrap 教程 ⁄ 共 3383字 暂无评论 ⁄ 阅读 18 views 次
在这一章中,我们将讲解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好、更快、更强壮的最佳实践。 HTML 5 文档类型(Doctype) Bootstrap 使用了一些 HTML5 元素和 CSS 属性。为了让这些正常工作,您需要使用 HTML5 文档类型(Doctype)。 因此,请在使用 Bootstrap 项目的开头包含下面的代码段。 <!DOCTYPE html> <html> .... </html> 如果在 Bootstrap 创建的网页开头不使用 HTML5 的文档类...
阅读全文
2019年03月24日 Bootstrap 教程 ⁄ 共 6510字 暂无评论 ⁄ 阅读 19 views 次
本章节我们将讲解 Bootstrap 的网格系统(Grid System)。 Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。 什么是网格(Grid)? 摘自维基百科: 在平面设计中,网格是一种由一系列用于组织内容的相交的直线(垂直的、水平的)组成的结构(通常是二维的)。它广泛应用于打印设计中的设计布局和内容结构。在网页设计中,它是一种用于快速创建一致...
阅读全文
2019年03月24日 Bootstrap 教程 ⁄ 共 4035字 暂无评论 ⁄ 阅读 25 views 次
Bootstrap 使用 Helvetica Neue、 Helvetica、 Arial 和 sans-serif 作为其默认的字体栈。 使用 Bootstrap 的排版特性,您可以创建标题、段落、列表及其他内联元素。 标题 Bootstrap 中定义了所有的 HTML 标题(h1 到 h6)的样式。请看下面的实例: 实例 <h1>我是标题1 h1</h1> <h2>我是标题2 h2</h2> <h3>我是标题3 h3</h3> <h4>我是标题4 h4</h4> <h5>我是标题5 h5...
阅读全文
2019年03月22日 Bootstrap 教程 ⁄ 共 564字 暂无评论 ⁄ 阅读 23 views 次
Bootstrap 允许您以两种方式显示代码: 第一种是 <code> 标签。如果您想要内联显示代码,那么您应该使用 <code> 标签。 第二种是 <pre> 标签。如果代码需要被显示为一个独立的块元素或者代码有多行,那么您应该使用 <pre> 标签。 请确保当您使用 <pre> 和 <code> 标签时,开始和结束标签使用了 unicode 变体: &lt; 和 &gt;。 让我们来看看下面的实例: 实例 <p><cod...
阅读全文
2019年03月22日 Bootstrap 教程 ⁄ 共 3487字 暂无评论 ⁄ 阅读 22 views 次
Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素: 标签 描述 <table> 为表格添加基础样式。 <thead> 表格标题行的容器元素(<tr>),用来标识表格列。 <tbody> 表格主体中的表格行的容器元素(<tr>)。 <tr> 一组出现在单行上的表格单元格的容器元素(<td> 或 <th>)。 <td> 默认的表格单元格。 <th> 特殊...
阅读全文
2019年03月22日 Bootstrap 教程 ⁄ 共 8286字 暂无评论 ⁄ 阅读 13 views 次
在本章中,我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。 表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 垂直或基本表单 基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤: 向父 <form> 元素添加 role="form"。 把标签和控件放在一个带有 class .for...
阅读全文
2019年03月22日 Bootstrap 教程 ⁄ 共 5477字 暂无评论 ⁄ 阅读 19 views 次
本章将通过实例讲解如何使用 Bootstrap 按钮。任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式,具体如下表所示: 以下样式可用于<a>, <button>, 或 <input> 元素上: 类 描述 实例 .btn 为按钮添加基本样式 尝试一下 .btn-default 默认/标准按钮 尝试一下 .btn-primary 原始按钮样式(未被操作) 尝试一下 .btn-success 表示成功的动...
阅读全文
2019年03月22日 Bootstrap 教程 ⁄ 共 748字 暂无评论 ⁄ 阅读 19 views 次
在本章中,我们将学习 Bootstrap 对图片的支持。Bootstrap 提供了三个可对图片应用简单样式的 class: .img-rounded:添加 border-radius:6px 来获得图片圆角。 .img-circle:添加 border-radius:50% 来让整个图片变成圆形。 .img-thumbnail:添加一些内边距(padding)和一个灰色的边框。 请看下面的实例演示: 实例 <img src="/wp-content/uploads/2014/06/download.png" class="img-rounded"> <img src="/wp-co...
阅读全文
×