📝 Bootstrap教程

418篇技术文档
  Bootstrap教程

📅  最后修改于: 2020-10-27 03:42:58        🧑  作者: Mango

Twitter Bootstrap是最近最流行的前端框架。它是时尚,直观,功能强大的移动第一前端框架,可用于更快,更轻松地进行Web开发。它使用HTML,CSS和Javascript。本教程将教您Bootstrap Framework的基础知识,您可以使用它们轻松地创建Web项目。本教程分为多个部分,例如Bootstrap基本结构,Bootstrap CSS,Bootstrap布局组件和Boots...

  Bootstrap-概述

📅  最后修改于: 2020-10-27 03:43:18        🧑  作者: Mango

什么是Twitter Bootstrap?Bootstrap是一个时尚,直观,功能强大的移动第一前端框架,可用于更快,更轻松地进行Web开发。它使用HTML,CSS和Javascript。历史Bootstrap由Mark Otto和Jacob Thornton在Twitter上开发。它于2011年8月在GitHub上作为开源产品发布。为什么要使用Bootstrap?移动优先方法-Bootstrap...

  Bootstrap-环境设置

📅  最后修改于: 2020-10-27 03:43:48        🧑  作者: Mango

设置和开始使用Bootstrap非常容易。本章将说明如何下载和设置Bootstrap。我们还将讨论Bootstrap文件结构,并通过示例演示其用法。下载Bootstrap您可以从https://getbootstrap.com/下载最新版本的Bootstrap。当您单击此链接时,您将看到如下屏幕:在这里您可以看到两个按钮-下载Bootstrap-单击此按钮,您可以下载Bootstrap CSS,J...

  Bootstrap-网格系统

📅  最后修改于: 2020-10-27 03:44:45        🧑  作者: Mango

在本章中,我们将讨论Bootstrap网格系统。什么是网格?正如维克佩迪亚所说-在图形设计中,网格是由一系列相交的直线(垂直,水平)线组成的结构(通常为二维),用于构造内容。它广泛用于印刷设计中的布局和内容结构设计。在网页设计中,使用HTML和CSS快速有效地创建一致的布局是一种非常有效的方法。简而言之,网页设计中的网格可以组织和组织内容,使网站易于扫描并减轻用户的认知负担。什么是Bootstra...

  Bootstrap-版式

📅  最后修改于: 2020-10-27 03:45:23        🧑  作者: Mango

Bootstrap在其默认字体堆栈中使用Helvetica Neue,Helvetica,Arial和sans-serif。使用Bootstrap的排版功能,您可以创建标题,段落,列表和其他内联元素。让我们在以下各节中学习其中的每一个。标题所有HTML标题(h1至h6)均在Bootstrap中设置样式。一个例子如下所示-现场演示上面带有Bootstrap的代码段将产生以下结果-内联副标题要将内联子...

  Bootstrap-代码

📅  最后修改于: 2020-10-27 03:45:36        🧑  作者: Mango

Bootstrap允许您以两种不同的关键方式显示代码-第一个是<code>标记。如果要内联显示代码,则应使用<code>标记。第二个是<pre>标签。如果代码需要显示为独立的块元素或具有多行,则应使用<pre>标记。确保使用<pre>和<code>标记时,将unicode变体用于开始和结束标记-&lt;和&gt;。让我们看下面的例子-现场演示...

  Bootstrap-表格

📅  最后修改于: 2020-10-27 03:46:16        🧑  作者: Mango

Bootstrap为构建表提供了干净的布局。 Bootstrap支持的一些表元素是-Sr.No.Tag & Description1<table>Wrapping element for displaying data in a tabular format2<thead>Container element for table header rows (<tr>) to label table c...

  Bootstrap-表单

📅  最后修改于: 2020-10-27 03:47:27        🧑  作者: Mango

在本章中,我们将研究如何使用Bootstrap轻松创建表单。 Bootstrap通过简单的HTML标记和用于各种样式的表单的扩展类使操作变得容易。在本章中,我们将研究如何使用Bootstrap轻松创建表单。表格布局Bootstrap为您提供以下类型的表单布局-垂直(默认)形式内联表格水平形式垂直或基本形式基本表单结构是Bootstrap附带的。单个表单控件会自动接收某些全局样式。要创建基本表单,请...

  Bootstrap-按钮

📅  最后修改于: 2020-10-27 03:48:01        🧑  作者: Mango

本章通过示例介绍了Bootstrap按钮的使用年龄。赋予.btn类的所有内容都将继承带有圆角的灰色按钮的默认外观。但是,Bootstrap为样式按钮提供了一些选项,下表中对此进行了总结:Sr.No.Class & Description1btnDefault/ Standard button.2btn-primaryProvides extra visual weight and identifi...

  Bootstrap-图片

📅  最后修改于: 2020-10-27 03:48:14        🧑  作者: Mango

本章介绍了Bootstrap对映像的支持。 Bootstrap提供了三个类,可用于将一些简单样式应用于图像-.img-rounded-添加border-radius:6px给图像圆角。.img-circle-通过添加border-radius:500px使整个图像变圆。.img-缩略图-添加一些填充和灰色边框-以下示例演示了这一点-现场演示...

  Bootstrap-帮助程序类

📅  最后修改于: 2020-10-27 03:48:38        🧑  作者: Mango

本章讨论了可能会派上用场的Bootstrap中的一些帮助程序类。关闭图示使用通用关闭图标可消除模式和警报之类的内容。使用关闭类来获取关闭图标。现场演示ets使用尖号指示下拉功能和方向。要获得此功能,请使用带有<span>元素的类插入符号。现场演示快速浮动您可以分别使用classpull-left或pull-right类将元素浮动到左侧或右侧,以下示例对此进行了演示。现场演示要将导航栏中的组件与实用...

  Bootstrap-响应式实用程序

📅  最后修改于: 2020-10-27 03:48:56        🧑  作者: Mango

Bootstrap提供了一些帮助程序类,以加快对移动设备的友好开发。这些可用于通过媒体查询,结合大型,小型和中型设备,按设备显示和隐藏内容。谨慎使用这些文件,并避免创建同一网站的完全不同的版本。响应实用程序当前仅可用于块和表切换。ClassesDevices.visible-xsExtra small (less than 768px)visible.visible-smSmall (up to ...

  Bootstrap-Glyphicons

📅  最后修改于: 2020-10-27 03:49:14        🧑  作者: Mango

本章将讨论Glyphicons,其用法和一些示例。 Bootstrap会捆绑200个字形的字体。现在让我们了解什么是Glyphicons。什么是Glyphicons?字形是图标字体,您可以在Web项目中使用。Glyphicons Halflings不是免费的,并且需要许可,但是其创建者已使它们免费用于Bootstrap项目。“建议您,谢谢,我们要求您在可行的情况下包括一个指向GLYPHICONS的...

  Bootstrap-下拉菜单

📅  最后修改于: 2020-10-27 03:49:33        🧑  作者: Mango

本章将重点介绍Bootstrap下拉菜单。下拉菜单是可切换的上下文菜单,用于以列表格式显示链接。可以通过下拉JavaScript插件进行交互。要使用下拉菜单,只需将下拉菜单包装在类.dropdown中。以下示例演示了一个基本的下拉菜单-现场演示选件对准通过将类.pull-right添加到.dropdown-menu,使下拉菜单与右侧对齐。以下示例演示了这一点-现场演示标头您可以使用dropdown...

  Bootstrap-按钮组

📅  最后修改于: 2020-10-27 03:50:04        🧑  作者: Mango

按钮组允许将多个按钮堆叠在一行上。当您要将诸如对齐按钮之类的项目放在一起时,这很有用。您可以使用Bootstrap Button Plugin添加可选的JavaScript单选和复选框样式行为。下表总结了Bootstrap提供的使用按钮组的重要类-ClassDescriptionCode Sample.btn-groupThis class is used for a basic button g...