【JavaWeb】Bootstrap简述

Bootstrap

  • 01_Bootstrap概念
  • 02_入门案例
  • 03_Bootstrap之响应式布局
  • 04_Bootstrap之全局css样式
  • 05_Bootstrap之组件
  • 06_Bootstrap之插件
  • 07_综合案例

01_Bootstrap概念

  • 介绍
    • Bootstrap是一个前端框架,由Twitter开发,非常受欢迎。
    • Bootstrap 是基于 HTML、CSS、JavaScript 的,它简洁灵活,使得 Web 开发更加快捷。
  • 框架
    • 相当于半成品;开发人员基于框架可以进行二次开发,大大的节省开发人员的开发时间。
  • 特点
    • 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果
    • 支持响应式布局,写一套页面就可以在不同分辨率的设备上有比较好的效果。

02_入门案例

  • 开发流程
    • 下载学习Bootstrap的相关资源
      • https://www.bootcss.com/
    • 将bootstrap资源导入到项目
      • 【JavaWeb】Bootstrap简述_第1张图片
    • 将bootstrap资源导入到页面
      • 导入bootstrap.css样式文件
      • 导入jquery.js类库文件
      • 导入boostrap.js类库文件
  • 代码实现
      <head>
          <title>Bootstrap的入门</title>
          <!-- Bootstrap的样式文件 -->
          <link href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css" rel="stylesheet">
          <!-- Jquery的类库文件 -->
          <script src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script>
          <!-- Bootstrap的类库文件 -->
          <script src="${pageContext.request.contextPath}/bootstrap/js/bootstrap.min.js"></script>
      
      
      </head>
      <body>
      <h1>你好,世界!</h1>
      </body>

03_Bootstrap之响应式布局

  • 概念
    • Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。
  • 组成
    • 栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。
    • 栅格系统容器包含行;行包含列,列包含内容
    • 栅格系统容器
      • container
      • container-fluid
      • row
      • col(col-lg、col-md、col-sm、col-xs)
  • 栅格参数
    • 【JavaWeb】Bootstrap简述_第2张图片
  • 需求:
    • 整个容器占满屏幕的宽度,
    • 在lg分辨率(大桌面)下,要求每一个元素占1个位置,
    • 在md分辨率(桌面)下,每一个元素占2个位置;
    • 在sm分辨率(平板)下,每一个元素占3个位置;
    • 在xs分辨率(手机)下,每一个元素占6个位置。
  • 代码实现
      <head>
          <title>Bootstrap的栅格系统</title>
          <%--导入bootstrap的样式文件--%>
          <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
          <%--导入jquery--%>
          <script src="js/jquery-3.2.1.min.js"></script>
          <%--导入bootstrap的脚本文件--%>
          <script src="bootstrap/js/bootstrap.min.js"></script>
      <%--
          1,定义一个栅格系统容器
          2,定义行
          3,定义列
      --%>
          <style>
              .one{
                  background-color: pink;
              }
              .two{
                  background-color: dodgerblue;
              }
              .three{
                  background-color: green;
              }
              .four{
                  background-color: orange;
              }
      
          </style>
      
      </head>
      <body>
      <%--1,定义栅格容器--%>
      <div class="container-fluid">
          <%--2,定义行--%>
          <div class="row">
              <div class="one col-lg-1 col-md-2 col-sm-3 col-xs-6">1</div>
              <div class="two col-lg-1 col-md-2 col-sm-3 col-xs-6">2</div>
              <div class="three col-lg-1 col-md-2 col-sm-3 col-xs-6">3</div>
              <div class="four col-lg-1 col-md-2 col-sm-3 col-xs-6">4</div>
      
              <div class="one col-lg-1 col-md-2 col-sm-3 col-xs-6">5</div>
              <div class="two col-lg-1 col-md-2 col-sm-3 col-xs-6">6</div>
              <div class="three col-lg-1 col-md-2 col-sm-3 col-xs-6">7</div>
              <div class="four col-lg-1 col-md-2 col-sm-3 col-xs-6">8</div>
      
              <div class="one col-lg-1 col-md-2 col-sm-3 col-xs-6">9</div>
              <div class="two col-lg-1 col-md-2 col-sm-3 col-xs-6">10</div>
              <div class="three col-lg-1 col-md-2 col-sm-3 col-xs-6">11</div>
              <div class="four col-lg-1 col-md-2 col-sm-3 col-xs-6">12</div>
          </div>
      
      </div>

04_Bootstrap之全局css样式

  • 按钮
      <!-- Standard button -->
      <button type="button" class="btn btn-default">(默认样式)Default</button>
      
      <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
      <button type="button" class="btn btn-primary">(首选项)Primary</button>
      
      <!-- Indicates a successful or positive action -->
      <button type="button" class="btn btn-success">(成功)Success</button>
      
      <!-- Contextual button for informational alert messages -->
      <button type="button" class="btn btn-info">(一般信息)Info</button>
      
      <!-- Indicates caution should be taken with this action -->
      <button type="button" class="btn btn-warning">(警告)Warning</button>
      
      <!-- Indicates a dangerous or potentially negative action -->
      <button type="button" class="btn btn-danger">(危险)Danger</button>
      
      <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
      <button type="button" class="btn btn-link">(链接)Link</button>
  • 图片
      <img src="..." class="img-rounded">
      
      <img src="..." class="img-circle">
      
      <img src="..." class="img-thumbnail">
  • 表格
                  <table class="table"  >
                      <tr class="danger">
                          <td>ID</td>
                          <td>账户</td>
                          <td>密码</td>
                          <td>操作</td>
                      </tr>
      
                      <tr>
      
                          <td>1</td>
                          <td>张三</td>
                          <td>root</td>
                          <td>
                              <a href="javascript:void(0);" class="btn btn-success">删除</a>
                          </td>
                      </tr>
                      <tr>
      
                          <td>2</td>
                          <td>李四</td>
                          <td>root</td>
                          <td>
                              <a href="javascript:void(0);" class="btn btn-default">删除</a>
                          </td>
                      </tr>
                  </table>
  • 表单
      <form class="form-horizontal">
          <div class="form-group">
              <label for="inputEmail3" class="col-sm-2 control-label">账户</label>
              <div class="col-sm-10">
                  <input type="email" class="i1 form-control" id="inputEmail3" placeholder="Email">
              </div>
          </div>
          <div class="form-group">
              <label for="inputPassword3" class=" col-sm-2 control-label">密码</label>
              <div class="col-sm-10">
                  <input type="password" class="i1 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"> 记住我
                      </label>
                  </div>
              </div>
          </div>
          <div class="form-group">
              <div class="col-sm-offset-2 col-sm-10">
                  <button type="submit" class="btn btn-default">登录</button>
              </div>
          </div>
      </form>

05_Bootstrap之组件

  • 导航条
      <nav class="navbar navbar-default navbar-inverse">
          <div class="container-fluid">
              <!-- Brand and toggle get grouped for better mobile display -->
              <div class="navbar-header">
                  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                      <span class="sr-only">Toggle navigation</span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                  </button>
                  <a class="navbar-brand" href="#">IT教育</a>
              </div>
      
              <!-- Collect the nav links, forms, and other content for toggling -->
              <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                  <ul class="nav navbar-nav">
                      <li class="active"><a href="#">Java <span class="sr-only">(current)</span></a></li>
                      <li><a href="#">Html</a></li>
                      <li class="dropdown">
                          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">更多课程 <span class="caret"></span></a>
                          <ul class="dropdown-menu">
                                  <li><a href="#">Python</a></li>
                              <li><a href="#">大数据</a></li>
                          </ul>
                      </li>
                  </ul>
                  <form class="navbar-form navbar-left">
                      <div class="form-group">
                          <input type="text" class="form-control" placeholder="请输入课程名称">
                      </div>
                      <button type="submit" class="btn btn-default">搜索</button>
                  </form>
                  <ul class="nav navbar-nav navbar-right">
                      <li><a href="#">联系客服</a></li>
                      <li class="dropdown">
                          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">我的 <span class="caret"></span></a>
                          <ul class="dropdown-menu">
                              <li><a href="#">个人中心</a></li>
                              <li><a href="#">我的订单</a></li>
                              <li><a href="#">课程中心</a></li>
                              <li role="separator" class="divider"></li>
                              <li><a href="#">退出登录</a></li>
                          </ul>
                      </li>
                  </ul>
              </div>
                    

你可能感兴趣的:(JavaWeb)