bootstrap
关注
分享
扫一扫
文章平均质量分 90
虚坏叔叔
「虚幻私塾」
展开
-
Bootstrap 下拉菜单（Dropdowns）
Bootstrap 下拉菜单（Dropdowns）本章将重点介绍 Bootstrap 下拉菜单。下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。这可以通过与 下拉菜单（Dropdown） JavaScript 插件 的互动来实现。如需使用下拉菜单，只需要在 class .dropdown 内加上下拉菜单即可。下面的实例演示了基本的下拉菜单：<!DOCTYPE html><html><head> <meta charset="utf-8">原创 2021-03-10 11:10:46 · 1526 阅读 · 0 评论 -
Bootstrap 字体图标(Glyphicons)
本章将讲解字体图标(Glyphicons)，并通过一些实例了解它的使用。Bootstrap 捆绑了 200 多种字体格式的字形。首先让我们先来理解一下什么是字体图标。什么是字体图标？字体图标是在 Web 项目中使用的图标字体。虽然，Glyphicons Halflings 需要商业许可，但是您可以通过基于项目的 Bootstrap 来免费使用这些图标。为了表示对图标作者的感谢，希望您在使用时加上 GLYPHICONS 网站的链接。获取字体图标我们已经在 环境安装 章节下载了 Bootstrap原创 2021-03-09 18:09:24 · 790 阅读 · 0 评论 -
Bootstrap 响应式实用工具
Bootstrap 响应式实用工具Bootstrap 提供了一些辅助类，以便更快地实现对移动设备友好的开发。这些可以通过媒体查询结合大型、小型和中型设备，实现内容对设备的显示和隐藏。需要谨慎使用这些工具，避免在同一个站点创建完全不同的版本。响应式实用工具目前只适用于块和表切换。超小屏幕 手机 (<768px)小屏幕 平板 (≥768px)中等屏幕 桌面 (≥992px)大屏幕 桌面 (≥1200px).visible-xs-*可见隐藏隐藏隐藏.visibl原创 2021-03-09 16:48:35 · 250 阅读 · 0 评论 -
Bootstrap 辅助类
Bootstrap 辅助类本章将讨论 Bootstrap 中的一些可能会派上用场的辅助类。文本以下不同的类展示了不同的文本颜色。如果文本是个链接鼠标移动到文本上会变暗：类描述.text-muted“text-muted” 类的文本样式.text-primary“text-primary” 类的文本样式.text-success“text-success” 类的文本样式.text-info“text-info” 类的文本样式.text-warning原创 2021-03-09 16:40:00 · 235 阅读 · 0 评论 -
Bootstrap 图片
Bootstrap 图片在本章中，我们将学习 Bootstrap 对图片的支持。Bootstrap 提供了三个可对图片应用简单样式的 class：.img-rounded：添加 border-radius:6px 来获得图片圆角。.img-circle：添加 border-radius:50% 来让整个图片变成圆形。.img-thumbnail：添加一些内边距（padding）和一个灰色的边框。请看下面的实例演示：<!DOCTYPE html><html><原创 2021-03-09 16:24:24 · 256 阅读 · 0 评论 -
Bootstrap 按钮
Bootstrap 按钮本章将通过实例讲解如何使用 Bootstrap 按钮。任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式，具体如下表所示：以下样式可用于a, button, 或 input 元素上：类描述.btn为按钮添加基本样式.btn-default默认/标准按钮.btn-primary原始按钮样式（未被操作）.btn-success表示成功的动作.btn-inf原创 2021-03-09 16:12:20 · 1222 阅读 · 0 评论 -
2021-03-09
Bootstrap 表单在本章中，我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。表单布局Bootstrap 提供了下列类型的表单布局：垂直表单（默认）内联表单水平表单垂直或基本表单基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤：向父 元素添加 role=“form”。把标签和控件放在一个带有 class .form-group原创 2021-03-09 15:09:29 · 197 阅读 · 0 评论 -
Bootstrap 表格
Bootstrap 表格Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素：标签描述table为表格添加基础样式。thead表格标题行的容器元素（tr），用来标识表格列。tbody表格主体中的表格行的容器元素（tr）。tr一组出现在单行上的表格单元格的容器元素（td 或 th）。td默认的表格单元格。th特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在 thead 内使用。原创 2021-03-09 11:49:39 · 697 阅读 · 0 评论 -
Bootstrap 代码
Bootstrap 代码Bootstrap 允许您以两种方式显示代码：第一种是 标签。如果您想要内联显示代码，那么您应该使用 标签。第二种是 标签。如果代码需要被显示为一个独立的块元素或者代码有多行，那么您应该使用 标签。请确保当您使用 和 标签时，开始和结束标签使用了 unicode 变体： < 和 >。让我们来看看下面的实例：<!DOCTYPE html><html><head> <meta charset="utf原创 2021-03-09 11:26:30 · 184 阅读 · 0 评论 -
Bootstrap 排版
Bootstrap 排版Bootstrap 使用 Helvetica Neue、 Helvetica、 Arial 和 sans-serif 作为其默认的字体栈。使用 Bootstrap 的排版特性，您可以创建标题、段落、列表及其他内联元素。标题Bootstrap 中定义了所有的 HTML 标题（h1 到 h6）的样式。请看下面的实例：<!DOCTYPE html><html><head> <meta charset="utf-8"> &原创 2021-03-08 18:26:32 · 293 阅读 · 0 评论 -
Bootstrap 的网格系统（Grid System）
本章节我们将讲解 Bootstrap 的网格系统（Grid System）。Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。什么是网格（Grid）？摘自维基百科：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nawJa3Sn-1615175825960)(未命名.assets/quote.png)]在平面设计中，网格是一种由一系列用于组织内容的相交的直线（垂直的、水平的）组成的原创 2021-03-08 11:58:48 · 909 阅读 · 0 评论 -
Bootstrap CSS 概览
Bootstrap CSS 概览在这一章中，我们将讲解 Bootstrap 底层结构的关键部分，包括我们让 web 开发变得更好、更快、更强壮的最佳实践。HTML 5 文档类型（Doctype）Bootstrap 使用了一些 HTML5 元素和 CSS 属性。为了让这些正常工作，您需要使用 HTML5 文档类型（Doctype）。 因此，请在使用 Bootstrap 项目的开头包含下面的代码段。<!DOCTYPE html><html>....</html>原创 2021-03-08 11:41:02 · 459 阅读 · 0 评论 -
Bootstrap 环境安装
Bootstrap 环境安装Bootstrap 安装是非常容易的。本章将讲解如何下载并安装 Bootstrap，讨论 Bootstrap 文件结构，并通过一个实例演示它的用法。下载 Bootstrap您可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本。当您点击这个链接时，您将看到如下所示的网页：您会看到两个按钮：Download Bootstrap：下载 Bootstrap。点击该按钮，您可以下载 Bootstrap CSS、JavaScript原创 2021-03-08 11:32:34 · 394 阅读 · 0 评论 -
Bootstrap 简介
什么是 Bootstrap？Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。历史Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。为什么使用 Bootstrap？移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。浏览器支原创 2021-03-08 11:23:37 · 808 阅读 · 0 评论