bootstrap入门_Twitter Bootstrap入门

从头开始构建网站非常困难。 即使是某些能够使用JavaScript，HTML和CSS等网络语言进行编码的人，也会在此过程中遇到困难。 幸运的是，一些Twitter开发人员和设计师意识到了这种情况，并启动了一个名为Bootstrap的框架，以使Web设计人员和开发人员的工作更加轻松。

并且，在本文中，我们将研究Bootstrap并尝试一些提供的功能，以了解该框架如何加快我们的Web开发过程。

使用引导程序

Bootstrap是一个非常强大的前端开发框架，并具有许多功能，我们需要更快，更轻松地开发功能齐全的网站，而不必从头开始构建它。 Bootstrap包含的一些功能包括：

• CSS网格，用于创建响应式布局
• 排版 ， 按钮 ， 表单 ， 表格和图像CSS基础
• 用户界面组件，如导航 ，进度条，警报，分页， 面包屑等，具有一致的现代风格
• jQuery插件可在网站上构建交互式体验

现在，我们假设您已经下载了Bootstrap并设置了包括JavaScript和CSS在内的所有资产，如下所示：

<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/bootstrap.min.js" type="text/javascript"></script>

我们可以开始尝试其中一些功能。

CSS基础：按钮

Bootstrap具有基础CSS，该基础CSS由一些基本HTML元素（包括<button>元素）的样式组成。 按钮是网站上常见的元素，在Bootstrap中，按钮样式适用于btn类；

<button type="button" class="btn">Default Button</button>

此标记导致显示以下内容，这是按钮的默认样式。

我们还可以应用其他类来定义按钮的角色。

<button type="button" class="btn btn-success">Button</button>
<button type="button" class="btn btn-warning">Button</button>
<button type="button" class="btn btn-danger">Button</button>

根据角色，每个按钮将被赋予不同的颜色：

Bootstrap样式是使用LESS构建的。 实际上，我们之前已经介绍了LESS几次，如果您熟悉此CSS预处理程序，建议您使用它而不是使用常规CSS。 这样，样式将更加可配置。

例如，假设上面“成功按钮”的颜色与我们的设计不太吻合。 我们可以简单地更改variables.less文件中提供的variables.less ，就像这样；

@btnSuccessBackground:              #bce895; //#62c462;
@btnSuccessBackgroundHighlight:     #a0cd78; //#51a351;

由于其他参数（例如阴影和渐变）已预先配置，因此样式将自动调整，并导致以下显示；

用户界面组件

Bootstrap还提供了一些可重用的UI组件，用于导航，分页，进度条，按钮等等。 添加这些组件也与上一节中的按钮样式设置一样容易，在本示例中，我们将增强这些按钮并将它们放入一组按钮中，就像这样；

<div class="btn-group">
<button type="button" class="btn btn-success">Button</button>
<button type="button" class="btn btn-warning">Button</button>
<button type="button" class="btn btn-danger">Button</button>
</div>

注意，我们的按钮现在包装在带有btn-group类的<div>内，这将导致以下显示；

我们还可以添加一个额外的类btn-group-vertical以使按钮垂直流动；

<div class="btn-group btn-group-vertical">
<button type="button" class="btn btn-success">Button</button>
<button type="button" class="btn btn-warning">Button</button>
<button type="button" class="btn btn-danger">Button</button>
</div>

jQuery插件

我仍然记得当我第一次创建一个静态网站时，不得不从一个网站跳到另一个网站，以找到合适的插件来在该网站上应用交互功能。 您无需像使用手风琴，手风琴，模态，工具提示，弹出窗口，Tab等其他jQuery插件一样，在Bootstrap上经历同样的麻烦。

在以下示例中，我们将从Bootstrap应用Tooltip插件。

<p id="container">Jujubes icing oat cake 
<a href="#" rel="tooltip" title="a Lolipop Tiramissu?">lollipop tiramisu</a>. 
Tiramisu sesame snaps croissant chupa chups chupa chups chocolate cake candy sugar plum 
jelly beans. Lollipop pudding jelly sweet jujubes cookie pudding. Oat cake topping gummi 
bears oat cake. Muffin jelly-o cake sesame snaps ice cream cotton candy.</p>

注意，我们添加了一个带有rel和title属性的链接。 当我们将鼠标悬停在工具提示上时，该链接将显示该工具提示。 要激活工具提示，我们只需添加以下脚本即可；

$('#container').tooltip({
    selector: "a[rel=tooltip]"
});

该脚本将使用rel=tooltip定位#container下的每个链接；

如我们所见，在Bootstrap插件中添加Tooltip非常简单，并且与以前的时代不同（在某些情况下，当应用多个不同的插件时有时会遇到冲突和错误），这些插件– Tooltip，Popup，Tabs等–都可以正常工作一起。

客制化

Bootstrap是一个巨大的框架。 在某些情况下，这可能太多了。 因此，Bootstrap还提供了专用页面进行自定义。 我们可以在此页面中自定义几件事，从颜色变量到所需的插件。

结论

实际上，Bootstrap中还有许多其他功能，远远超出了我们在本文中可以提供的功能。 但是在下一篇文章中，我们将带您逐步了解这些功能，并使用Bootstrap构建真实的东西。 下面我们汇总了十个设计良好的网站，这些网站以Bootstrap为基础，激发了您的灵感。

现在阅读：

翻译自: https://www.hongkiat.com/blog/twitter-bootstrap/