规格示例_最佳引导示例

最新推荐文章于 2022-06-18 19:16:36 发布

cumi6497

最新推荐文章于 2022-06-18 19:16:36 发布

阅读量879

点赞数

文章标签： css java python html web

原文链接：https://www.freecodecamp.org/news/the-best-bootstrap-examples/

版权

规格示例

Bootstrap is a popular front-end framework for web development. It contains pre-built components and design elements to style HTML content. Modern browsers such as Chrome, Firefox, Opera, Safari, and Internet Explorer support Bootstrap.

Bootstrap是用于Web开发的流行前端框架。它包含用于样式化HTML内容的预构建组件和设计元素。 Chrome，Firefox，Opera，Safari和Internet Explorer等现代浏览器均支持Bootstrap。

Bootstrap includes a responsive grid system for varying layouts. It is a great starting point for building a mobile friendly website. It also includes optional JavaScript functionality, such as collapsible content, carousels, and modals.

Bootstrap包括一个响应式网格系统，用于改变布局。这是构建移动友好网站的一个很好的起点。它还包括可选JavaScript功能，例如可折叠的内容，轮播和模式。

为什么要使用Bootstrap？ (Why Use Bootstrap?)

Bootstrap provides an easy solution both for design and responsiveness. It is packed with beautiful elements that can be further styled with your own custom CSS, as well as a full grid system to keep your website responsive across all screens while using a clean and understandable syntax. You can build a professional looking website without any CSS or JavaScript and easily customize the elements if needed

Bootstrap为设计和响应速度提供了一个简单的解决方案。它包含漂亮的元素，可以使用您自己的自定义CSS和完整的网格系统进一步设置样式，以使您的网站在使用清晰易懂的语法的同时，可以在所有屏幕上响应。您可以构建没有CSS或JavaScript的专业网站，并根据需要轻松自定义元素

版本记录 (Version History)

Twitter originally developed the Bootstrap framework as an internal tool. They released it as an open source project in August of 2011.

Twitter最初将Bootstrap框架开发为内部工具。他们于2011年8月将其作为开源项目发布。

Bootstrap 2 was released in January 2012. One of the primary features was the introduction of the 12 column responsive grid system. Bootstrap 3 appeared in August of 2013, switching to a flat design and a mobile-first approach. Bootstrap 4 is available in beta as of August 2017, and now includes Sass and Flexbox.

Bootstrap 2于2012年1月发布。主要功能之一是引入了12列响应式网格系统。 Bootstrap 3于2013年8月问世，改用平面设计和移动优先方式。 Bootstrap 4自2017年8月起提供Beta版，现在包括Sass和Flexbox。

Bootstrap 4 was in development for two years before releasing some beta versions during 2017, while the first stable release was out in January 2018. Some notable changes include:

Bootstrap 4进行了两年的开发，然后于2017年发布了一些beta版本，而第一个稳定版本于2018年1月发布。一些值得注意的更改包括：

Moved from Less to Sass;
从少移到萨斯；
Moved to Flexbox and improved grid system;
移至Flexbox并改进了网格系统；
Added cards (replacing wells, thumbnails, and panels);
增加了卡片(替换Kong，缩略图和面板)；
And much more!
以及更多！

At the time of writing, Bootstrap's latest release is 4.1.3. If you would like to keep up with any news of announcements, follow them here.

在撰写本文时，Bootstrap的最新版本是4.1.3 。如果您想了解任何公告新闻，请在此处关注它们。

Boostrap功能 (Boostrap Features)

Bootstrap 3 supports the latest versions of Google Chrome, Firefox, Internet Explorer, Opera and Safari (except on Windows). It additionally supports back to IE8 and the latest Firefox Extended Support Release (ESR).[12]
Bootstrap 3支持最新版本的Google Chrome，Firefox，Internet Explorer，Opera和Safari(Windows除外)。此外，它还支持回到IE8和最新的Firefox扩展支持版本(ESR)。[12]
Since 2.0, Bootstrap supports responsive web design. This means the layout of web pages adjusts dynamically, taking into account the characteristics of the device which is being used (desktop, tablet, mobile phone).
从2.0开始，Bootstrap支持响应式Web设计。这意味着网页的布局会根据正在使用的设备(台式机，平板电脑，移动电话)的特性进行动态调整。
Starting with version 3.0, Bootstrap adopted a mobile-first design philosophy, emphasizing responsive design by default.
从3.0版开始，Bootstrap采用了移动优先的设计理念，默认情况下强调响应式设计。
Version 4.0 added Sass and flexbox support.
版本4.0添加了Sass和flexbox支持。
Version 4.1 Added new custom range form control.
版本4.1添加了新的自定义范围表单控件。
Bootstrap does not restrict you to a fixed CSS format but allows you to develop quickly allowing style overwrites using cascading to add/edit the default styles.
Bootstrap并不将您限制为固定CSS格式，而是允许您快速开发，允许使用级联添加/编辑默认样式来覆盖样式。

开始使用 (Get Started)

Bootstrap is a free and open source framework developed by Twitter that provides a variety of templates for use with front-end web development. Using Bootstrap makes it easy to design a fully responsive website and is a framework worth learning.

Bootstrap是Twitter开发的免费开源框架，提供了用于前端Web开发的各种模板。使用Bootstrap可以轻松设计一个完全响应的网站，并且是值得学习的框架。

如何将Bootstrap添加到我的页面？ (How do I add Bootstrap to my page?)

Adding bootstrap to your page is a fast process, just add the following to the <head> tags in your code.

将引导程序添加到页面是一个快速的过程，只需将以下内容添加到代码中的<head>标记中即可。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

Note: These are only examples and may change without notice. Please refer to a CDN for current links to include in your project.

注意：这些仅是示例，如有更改，恕不另行通知。 请参阅CDN，以获取要包含在您的项目中的当前链接。

Some Bootstrap components require other JavaScript files, check out the Bootstrap documentation here to find the latest scripting files.

一些Bootstrap组件需要其他JavaScript文件，请在此处查看Bootstrap文档以找到最新的脚本文件。

You will also need to add the following between the body tags in your code. With bootstrap you'll be using <div> tags when using many of Bootstrap's features, e

您还需要在代码的body标签之间添加以下内容。使用Bootstrap时，您将在使用许多Bootstrap功能时使用<div>标签，例如

<div class="alert alert-success" role="alert">
    <strong>Congratulations!</strong>
    <p>Bootstrap is now working on this page</p>
</div>

Congratulations!

恭喜你！

Bootstrap is now working on this page

Bootstrap现在正在此页面上工作

使用软件包管理器安装Bootstrap (Installing Bootstrap with a Package Manager)

A popular package manager is NPM or Node Package Manager. You will need to install Node.js, which includes the Node Package Manager. Visit Node.js and download the necessary files based on your OS, and then install them.

流行的软件包管理器是NPM或Node Package Manager。您将需要安装Node.js，其中包括Node Package Manager。访问Node.js并根据您的操作系统下载必要的文件，然后安装它们。

Once installed and setup, open up the command line or console, and type the following in the the project folder you wish to use Bootstrap with. At the time of writing this will install Bootstrap version 4.0.0

安装和设置好后，打开命令行或控制台，然后在要用于Bootstrap的项目文件夹中键入以下内容。在撰写本文时，它将安装Bootstrap版本4.0.0

npm install bootstrap@4.0.0 --save

Once NPM has finished downloading and installing Bootstrap 4, there will be a new folder called node_modules within your project folder if it wasn't already there.

NPM完成Bootstrap 4的下载和安装后，如果项目文件夹中还没有一个名为node_modules的新文件夹，则它将不存在。

/bootstrap which contains the CSS and Sass version of our files.
/bootstrap ，其中包含我们文件CSS和Sass版本。
/jquery which is used by Bootstrap in various components.
/jquery ，由Bootstrap在各种组件中使用。
/tether which is a library for element positioning.
/tether ，这是用于元素定位的库。

网格系统 (Grid System)

In a nutshell, the Bootstrap grid system helps you create responsive layouts, and it is comprised of a system of rows and columns that helps you structure your content.

简而言之，Bootstrap网格系统可帮助您创建响应式布局，并且由行和列系统组成，可帮助您组织内容。

Rows are horizontal groups of columns, and each page has a maximum of 12 columns per row. Within each row, the content is placed inside the columns and it can span anywhere between 1 to 12 columns.

行是水平的列组，每页最多每行12列。在每一行中，内容放置在各列内，并且可以跨越1至12列之间的任意位置。

Bootstrap has five different types of grid tiers: Extra small, Small, Medium, Large and Extra large. There is a breakpoint defined for each of these grid tiers. Bootstrap uses pixels to define the grid tier breakpoints.

Bootstrap具有五种不同类型的网格层：超小，小，中，大和特大。为每个网格层定义了一个断点。 Bootstrap使用像素来定义网格层断点。

容器 (Container)

The container is the outer most element that contains your grid. Use container for a fixed-width container in the middle of the screen (add an extra margin on larger screens) or container-fluid for full width.

容器是包含网格的最外面的元素。将container用于屏幕中间的固定宽度容器(在大屏幕上增加额外的边距)，或者将container-fluid用于全宽。

<div class="container"></div>

行 (Row)

Use row to group your columns. This will keep everything lined up properly and help you structure your grid.

使用row对row进行分组。这将使所有内容正确排列并帮助您构建网格。

<div class="row"></div>

列 (Columns)

Column classes indicate the number of columns you’d like to use out of the possible 12 per row. For example col-sm-6 would mean your columns use up half the width of the row on a small screen, and col-lg-4would use up a third on a large screen.

列类表示每行可能使用的12列中要使用的列数。例如， col-sm-6表示您的列在小屏幕上用完了row宽度的一半，而col-lg-4在大屏幕上用了三分之一。

Here is how you would define a class prefix to use up one column width on the various screen sizes:

这是您定义类前缀以在各种屏幕尺寸上用完一列宽度的方式：

Extra Small col-1
超小型 col-1
Small col-sm-1
小 col-sm-1
Medium col-md-1
中 col-md-1
Large col-lg-1
大型 col-lg-1
Extra Large col-xl-1
特大 col-xl-1

<div class="col-sm-1"></div>

例 (Example)

A full width grid that has four columns, each taking up a full row on xs screens, half a row on sm and md screens, and a quarter of the width of the row on screens that are large and above:

一个具有四列的全宽网格，每行在xs屏幕上占据一整行，在sm和md屏幕上占据半行，在较大及以上的屏幕上占据四分之一的宽度：

<div class="container-fluid">
  <div class="row">
    <div class="col-12 col-sm-6 col-lg-4">First Column</div>
    <div class="col-12 col-sm-6 col-lg-4">Second Column</div>
    <div class="col-12 col-sm-6 col-lg-4">Third Column</div>
    <div class="col-12 col-sm-6 col-lg-4">Forth Column</div>
  </div>
</div>

Note that col-md and col-xl are not defined, where a size is not defined, it will default down to the next smaller size that has been specified.

请注意，未定义col-md和col-xl ，其中未定义大小，它将默认减小到指定的下一个较小的大小。

Bootstrap provides a ready-made 12 column grid system for use in layouts. Consider the following code.

Bootstrap提供了现成的12列网格系统，可用于布局。考虑下面的代码。

<div class="container">
	<div class="row">
		<div class="col-md-6">Content</div>
		<div class="col-md-6">Content</div>
	<div>
   </div>

where:

哪里：

- col = column
- md = screen size
- 6 = column width

As a 12 column grid system, all user defined grid column widths must add up to 12.

作为12列网格系统，所有用户定义的网格列宽度都必须加起来为12。

Screen size values can be assigned as follows:

屏幕尺寸值可以分配如下：

xs - < 768px Phones
xs-<768px手机
sm - < 992px Tablets
sm-<992px平板电脑
md - < 1200px Laptops
md-<1200px笔记本电脑
lg - > 1200px Desktops
lg-> 1200像素台式机

The following code and image shows what is possible using different column widths.

以下代码和图像显示了使用不同的列宽可以实现的功能。

<div class="container">
		<div class="row">
			<div class="example col-md-6">Content</div>
			<div class="example col-md-6">Content</div>
		<div>
	</div>

	<div class="container">
		<div class="row">
			<div class="example col-md-4">Content</div>
			<div class="example col-md-4">Content</div>
			<div class="example col-md-4">Content</div>
		<div>
	</div>

	<div class="container">
		<div class="row">
			<div class="example col-md-3">Content</div>
			<div class="example col-md-3">Content</div>
			<div class="example col-md-3">Content</div>
			<div class="example col-md-3">Content</div>
		<div>
	</div>

	<div class="container">
		<div class="row">
			<div class="example col-md-2">Content</div>
			<div class="example col-md-2">Content</div>
			<div class="example col-md-2">Content</div>
			<div class="example col-md-2">Content</div>
			<div class="example col-md-2">Content</div>
			<div class="example col-md-2">Content</div>
		<div>
	</div>

	<div class="container">
		<div class="row">
			<div class="example col-md-1">Content</div>
			<div class="example col-md-1">Content</div>
			<div class="example col-md-1">Content</div>
			<div class="example col-md-1">Content</div>
			<div class="example col-md-1">Content</div>
			<div class="example col-md-1">Content</div>
			<div class="example col-md-1">Content</div>
			<div class="example col-md-1">Content</div>
			<div class="example col-md-1">Content</div>
			<div class="example col-md-1">Content</div>
			<div class="example col-md-1">Content</div>
			<div class="example col-md-1">Content</div>
		</div>
	</div>

纽扣 (Buttons)

The Bootstrap framework provides you with various styling options for buttons. These styles help you provide a visual representation to the user of what the button may do.

Bootstrap框架为按钮提供了各种样式选项。这些样式帮助您向用户提供按钮可以做什么的直观表示。

如何使用 (How To Use)

To use bootstrap buttons you need to follow the same steps that you would to create a button in HTML, except that you also apply the applicable CSS class to the button. A code example has been provided below.

要使用引导程序按钮，除了将适用CSS类也应用于按钮之外，您需要遵循与在HTML中创建按钮相同的步骤。下面提供了一个代码示例。

Code Example:

代码示例 ：

<button type="button" class="btn btn-primary">Primary</button>

You can also use bootstrap buttons with the <a> and <input> elements as shown in the examples below. As per the Bootstrap documentation,

您还可以将Bootstrap按钮与<a>和<input>元素一起使用，如下面的示例所示。根据Bootstrap文档，

When using button classes on elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a role="button"to appropriately convey their purpose to assistive technologies such as screen readers.

在用于触发页内功能(如折叠内容)的元素上使用按钮类时，而不是链接到当前页面中的新页面或新部分时，应为这些链接赋予role="button"以适当地传达其目的辅助技术，例如屏幕阅读器。

<a class="btn btn-primary" href="#" role="button">This button is a link</a>

<input class="btn btn-primary" type="submit" value="Submit">

按钮类别清单 (Button Class List)

This is a list of the CSS classes that bootstrap provides for buttons. They give the background color to the buttons.

这是引导程序为按钮提供CSS类的列表。它们为按钮赋予背景色。

.btn This is bootstrap's basic button. It is a prerequisite if you want other bootstrap buttons to work properly.

.btn这是引导程序的基本按钮。如果您希望其他引导按钮正常工作，这是前提条件。

<button type="button" class="btn">Basic</button>

.btn-primary Bootstrap's primary button. Default color displays #007bff.

.btn-primary引导程序的主按钮。默认颜色显示为＃007bff。

<button type="button" class="btn btn-primary">Primary</button>

.btn-secondary Bootstrap's secondary button. Default color displays #6c757d.

.btn-secondary引导程序的辅助按钮。默认颜色显示为＃6c757d。

<button type="button" class="btn btn-secondary">Secondary</button>

.btn-success Bootstrap's success button. Default color displays #28a745.

.btn-success引导程序的成功按钮。默认颜色显示为＃28a745。

<button type="button" class="btn btn-success">Success</button>

.btn-info Bootstrap's info button. Default color displays #17a2b8.

.btn-info引导程序的信息按钮。默认颜色显示为＃17a2b8。

<button type="button" class="btn btn-info">Info</button>

.btn-warning Bootstrap's warning button. Default color displays #ffc107.

.btn-warning Bootstrap的警告按钮。默认颜色显示＃ffc107。

<button type="button" class="btn btn-warning">Warning</button>

.btn-danger Bootstrap's danger button. Default color displays #dc3545.

.btn-danger引导程序的危险按钮。默认颜色显示＃dc3545。

<button type="button" class="btn btn-danger">Danger</button>

.btn-link Bootstrap's link button.

.btn-link引导程序的链接按钮。

<button type="button" class="btn btn-link">Link</button>

.btn-light Bootstrap's light button.

.btn-light引导程序的指示灯按钮。

<button type="button" class="btn btn-light">Light</button>

.btn-dark Bootstrap's dark button.

.btn-dark Bootstrap的暗按钮。

<button type="button" class="btn btn-dark">Dark</button>

.btn-dark This is bootstrap's dark button.

.btn-dark这是引导程序的暗按钮。

.btn-secondary This is bootstrap's secondary button.

.btn-secondary这是引导程序的辅助按钮。

按钮尺寸 (Button Sizes)

This is a list of the CSS classes for different size of the buttons.

这是按钮大小不同CSS类的列表。

.btn-lg Bootstrap's large button.

.btn-lg引导程序的大按钮。

<button type="button" class="btn btn-lg">Large</button>

.btn-md This is bootstrap's medium button.

.btn-md这是引导程序的中键。

<button type="button" class="btn btn-md">Medium</button>

.btn-sm Bootstrap's small button.

.btn-sm引导程序的小按钮。

<button type="button" class="btn btn-sm">Small</button>

.btn-md This is bootstrap's medium button.

.btn-md这是引导程序的中键。

.btn-xs This is bootstrap's extra small button.

.btn-xs这是引导程序的额外小按钮。

<button type="button" class="btn btn-xs">Extra Small</button>

.btn-block This is bootstrap's full width button.

.btn-block这是引导程序的全角按钮。

禁用按钮状态 (Disabled Button State)

This is used to show that the button is disabled by fading the button. This can be achieved through adding "disabled" to the <button> tag.

这用于表明通过淡化按钮禁用了按钮。这可以通过在<button>标记中添加“ disabled”来实现。

.btn-block This is bootstrap's block level button. They actually span the entire width of their parent element. For example, a form element with a width of 200px, that means the btn-block button would have a width of 200px.

.btn-block这是引导程序的块级别按钮。它们实际上跨越了其父元素的整个宽度。例如，一个宽度为200px的表单元素，这意味着btn-block按钮的宽度为200px。

概述的按钮 (Outlined Buttons)

It is possible to also have outlined buttons rather than fully colored buttons. This is achieved by placing the mid fix outline between the button class you want. A sample usage would be as follows:

也可以有轮廓按钮而不是全彩色按钮。这可以通过在所需的按钮类之间放置中间修订outline来实现。用法示例如下：

<button type="button" class="btn btn-outline-primary">Primary</button>

<button type="button" class="btn btn-outline-secondary">Secondary</button>

<button type="button" class="btn btn-outline-success">Success</button>

<button type="button" class="btn btn-outline-danger">Danger</button>

<button type="button" class="btn btn-outline-warning">Warning</button>

<button type="button" class="btn btn-outline-info">Info</button>

<button type="button" class="btn btn-outline-light">Light</button>

<button type="button" class="btn btn-outline-dark">Dark</button>

Outlined buttons are a part of Bootstrap since version 4 - please be sure that you are using the right version if you are unable to get them to work.

自版本4起，概述的按钮是Bootstrap的一部分-如果无法使它们正常工作，请确保使用的版本正确。

内联按钮 (Inline Buttons)

You can create inline button row by adding .d-inline-block class to the element which sets the display of the button to inline block. For example : <button class="btn btn-primary d-inline-block btn-lg"></button>

您可以通过将.d-inline-block类添加到将按钮的显示设置为inline块的元素来创建inline按钮行。例如： <button class="btn btn-primary d-inline-block btn-lg"></button>

按钮分组 (Grouping of Buttons)

It is possible to group more than one button for certain uses like pagination. Grouping buttons can be done by making a parent div for all buttons you want to group, using the .btn-group class on this div:

对于某些用途(例如分页)，可以将多个按钮分组。可以通过在要使用div的.btn-group类为要分组的所有按钮制作一个父div来对按钮进行分组：

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>

下拉菜单 (Dropdowns)

Bootstrap provides Dropdowns as a plugin for displaying lists of links. A dropdown is a button which toggles displaying a list of links.

Bootstrap提供Dropdowns作为插件来显示链接列表。下拉菜单是一个按钮，用于切换显示链接列表。

Bootstrap’s dropdowns are designed to be generic and applicable to a variety of situations. For instance, it is possible to create dropdowns that contain search fields or login forms.

Bootstrap的下拉菜单设计为通用的，适用于各种情况。例如，可以创建包含搜索字段或登录表单的下拉列表。

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown example
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

The .dropdown class indicates a dropdown menu.

.dropdown类指示一个下拉菜单。

To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and the data-toggle="dropdown attribute.

要打开下拉菜单，请使用按钮或带有类.dropdown-toggle和data-toggle =“ dropdown属性的链接。

The .caret class creates a caret arrow icon (▼), which indicates that the button is a dropdown.

.caret类创建一个插入符号箭头图标(▼)，表示该按钮是一个下拉列表。

Add the .dropdown-menu class to a unordered list element to actually build the dropdown menu.

将.dropdown-menu类添加到无序列表元素中以实际构建下拉菜单。

The Bootstrap framework provides you with a feature called navigation bars. In short, a navigation bar (also referred to as a navbar) is a header at the top of the page to display navigational information.

Bootstrap框架为您提供了一个称为导航栏的功能。简而言之，导航栏(也称为导航栏)是页面顶部的标题，用于显示导航信息。

如何使用 (How To Use)

To use Bootstrap Navigation Bars you add a <nav> element to the top inside the <body> element of your webpage. There are various styles you can add to customize the display of your navbars.

要使用Bootstrap导航栏，请在网页的<body>元素顶部的顶部添加一个<nav>元素。您可以添加多种样式来定制导航栏的显示。

This is the code needed to make a basic navbar:

这是制作基本导航栏所需的代码：

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Site Name</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

Bootstrap provides a set of classes in the Bootstrap framework to style your navbars. These classes are as followed:

Bootstrap在Bootstrap框架中提供了一组类来设置导航栏样式。这些类如下：

navbar navbar-default This is the default style for your navbars.
navbar navbar-default这是navbar navbar-default的默认样式。
navbar navbar-inverse This is similar to the default style except the colors are inverted.
navbar navbar-inverse类似于默认样式，不同之处在于颜色是反转的。

You can include a drop-down menu inside a navbar. This feature requires you to include Bootstrap's javascript file for it to work.

您可以在导航栏中添加一个下拉菜单。要使用此功能，您需要包括Bootstrap的javascript文件。

<li class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Drop down
    <span class="caret"></span>
  </a>
<ul class="dropdown-menu">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
  </ul>
</li>

You can add buttons on the navbar. The existing Bootstrap Button classes work however you'll need to include the class navbar-btn to the end of the class list.

您可以在导航栏上添加按钮。现有的Bootstrap Button类可以使用，但是您需要在类列表的末尾包含navbar-btn类。

<button class="btn navbar-btn">Button</button>

The navbar-brand class can be applied to most elements, but an anchor works best as some elements might require utility classes or custom styles.

navbar-brand类可以应用于大多数元素，但是锚点效果最好，因为某些元素可能需要实用程序类或自定义样式。

<!-- As a link -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
</nav>

<!-- As a heading -->
<nav class="navbar navbar-light bg-light">
  <span class="navbar-brand mb-0 h1">Navbar</span>
</nav>

You can also add forms to the navbar. This could be used for tasks such as a search field, quick login field, etc.

您也可以将表单添加到导航栏。这可以用于诸如搜索字段，快速登录字段等任务。

<form class="navbar-form navbar-right">
  <div class="form-group">
      <input type="text" class="form-control" placeholder="Search">
  </div>  
  <button type="submit" class="btn btn-default">Search</button>  
</form>

In some cases you might want to align elements in a navbar to the right (for example a login or sign-up button.). To do this you'll need to use the navbar-right class.

在某些情况下，您可能需要将导航栏中的元素右对齐(例如，登录或注册按钮。)。为此，您需要使用navbar-right类。

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Site Name</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">Action Link #1</a></li>
      <li><a href="#">Action Link #2</a></li>
    </ul>
  </div>
</nav>

In some cases you might want to keep the navbar at the top or bottom of the screen regardless of scrolling. You will need to add either the navbar-fixed-top or navbar-fixed-bottom class to the <nav>element.

在某些情况下，无论滚动如何，您都可能希望将导航栏保持在屏幕的顶部或底部。您将需要将navbar-fixed-top或navbar-fixed-bottom类添加到<nav>元素。

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Site Name</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

On a small screen (such as a phone or tablet) the navbar is going to take up too much space. Luckily the option to collase the navbar exists. You can accomplish this using the following example.

在小屏幕(例如电话或平板电脑)上，导航栏将占用过多空间。幸运的是，存在导航栏选项。您可以使用以下示例完成此操作。

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Site Name</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

巨无霸 (Jumbotron)

Jumbotron is Lightweight, flexible component for showcasing hero unit style content. Jumbotron is a responsive component which the main goal is to focus visitor's attention or highlight the special piece of information.

Jumbotron是轻量级的灵活组件，用于展示英雄单位样式的内容。 Jumbotron是一种响应组件，其主要目标是吸引访问者的注意力或突出显示特殊信息。

Jumbotron make use of almost any other bootstrap code to additionally increase its engagement value. It's operate with images,enlarged fonts,different backgorund styles etc.

巨无霸利用几乎所有其他引导代码来额外增加其参与价值。它可以处理图像，放大字体，不同backgorund样式等。

巨无霸最吸引人的功能 (Most Attracting features of jumbotron)

Showcase the marketing messages on your site
在您的网站上展示营销信息
Project presentation
项目介绍
Article introduction
文章介绍
Image showcase
图片展示

如何使用 (How to use)

Use a <div> element with class .jumbotron to create a jumbotron:

将<div>元素与类.jumbotron以创建一个巨型机器人：

<div class="jumbotron">
  <h1 class="display-4">Hello, world!</h1>
  <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <hr class="my-4">
  <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
  <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>

流体大剂量 (Fluid jumbotron)

To make the jumbotron full width, and without rounded corners, add the .jumbotron-fluid modifier class and add a .container or .container-fluid within.

要使超长距伞成为全角且没有圆角，请添加.jumbotron-fluid修饰符类，并在其中添加.container或.container-fluid 。

<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-4">Fluid jumbotron</h1>
    <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
  </div>
</div>

形式 (Forms)

Bootstrap framework provides a form feature which you can use to create beautiful HTML forms easily. Using the Bootstrap form gives each individual form element a unified global style. Bootstrap form adds the right spacing and look to each element.

Bootstrap框架提供了一种表单功能，可用于轻松创建漂亮HTML表单。使用Bootstrap表单可使每个单独的表单元素具有统一的全局样式。 Bootstrap表单为每个元素增加了正确的间距和外观。

Each Bootstrap form element should have a class form-control. This class is how Bootstrap knows which elements to style. All textual elements like input, textarea and select that have the form-control class will have 100% width by default.

每个Bootstrap表单元素应具有一个类form-control 。此类是Bootstrap知道如何设置样式的元素。默认情况下，所有具有表单控件类的文本元素(如input ， textarea和select)都将具有100％的宽度。

There are two types of Bootstrap forms, which are:

Bootstrap表单有两种类型，分别是：

Inline form - creates the form on a single line. Useful for login forms in a nav bar
内联表单-在一行上创建表单。对于导航栏中的登录表单很有用
Horizontal form - creates a form with each element in a different row
水平表单-使用每个元素在不同行中创建一个表单

基本形式的例子 (Example of a basic form)

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

内联表单的示例 (Example of an inline form)

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

水平形式的例子 (Example of horizontal form)

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

表格输入 (Form Inputs)

Bootstrap supports the following form controls:

Bootstrap支持以下表单控件：

input
输入
textarea
文本区域
checkbox
复选框
radio
无线电
select
选择
range
范围

1.输入 (1. Input)

Bootstrap supports all the HTML5 input types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.

Bootstrap支持所有HTML5输入类型：文本，密码，日期时间，本地日期时间，日期，月份，时间，星期，数字，电子邮件，URL，搜索，电话和颜色。

Note: Inputs will NOT be fully styled if their type is not properly declared!

注意：如果输入的类型未正确声明，则输入的样式将不完全！

The following example contains two input elements; one of type text and one of type password:

以下示例包含两个输入元素；一种是文本类型，另一种是密码：

<div class="form-group">
  <label for="usr">Name:</label>
  <input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
  <label for="pwd">Password:</label>
  <input type="password" class="form-control" id="pwd">
</div>

2. Textarea (2. Textarea)

The following example contains a textarea:

下面的示例包含一个文本区域：

<div class="form-group">
  <label for="comment">Comment:</label>
  <textarea class="form-control" rows="5" id="comment"></textarea>
</div>

3.复选框 (3. Checkboxes)

Checkboxes are used if you want the user to select any number of options from a list of preset options.

如果希望用户从预设选项列表中选择任意数量的选项，请使用复选框。

The following example contains three checkboxes. The last option is disabled:

以下示例包含三个复选框。最后一个选项被禁用：

<div class="checkbox">
  <label>
  <input type="checkbox" value="">Option 1</label>
</div>
<div class="checkbox">
  <label>
  <input type="checkbox" value="">Option 2</label>
</div>
<div class="checkbox disabled">
  <label>
  <input type="checkbox" value="" disabled>Option 3</label>
</div>

Use the .checkbox-inline class if you want the checkboxes to appear on the same line:

如果您希望复选框显示在同一行上，请使用.checkbox-inline类：

<label class="checkbox-inline"><input type="checkbox" value="">Option 1</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 2</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 3</label>

4.单选按钮 (4. Radio Buttons)

Radio buttons are used if you want to limit the user to just one selection from a list of preset options.

如果要将用户限制为预设选项列表中的一个选项，则使用单选按钮。

The following example contains three radio buttons. The last option is disabled:

下面的示例包含三个单选按钮。最后一个选项被禁用：

<div class="radio">
  <label><input type="radio" name="optradio">Option 1</label>
</div>
<div class="radio">
  <label><input type="radio" name="optradio">Option 2</label>
</div>
<div class="radio disabled">
  <label><input type="radio" name="optradio" disabled>Option 3</label>
</div>

Use the .radio-inline class if you want the checkboxes to appear on the same line:

如果希望复选框显示在同一行上，请使用.radio-inline类：

<label class="radio-inline"><input type="radio" name="optradio">Option 1</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 2</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 3</label>

5.选择(列表) (5. Select (List))

Select lists are used if you want to allow the user to pick from multiple options.

如果要允许用户从多个选项中进行选择，则使用选择列表。

The following example contains a dropdown list (select list):

以下示例包含一个下拉列表(选择列表)：

<div class="form-group">
  <label for="sel1">Select list:</label>
  <select class="form-control" id="sel1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
</div>

6.范围 (6. Range)

Select lists are used if you want to allow the user to pick from multiple options.

如果要允许用户从多个选项中进行选择，则使用选择列表。

The following example contains a dropdown list (select list):

以下示例包含一个下拉列表(选择列表)：

<form>
  <div class="form-group">
    <label for="formControlRange">Example Range input</label>
    <input type="range" class="form-control-range" id="formControlRange">
  </div>
</form>

如何使Bootstrap输入可访问 (How to make Bootstrap Inputs Accessible)

Input fields should have labels or some other form of identifier such as WAI-ARIA tags to meet the Web Content Accessibility Guidelines or WCAG for short. In order for screen readers to accurately convey to a user what labels are associated with which inputs the labels should reference the corresponding input.

输入字段应带有标签或某种其他形式的标识符，例如WAI-ARIA标签，以符合Web内容可访问性准则或WCAG的简称。为了使屏幕阅读器准确地向用户传达与哪些输入相关联的标签，标签应参考相应的输入。

This can be done by utlizing the for parameter in the HTML:

这可以通过在HTML中使用for参数来完成：

<label for="email-input">Enter Email</label>
<input type="email" class="form-control" id="email-input" placeholder="Enter Email">

The label for attribute always references the input field by its ID. This tells the screen reader that this label is definitely for this input field which will minimize confusion for any users who are using a screen reader to visit a web site. In the above example, if a user clicks on the actual word "Enter email", then the user will be able to type. If the 'for' attribute was not attached to the label, then if a user clicks on the words 'Enter email,' nothing would happen. The user would have to click on the actual email input field to be able to type.

标签for属性总是通过其ID引用输入字段。这告诉屏幕阅读器该标签肯定是用于此输入字段的，这将最大程度地减少使用屏幕阅读器访问网站的任何用户的困惑。在上面的示例中，如果用户单击实际单词“输入电子邮件”，则该用户将能够键入。如果标签未附加“ for”属性，则用户单击“输入电子邮件”一词将不会发生。用户必须单击实际的电子邮件输入字段才能键入。

桌子 (Tables)

基本表 (Basic Table)

In order to achieve the basic styling example add the base class .table to any <table> element.

为了实现基本的样式示例，请将基类.table添加到任何<table>元素中。

<table class="table">
  ...
</table>

表头 (Table Head)

You can define separate header section in your table structure. This is example

您可以在表结构中定义单独的标题部分。这是例子

<table class="table">
    <thead class=theat-dark>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Bob</td>
      <td>Robo</td>
      <td>@bro</td>
    </tr>
  </tbody>
</table>

表条纹 (Table Striped)

In order to achieve the striped row effect (zebra-striping) in tables use .table-striped in addition to .table on any <table> element. Striped tables are styled via the :nth-child CSS selector, which is not available in Internet Explorer 8.

为了在表中实现条纹行效果(斑马条纹)，在任何<table>元素上除了.table之外， .table使用.table-striped 。条带表通过:nth-child CSS选择器设置样式，Internet Explorer 8中不提供该选择器。

<table class="table table-striped">
  ...
</table>

表边框 (Table Bordered)

In order to achieve the bordered table use .table-bordered in addition to .table on any <table>element.

为了获得带边框的表，在任何<table>元素上除了.table之外， .table使用.table-bordered .table 。

<table class="table table-bordered">
  ...
</table>

表格悬停 (Table Hover)

In order to achieve the hover row effect on tables, use .table-hover in addition to .table on any <table> element.

为了实现上表中的悬停行效果，使用.table-hover除了.table任何上<table>元素。

<table class="table table-hover">
  ...
</table>

浓缩表 (Table Condensed)

In order to achieve the condensed table use .table-condensed in addition to .table on any <table>element.

为了实现精简表，在任何<table>元素上除了.table之外， .table使用.table-condensed 。

<table class="table table-condensed">
  ...
</table>

表响应 (Table Responsive)

In order to achieve the responsive table by wrapping any .table table in a .table-responsiveelement.

为了通过将任何.table表包装在.table-responsive元素中来获得响应表。

Developers are able to change the style of each individual row <tr> and/or cell <td> by using contextual classes.

开发人员可以通过使用上下文类来更改每个单独行<tr>和/或单元格<td>的样式。

.active - Applies the hover color to a particular row or cell
.active将悬停颜色应用于特定的行或单元格
.success - Indicates a successful or positive action
.success表示成功或积极的行动
.info - Indicates a neutral informative change or action
.info表示中性的信息更改或操作
.warning - Indicates a warning that might need attention
.warning表示可能需要注意的警告
.danger - Indicates a dangerous or potentially negative action
.danger表示危险或潜在的负面行为

翻译自: https://www.freecodecamp.org/news/the-best-bootstrap-examples/

规格示例

cumi6497

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
规格示例_最佳引导示例

规格示例Bootstrap is a popular front-end framework for web development. It contains pre-built components and design elements to style HTML content. Modern browsers such as Chrome, Firefox, Opera, Safari, ...
复制链接

扫一扫