正文

掌握Bootstrap：精选50题，轻松入门与实战技巧挑战

/0 浏览量
0324

1. Bootstrap简介

Bootstrap是一个流行的前端框架，用于快速开发响应式、移动设备优先的网站。它提供了丰富的CSS样式和组件，可以帮助开发者节省时间并提高开发效率。

2. Bootstrap基本结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  <title>Bootstrap入门</title>
  <!-- Bootstrap 样式 -->
  <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<!-- 页面内容 -->

<!-- Bootstrap 插件 -->
<script src="https://cdn.staticfile.org/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

3. Bootstrap常用类名

  • .container：固定宽度容器。
  • .container-fluid：全宽度容器。
  • .row：行容器。
  • .col-md-*：响应式列宽度。

4. Bootstrap栅格系统

Bootstrap的栅格系统允许开发者通过列的排列组合来创建响应式布局。

5. Bootstrap按钮

<button type="button" class="btn btn-default">默认按钮</button>
<button type="button" class="btn btn-primary">主要按钮</button>
<button type="button" class="btn btn-success">成功按钮</button>
<button type="button" class="btn btn-info">信息按钮</button>
<button type="button" class="btn btn-warning">警告按钮</button>
<button type="button" class="btn btn-danger">危险按钮</button>

6. Bootstrap表单

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">邮箱地址</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入邮箱地址">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">密码</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">文件输入</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">这里可以上传文件。</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> 记住我
    </label>
  </div>
  <button type="submit" class="btn btn-default">提交</button>
</form>

7. Bootstrap表格

<table class="table table-bordered">
  <thead>
    <tr>
      <th>编号</th>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>张三</td>
      <td>20</td>
    </tr>
    <tr>
      <td>2</td>
      <td>李四</td>
      <td>22</td>
    </tr>
  </tbody>
</table>

8. Bootstrap表单控件

<div class="form-group">
  <label for="exampleInputText">文本框</label>
  <input type="text" class="form-control" id="exampleInputText" placeholder="请输入文本">
</div>
<div class="form-group">
  <label for="exampleInputPassword">密码框</label>
  <input type="password" class="form-control" id="exampleInputPassword" placeholder="请输入密码">
</div>
<div class="form-group">
  <label for="exampleInputFile">文件输入</label>
  <input type="file" id="exampleInputFile">
  <p class="help-block">这里可以上传文件。</p>
</div>
<div class="form-group">
  <label for="exampleInputDate">日期选择器</label>
  <input type="date" class="form-control" id="exampleInputDate">
</div>
<div class="form-group">
  <label for="exampleInputTime">时间选择器</label>
  <input type="time" class="form-control" id="exampleInputTime">
</div>
<div class="form-group">
  <label for="exampleInputSelect">选择框</label>
  <select class="form-control" id="exampleInputSelect">
    <option>请选择</option>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
  </select>
</div>

9. Bootstrap进度条

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

10. Bootstrap媒体对象

<div class="media">
  <a class="media-left" href="#">
    <img class="media-object" src="..." alt="...">
  </a>
  <div class="media-body">
    <h4 class="media-heading">标题</h4>
    <p>这里是媒体对象的描述。</p>
  </div>
</div>

11. Bootstrap轮播图

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- 轮播（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>
  <!-- 轮播（Carousel）项目 -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">标题 1</div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">标题 2</div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">标题 3</div>
    </div>
  </div>
  <!-- 轮播（Carousel）控制按钮 -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">上一页</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">下一页</span>
  </a>
</div>

12. Bootstrap模态框

<!-- 按钮触发模态框 -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  打开模态框
</button>

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
      </div>
      <div class="modal-body">
        这里是模态框的内容。
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">提交</button>
      </div>
    </div>
  </div>
</div>

13. Bootstrap下拉菜单

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
    下拉菜单
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">首页</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">关于我们</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">联系方式</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">更多</a></li>
  </ul>
</div>

14. Bootstrap分页

<nav>
  <ul class="pagination">
    <li><a href="#">&laquo;</a></li>
    <li><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="#">&raquo;</a></li>
  </ul>
</nav>

15. Bootstrap标签页

<div id="myTab" class="tabbable">
  <ul class="nav nav-tabs">
    <li class="active"><a href="#home" data-toggle="tab">首页</a></li>
    <li><a href="#profile" data-toggle="tab">个人资料</a></li>
    <li><a href="#messages" data-toggle="tab">消息</a></li>
    <li><a href="#settings" data-toggle="tab">设置</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="home">
      <p>这里是首页内容。</p>
    </div>
    <div class="tab-pane" id="profile">
      <p>这里是个人资料内容。</p>
    </div>
    <div class="tab-pane" id="messages">
      <p>这里是消息内容。</p>
    </div>
    <div class="tab-pane" id="settings">
      <p>这里是设置内容。</p>
    </div>
  </div>
</div>

16. Bootstrap缩略图

<div class="row">
  <div class="col-md-4">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  <div class="col-md-4">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  <div class="col-md-4">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
</div>

17. Bootstrap警告框

<div class="alert alert-success" role="alert">
  成功！很好地完成了操作。
</div>
<div class="alert alert-info" role="alert">
  信息！请注意这个操作。
</div>
<div class="alert alert-warning" role="alert">
  警告！有东西出了点问题。
</div>
<div class="alert alert-danger" role="alert">
  错误！似乎发生了某个错误。
</div>

18. Bootstrap按钮组

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">左</button>
  <button type="button" class="btn btn-default">中</button>
  <button type="button" class="btn btn-default">右</button>
</div>

19. Bootstrap输入框组

<div class="input-group">
  <span class="input-group-addon">@</span>
  <input type="text" class="form-control" placeholder="用户名">
  <span class="input-group-addon">.com</span>
</div>

20. Bootstrap下拉菜单组

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown">
    下拉菜单
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系方式</a></li>
    <li class="divider"></li>
    <li><a href="#">更多</a></li>
  </ul>
</div>

21. Bootstrap轮播图指示器

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- 轮播（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>
  <!-- 轮播（Carousel）项目 -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">标题 1</div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">标题 2</div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">标题 3</div>
    </div>
  </div>
  <!-- 轮播（Carousel）控制按钮 -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">上一页</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">下一页</span>
  </a>
</div>

22. Bootstrap轮播图控制按钮

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- 轮播（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>
  <!-- 轮播（Carousel）项目 -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">标题 1</div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">标题 2</div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">标题 3</div>
    </div>
  </div>
  <!-- 轮播（Carousel）控制按钮 -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">上一页</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">下一页</span>
  </a>
</div>

23. Bootstrap轮播图自动播放

”`html

-- 展开阅读全文 --