Bootstrap v2 教程

Bootstrap v2教程

Bootstrap v2是一个流行的前端开发框架，它提供了一组预定义的CSS和JS类，可以帮助开发者快速而有效地构建响应式Web应用程序和网站。在本教程中，我们将带你从开始到精通Bootstrap v2的基础知识和技巧，包括布局，样式，组件和插件等方面。

布局

网页布局包含以下三个基本元素：网格、行和列。Bootstrap提供了一个基于12列网格系统的布局，这使得创建响应式布局变得格外简单。

网格

网格是一种基于行和列的组织结构，可以帮助在不同视口大小下排列内容。Bootstrap v2的网格共有12列，每一列都有一个相对的宽度（例如col-md-4表示该列占据12列的1/3）。为了确保该网格系统能够运作，我们需要将页面划分为一行，然后在行内放置列。

<div class="row">
  <div class="col-md-4">
    Column 1
  </div>
  <div class="col-md-4">
    Column 2
  </div>
  <div class="col-md-4">
    Column 3
  </div>
</div>

行

Bootstrap v2的行是一组列（column）的容器，该容器使得多列在同一水平位置上对齐，并按照适当的间距排列。

<div class="row">
  <div class="col-md-4">
    Column 1
  </div>
  <div class="col-md-4">
    Column 2
  </div>
  <div class="col-md-4">
    Column 3
  </div>
</div>

列

列是指网格系统内的水平元素，Bootstrap v2提供了多种类可用于设置列的宽度，颜色，边框以及对齐方式等。

<div class="row">
  <div class="col-md-4">
    Column 1
  </div>
  <div class="col-md-4">
    Column 2
  </div>
  <div class="col-md-4">
    Column 3
  </div>
</div>

样式

Bootstrap v2提供了一组常用的样式类，包括文本，背景，颜色和按钮复选框等等。

文本

Bootstrap v2提供多种样式类用于设置文本颜色、大小以及其他相关属性。

<p class="text-danger">danger text</p>
<p class="text-primary">primary text</p>
<p class="text-muted">muted text</p>

背景

Bootstrap v2的背景类包括了Jumbotron，模态框（Modal）以及不透明度的设置。

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>This is a sample text inside a jumbotron.</p>
</div>

颜色

颜色类用于设置背景色和文字颜色。

<div class="bg-primary text-white">This is a sample text with primary bg color and white text.</div>
<div class="bg-warning text-dark">This is a sample text with warning bg color and dark text.</div>

按钮

Bootstrap v2提供了多种按钮样式，包括基础、主要、危险、警告等。

<button class="btn btn-primary">Primary</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>

组件

Bootstrap v2为开发者提供了丰富的可重用的组件，包括导航、分页、进度条、警告框、表单等。

导航

Bootstrap v2提供了多种导航组件，包括基础、可折叠、分页、面包屑等。

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Messages</a>
  </li>
</ul>

分页

Bootstrap v2提供了多种分页样式，可以根据自己的需求选择不同的样式。常用样式包括“上一页”、“下一页”、“数字”和“省略号”。

<ul class="pagination">
  <li class="disabled"><a href="#">«</a></li>
  <li class="active"><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">»</a></li>
</ul>

进度条

Bootstrap v2的进度条可用于表示一个操作的进度，或者制作一个类似于计量器的效果。

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

警告框

警告框是用来提醒读者或者用户的一些特别信息的。

<div class="alert alert-warning" role="alert">
  This is a sample warning alert.
</div>

表单

表单是一个用于收集用户信息的样式组件，常见的包括输入框、下拉选项、单选框和复选框。

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

插件

Bootstrap v2的插件包括提供常见的UI交互效果的JS插件，如模态框、标签页、下拉菜单、轮播图和弹出菜单等。

模态框（Modal）

模态框用于展示一个带有强提醒性质的弹窗信息。

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">
        Modal Body
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-success" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

标签页（Tabs）

标签页指是用于在同一界面上展示多个小功能区块的形式，让用户可以在不同界面之间切换。

<ul class="nav nav-tabs">
  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home">This is Home Tab</div>
  <div class="tab-pane" id="profile">This is Profile Tab</div>
  <div class="tab-pane" id="messages">This is Messages Tab</div>
  <div class="tab-pane" id="settings">This is Settings Tab</div>
</div>

下拉菜单（Dropdowns）

下拉菜单是用于展示一系列相关选项的列表，一般位于界面的较高位置。

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  </a>

  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <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>

轮播图（Carousel）

轮播图常用于展示一组照片或图片，以醒目的形式呈现。

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="item active">
      <img src="img/slide1.jpg" alt="First Slide">
    </div>
    <div class="item">
      <img src="img/slide2.jpg" alt="Second Slide">
    </div>
    <div class="item">
      <img src="img/slide3.jpg" alt="Third Slide">
    </div>
  </div>
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

弹出菜单（Popover）

弹出菜单用于在用户点击按钮时展现更多信息。

<button type="button" class="btn btn-default" data-container="body" data-html="true" data-toggle="popover" data-placement="bottom" data-content="<strong>Popover</strong> This is a sample Popover Text!">Click Me</button>

总结

Bootstrap v2提供了大量预定义的CSS和JS类，可帮助开发者快速构建响应式Web应用程序及网站。在本教程中，我们详细介绍了Bootstrap v2的网格系统、样式、组件和插件等方面。希望这篇文章对于初学者来说有所帮助，对于开发者也有所启迪。

Bootstrap UI 编辑器 Bootstrap Well