Bootstrap
关注
分享
扫一扫
Deniro Lee
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
Bootstrap 简介
1 什么是 Bootstrap？Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。2 历史Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。3 为...转载 2018-04-09 10:18:02 · 667 阅读 · 0 评论 -
说说如何使用 Bootstrap 显示图片
Bootstrap 提供了三个可对图片应用简单样式的 class： Class 说明 .img-rounded 添加 border-radius:6px 来获得图片圆角。 .img-circle 添加 border-radius:50% 来让整个图片变成圆形。 .img-thumbnail 添加一些内边距（padding）和一个灰色的边框。...原创 2018-04-27 11:50:15 · 11011 阅读 · 0 评论 -
Bootstrap 按钮详解
任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式，具体如下表所示：以下样式可用于<a>, <button>, 或 <input> 元素上： class 说明 .btn 添加基本样式 .btn-default 默认/标准按钮 .btn...转载 2018-04-27 10:44:36 · 7747 阅读 · 1 评论 -
Bootstrap 表单详解
Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。1 表单布局Bootstrap 提供了下列类型的表单布局： * 垂直表单（默认） * 内联表单 * 水平表单1.1 垂直或基本表单基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤：向父 <form> 元素...转载 2018-04-27 09:55:25 · 1177 阅读 · 0 评论 -
Bootstrap 导航元素
Bootstrap 提供的用于定义导航元素的一些选项使用相同的标记和基类 .nav。Bootstrap 也提供了一个用于共享标记和状态的帮助器类。改变修饰的 class，可以在不同的样式间进行切换。1 表格导航或标签创建一个标签式的导航菜单：以一个带有 class .nav 的无序列表开始。添加 class .nav-tabs。<ul class="nav na...转载 2018-05-04 11:37:49 · 771 阅读 · 0 评论 -
Bootstrap 输入框组
输入框组扩展自表单控件。使用输入框组，您可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。通过向输入域添加前缀和后缀的内容，您可以向用户输入添加公共的元素。例如，您可以添加美元符号，或者在 Twitter 用户名前添加 @，或者应用程序接口所需要的其他公共的元素。向 .form-control 添加前缀或后缀元素的步骤如下：把前缀或后缀元素放在一个带有...转载 2018-05-03 13:44:34 · 648 阅读 · 0 评论 -
Bootstrap 按钮下拉菜单
如需向按钮添加下拉菜单，只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可。您也可以使用 <span class="caret"></span> 来指示按钮作为下拉菜单。下面的实例演示了一个基本的简单的按钮下拉菜单：<div class="btn-group"> <button type="button" clas转载 2018-05-03 10:41:13 · 614 阅读 · 0 评论 -
Bootstrap 按钮组
按钮组允许多个按钮被堆叠在同一行上。当你想要把按钮对齐在一起时，这就显得非常有用。您可以通过 Bootstrap 按钮（Button） 插添加可选的 JavaScript 单选框和复选框样式行为。下面的表格总结了 Bootstrap 提供的使用按钮组的一些重要的 class： Class 说明 .btn-group 该 class 用于形成基本的按钮组。...转载 2018-05-03 10:22:33 · 852 阅读 · 0 评论 -
Bootstrap 导航栏
导航栏是一个很好的功能，是 Bootstrap 网站的一个突出特点。导航栏在您的应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。在 Bootstrap 导航栏的核心中，导航栏包括了站点名称和基本的导航定义样式。1 默认的导航栏创建一个默认的导航栏的步骤如下：向 <nav> 标签添加 class ....转载 2018-05-09 11:45:02 · 1457 阅读 · 0 评论 -
Bootstrap 下拉菜单（Dropdowns）
下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。这可以通过与下拉菜单（Dropdown） JavaScript 插件的互动来实现。如需使用下拉菜单，只需要在 class .dropdown 内加上下拉菜单即可。下面的实例演示了基本的下拉菜单：<div class="dropdown"> <button type="button" cl...转载 2018-05-02 11:58:17 · 1731 阅读 · 0 评论 -
Bootstrap 字体图标(Glyphicons)
Bootstrap 捆绑了 200 多种字体格式的字形。首先让我们先来理解一下什么是字体图标。1 什么是字体图标？字体图标是在 Web 项目中使用的图标字体。虽然，Glyphicons Halflings 需要商业许可，但是您可以通过基于项目的 Bootstrap 来免费使用这些图标。为了表示对图标作者的感谢，希望您在使用时加上 GLYPHICONS 网站的链接。...转载 2018-05-02 11:24:31 · 3477 阅读 · 0 评论 -
使用 Bootstrap 显示代码
Bootstrap 允许您以两种方式显示代码：第一种是 <code> 标签。如果您想要内联显示代码，那么您应该使用 <code> 标签。第二种是 <pre> 标签。如果代码需要被显示为一个独立的块元素或者代码有多行，那么您应该使用 <pre> 标签。 请确保当您使用<pre> 和 <code> 标签时，开始和结束标签...转载 2018-04-19 14:08:40 · 1228 阅读 · 0 评论 -
说说 Bootstrap 表格样式
Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素： 标签 描述 <table> 为表格添加基础样式。 <thead> 表格标题行的容器元素。 <tbody> 表格主体中的表格行的容器元素。 <tr> 一组出现在单行上的表格单元格的容...原创 2018-04-23 11:36:40 · 15947 阅读 · 0 评论 -
Bootstrap CSS 概览
1 HTML 5 文档类型（Doctype）Bootstrap 使用了一些 HTML5 元素和 CSS 属性。为了让这些正常工作，您需要使用 HTML5 文档类型（Doctype）。 因此，请在使用 Bootstrap 项目的开头包含下面的代码段。<!DOCTYPE html><html>....</html>如果在 Bootstrap 创...转载 2018-04-13 10:43:57 · 430 阅读 · 0 评论 -
Bootstrap 排版
Bootstrap 使用 Helvetica Neue、 Helvetica、 Arial 和 sans-serif 作为其默认的字体栈。使用 Bootstrap 的排版特性，您可以创建标题、段落、列表及其他内联元素。1 标题Bootstrap 中定义了所有的 HTML 标题（h1 到 h6）的样式。请看下面的实例：<h1>我是标题1 h1</h1>...转载 2018-04-16 11:41:06 · 937 阅读 · 0 评论 -
说说如何搭建 Bootstrap 环境
1 下载 Bootstrap您可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本。当您点击这个链接时，您将看到如下所示的网页：您会看到两个按钮：Download Bootstrap：下载 Bootstrap。点击该按钮，您可以下载 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本。不包含文...转载 2018-04-09 11:40:38 · 2523 阅读 · 0 评论 -
Bootstrap 相关辅助类
1 文本以下不同的类展示了不同的文本颜色。如果文本是个链接鼠标移动到文本上会变暗： Class 说明 .text-muted “text-muted” 类的文本样式 .text-primary “text-primary” 类的文本样式 .text-success “text-success” 类的文本样式 .text-info ...转载 2018-04-28 10:29:11 · 969 阅读 · 0 评论