• Bootstrap入门


    Bootstrap是一个用于快速开发Web应用程序和网站的前端框架。

    可以从http://getbootstrap.com/上下载Bootstrap的最新版本。

    下载一个ZIP文件bootstrap-3.3.2-dist.zip,

    解压后的目录bootstrap-3.3.2-dist中包含4部分内容:

    一个css子目录,

    一个fonts子目录,

    一个js子目录,

     

    示例

    1.新建一个Web工程bootstrap。

    2.将上面的三个文件夹复制到IntelliJ的Web目录下(或者eclipse的WebContent目录下)。

    3.新建index.jsp页面,在<head></head>中导入以下3个文件。

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

    4.index.jsp的代码:

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
      <head>
          <title>Bootstrap 实例 - 条纹表格</title>
          <link href="css/bootstrap.min.css" rel="stylesheet">
          <script src="js/jquery.min.js"></script>
          <script src="js/bootstrap.min.js"></script>
      </head>
      <body>
      <table class="table table-hover">
          <caption>悬停表格布局</caption>
          <thead>
          <tr>
              <th>名称</th>
              <th>城市</th>
              <th>密码</th>
          </tr>
          </thead>
          <tbody>
          <tr>
              <td>Tanmay</td>
              <td>Bangalore</td>
              <td>560001</td>
          </tr>
          <tr>
              <td>Sachin</td>
              <td>Mumbai</td>
              <td>400003</td>
          </tr>
          <tr>
              <td>Uma</td>
              <td>Pune</td>
              <td>411027</td>
          </tr>
          </tbody>
      </table>
      </body>
    </html>

    5.将工程部署到tomcat上,运行结果为

    QQ截图20150311093839

  • 相关阅读:
    浏览器基本的工作原理
    ES6异步操作之Promise
    vux中x-input在安卓手机输入框的删除按钮(@on-click-clear-icon)点击没反应
    浏览器工作原理
    form表单的两种提交方式,submit和button的用法
    HTML DOM submit() 方法
    JavaScript test() 方法
    eval() 函数
    正则表达式
    onblur 事件
  • 原文地址:https://www.cnblogs.com/weilunhui/p/4329019.html
Copyright © 2020-2023  润新知