Bootstrap 脚本库基础

Madhukar Mudunuru

4.66/5 (13投票s)

2014年7月13日

CPOL

5分钟阅读

25873

163

Bootstrap 基础

下载源代码 - 86.8 KB

引言

在不断发展的网络世界中，事物以前所未有的方式成型。随着互联网的深入渗透和电子商务应用的普及，Web应用程序的界限正在被重新定义。用户界面和用户体验在吸引不同细分网民群体方面起着至关重要的作用。

后者为开发人员和设计师带来了挑战，需要开发响应式、交互式且高性能的Web应用程序。Bootstrap就像一个附加组件或插件，可以帮助开发人员和设计师将最终用户的UI和UX提升到新的水平。

如今，Bootstrap网站和Web应用程序正在互联网世界中如雨后春笋般涌现。本文将帮助您了解Bootstrap及其基本实现。

背景

Web应用程序和网站的使用正逐渐转向移动设备，用户请求量已超过笔记本电脑和台式机用户。因此，现在网站开发人员和设计师需要针对来自移动设备、平板电脑、笔记本电脑和台式机的不同响应和请求。开发人员需要根据不同设备的屏幕分辨率重新设计他们的网站。对于移动用户来说，查看为台式机设计的网站渲染的HTML是一个挑战。

Facebook和Twitter等顶级社交网络站点拥有自己针对设备的网站实现，例如m.domain.com或.mobi域名网站。虽然维护不同的网站在一定程度上解决了问题，但开发和维护涉及大量成本和精力。这对于中小型电子商务网站来说是一项艰巨的任务。

最终，Web社区提出了拥有一个网站，但拥有不同样式，可以根据目标设备渲染HTML及相应样式和标签的想法。在Web语言中，我们可以称之为响应式Web设计，其目标是设计能够提供最佳浏览体验的网站。

Bootstrap是这样一个开源框架，它帮助我们利用响应式Web设计功能以及移动优先开发，即以移动设备为目标，然后扩展到平板电脑和台式机，而不是反之。

什么是Bootstrap

Bootstrap是一个开源的CSS和脚本库。它继承了JQuery，并增强了新的脚本函数和条件样式，可用于开发响应式UI和移动优先开发。除了CSS和JS文件，它还提供了一套丰富的图标和字体。下面是Bootstrap框架的层次结构。

bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
└── glyphicons-halflings-regular.woff

我们可以在 https://bootstrap.ac.cn/ 网站上获取源代码、库和默认模板。

该网站提供了一个自定义选项卡，用于下载我们自己选择的Bootstrap组件、变量和脚本的版本。这有助于减小库文件的大小。

Bootstrap网格系统

在深入讨论之前，我想解释一下Bootstrap网格系统。这是该框架的核心，其他一切都围绕它。网格中的每一行都分为十二列。目的是使列的总数达到12，如果超过12，例如13或14列，多余的列将换到下一行。您可以选择任何组合，但列的总数应为十二。如果我们想要四列，那么每列的大小必须是三（4x3），如果列大小是六，那么我们只能有两列（6x2）。下图对此进行了说明，以便更好地理解。

Bootstrap控件和功能

如前所述，Bootstrap提供了一套丰富的组件，目前只涵盖了基本的标签和样式。

排版
按钮和图标
导航栏
表单

排版

通过应用内置样式到div和段落标签，我们可以以不同的形式显示文本，例如粗体、斜体、不同大小和颜色。下面是一些排版示例以及源代码。

潜在客户

用于区分特定段落与其余普通段落。在下面的图片中，第一个段落应用了lead样式，使其字体更大且粗体，以吸引用户注意。

 <div class="Lead">
        <p>Visakhapatnam, also known as Vizag is the largest city in the state of 
           Andhra Pradesh and the third largest city on the east coast of India 
           (after Chennai and Kolkata)
        </p>
    </div>
    <p>It is nestled among the hills of the Eastern Ghats and faces the Bay of Bengal 
       on the east. Visakhapatnam is the administrative headquarters of Visakhapatnam district 
       and headquarters of the Eastern Naval Command of the Indian Navy.
    </p>

文本类

根据上下文或事件，我们可以以不同的颜色显示文本，例如警告用黄色，成功用绿色，错误用红色。下面对此进行了说明。

<p class="text-success">This content carries a success class</p>
<p class="text-info">This content carries a info class</p>
<p class="text-warning">This content carries a warning class</p>

按钮和图标

就像上面一样，改变文本颜色以适应事件或上下文，我们也可以将其应用于按钮。通过使用btn类，我们可以将相同的样式应用于锚标签。为了获得更好的用户体验，我们可以在按钮旁边显示相应的图标。这可以通过使用graphicon图标集来实现。下面是锚点、HTML按钮和带图标的按钮的示例。

<div class="row">
  <p>
      <a href="#" class="btn btn-success">Submit</a>
      <a href="#" class="btn btn-danger">Cancel</a>
      <input type="submit" class="btn btn-primary" value="Login" >      
      <a href="#" class="btn btn-sm btn-danger">
             <span class="glyphicon glyphicon-play"></span> 
            Default text here
       </a>
  </p>
</div>

导航栏

样式定义在Bootstrap中起着至关重要的作用。在下面的代码中，“nav”是组名，“navbar”标识属于导航栏的标签。只需更改一些样式，我们就可以拥有自定义的、浮动的和固定的导航栏。通过在项目style的顺序中定义active，我们可以使相应的菜单项处于活动状态。我将在下一篇文章中更详细地讨论折叠、固定和浮动等导航栏类型。

<div id="menu" class="navbar navbar-default navbar-fixed-top">
  <div class="navbar-header navbar-left">
         <ui class="nav navbar-nav navbar-right">
          <li class="nav active"><a href="#">Participate</a></li>
          <li class="nav"><a href="#">Contact Us</a></li>
          <li class="nav"> <a href="#">Gallery</a></li>
        </ui>    
  </div>
</div>

表单

数据输入是任何网站最常见的需求。我们可以将表单元素分组，以垂直、水平方式显示它们，并以更具交互性的方式定义每一个控件，从而丰富用户体验。

下面显示的表单是一个简单的登录表单，包含电子邮件和密码。该表单占12列中的6列。电子邮件输入控件使用了输入“group addon”选项，将“@”显示为textbox的一部分。为了在输入控件中显示水印文本，使用了占位符。

<section id="frm" class="container" >
  <form>
    <div class="col-md-6">
    <div class="form-group">
        <label for="inputEmail">Email</label>
        <div class="input-group">
            <span class="input-group-addon">@</span>        
            <input type="email" class="form-control" 
                   id="inputEmail" placeholder="Provide your Email">
        </div>
    </div>
    <div class="form-group">
        <label for="inputPassword">Password</label>
        <input type="password" class="form-control"
               id="inputPassword" placeholder="Provide strong Password">
    </div>
    <div class="checkbox">
        <label><input type="checkbox"> Remember me</label>
    </div>
    <button type="submit" class="btn btn-primary">Login</button>
    </div>
</form>
</section>

除了以上内容，Bootstrap还提供了许多此处未讨论但非常有用的控件和插件。由于JavaScript和CSS被最小化，并且所有内容都在客户端运行，因此Bootstrap的使用增加了性能和用户体验。

我附上了我用来展示以上代码片段和生成图片的示例文件。如果需要，您可以下载并参考它。它不包含任何图标，请从下面的参考网站下载。

参考文献

www.getbootstrap.com 用于获取库
www.bootswatch.com 用于免费的Bootstrap模板