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上,运行结果为

时间: 2024-10-23 02:33:54

Bootstrap入门的相关文章

Bootstrap入门(二)栅格

Bootstrap入门(二)栅格 全局CSS样式--栅格 先引入本地的CSS文件(根据自己的文件夹,有不同的引入地址,我是放在一个新建的名为css的文件夹中) container 容器,栅格系统是依赖容器存在的 ... Bootstrap 提供的栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局.参数: 超小屏幕 手机 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面显示

【1】Bootstrap入门引言

Bootstrap学习者要具备的一些要求: [1]xhtml常用标签的基础知识 [2]xhtml+css布局的基础知识 [3]html5+css3的基础知识 ====================================== 必备的软件: [1]手写代码-----Dreamweaver.notepad++.EditPlus [2]浏览器-----火狐.谷歌和ie9+ [3]调试工具-----火狐插件firebug ====================================

Bootstrap入门(五)表单

先引入本地的CSS文件 <link href="css/bootstrap.min.css" rel="stylesheet"> 一.内联表单 单独的表单控件会被自动赋予一些全局样式.所有设置了 .form-control 类的 <input>.<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;. 而内联表单,要为 <form> 元素添加 .form-inli

BootStrap入门教程 (一)

BootStrap入门教程 (一) 2011年,twitter的"一小撮"工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootStrap.Bootstrap由MARK OTTO和Jacob Thornton所设计和建立,在github上开源之后,迅速成为该站上最多人watch&fork的项目.大量工程师踊跃为该项目贡献代码,社区惊人地活跃,代码版本进化非常快速,官方文档质量极其高(可以说是优雅),同时涌现了许多

01.Bootstrap入门

Bootstrap介绍: Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷.它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架.Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成.Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSN

BootStrap入门教程 (三)

上讲回顾:Bootstrap的基础CSS(Base CSS)提供了优雅,一致的多种基础Html页面要素,包括排版,表格,表单,按钮等,能够满足前端工程师的基本要素需求. Bootstrap作为完整的前端工具集,内建了大量的强大优雅可重用的组件,包括按钮(Button),导航(Navigation),标签(Labels),徽章(Badges),排版(Typography),缩略图( thumbnails),提醒(Alert),进度条(progress bar),杂项(Miscellaneous).

BootStrap入门教程 (一) :手脚架Scaffolding(全局样式(Global Style),格网系统(Grid System),流式格网(Fluid grid System),自定义(Customing),布局(Layouts))

2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootStrap.Bootstrap由MARK OTTO和Jacob Thornton所设计和建立,在github上开源之后,迅速成为该站上最多人watch&fork的项目.大量工程师踊跃为该项目贡献代码,社区惊人地活跃,代码版本进化非常快速,官方文档质量极其高(可以说是优雅),同时涌现了许多基于Bootstrap建设的网站:界面清新.简洁;要素

BootStrap入门教程 (四)

上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert),进度条(progress bar)等,能够很好减少前端工程师的代码量,实现更加丰富充实的页面. Bootstrap作为一套良好的前端工具,要实现现代的动态页面效果,javascript插件是必不可少的.它提供了12个基于JQuery类库的插件,包括模态窗口(Modals),滚动监控(Scrolls

BootStrap入门教程 (二)

上讲回顾:Bootstrap的手脚架(Scaffolding)提供了固定(fixed)和流式(fluid)两种布局,它同时建立了一个宽达940px和12列的格网系统. 基于手脚架(Scaffolding)之上,Bootstrap的基础CSS(Base CSS)提供了一系列的基础Html页面要素,旨在为用户提供新鲜.一致的页面外观和感觉.本文将主要深入讲解排版(Typography),表格(Table),表单(Forms),按钮(Buttons)这四个方面的内容. 排版 (Typography),

BootStrap入门教程 (四) :JQuery类库插件(模态窗口,滚动监控,标签效果,提示效果,“泡芙”效果,警告区域,折叠效果,旋转木马,输入提示)

上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert),进度条(progress bar)等,能够很好减少前端工程师的代码量,实现更加丰富充实的页面. Bootstrap作为一套良好的前端工具,要实现现代的动态页面效果,javascript插件是必不可少的.它提供了12个基于JQuery类库的插件,包括模态窗口(Modals),滚动监控(Scrolls