`

第一章 BootStrap3 简介及HelloWord

阅读更多
Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。




为什么使用 Bootstrap?

移动设备优先:自 Bootstrap 3 起,框架包含了贯穿于整个库的移动设备优先的样式。

浏览器支持:所有的主流浏览器都支持 Bootstrap。Internet Explorer Firefox Opera Google Chrome Safari

容易上手:只要您具备 HTML 和 CSS 的基础知识,您就可以开始学习 Bootstrap。

响应式设计:Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。更多有关响应式设计的内容详见 Bootstrap 响应式设计。

响应式设计:
它为开发人员创建接口提供了一个简洁统一的解决方案。
它包含了功能强大的内置组件,易于定制。
它还提供了基于 Web 的定制。
它是开源的。


Bootstrap 包的内容

基本结构:Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。

CSS:Bootstrap 自带以下特性:全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class,以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。

组件:Bootstrap 包含了十几个可重用的组件,用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件 部分详细讲解。

JavaScript 插件:Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件,也可以逐个包含这些插件。这将在 Bootstrap 插件 部分详细讲解。

定制:您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。



helloWorld.jsp


<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- 压缩的css -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap.min.css">
<!-- 主题css -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap-theme.min.css">
<!-- 压缩的jquery,BootStrap是基于jquery的js框架,所以需要引用jquery -->
<script src="${pageContext.request.contextPath}/bootstrap3/js/jquery-1.11.2.min.js"></script>
<!-- bootstrap的压缩js -->
<script src="${pageContext.request.contextPath}/bootstrap3/js/bootstrap.min.js"></script>
</head>
<body style="padding: 20px">
<button type="button" class="btn btn-danger">Bootstrap你好呀!</button>
</body>
</html>

分享到:
评论

相关推荐

    第1章 Bootstrap介绍

    #### 四、创建第一个页面 下面是一个简单的示例,展示如何在HTML5页面中引入Bootstrap并创建一个按钮: ```html &lt;!DOCTYPE html&gt; &lt;title&gt;Bootstrap介绍 &lt;link rel="stylesheet" href="css/bootstrap.min.css...

    bootstrap3-editable

    Bootstrap3-Editable是一款基于Bootstrap框架的插件,主要用于在Bootstrap表格中实现行内编辑功能。这个插件使得用户可以直接在表格的每一行中编辑数据,而无需跳转到新的页面或者打开模态框,极大地提高了用户体验...

    bootstrap3 侧边导航栏

    Bootstrap3 是一个流行的前端开发框架,由 Twitter 开发并开源,它提供了丰富的预定义样式、组件和JavaScript插件,使得创建响应式、移动优先的网页变得简单易行。在这个特定的场景中,我们关注的是Bootstrap3中的...

    BootStrap实战 源码第3章

    Bootstrap是世界上最流行的前端开发框架之一,它为开发者提供了丰富的组件、样式和JavaScript插件,用于快速构建响应式、移动优先的...配合《BootStrap实战》随书源码第3章的实例,动手实践是巩固理论知识的最佳方式。

    Axure Bootstrap 3 组件

    Bootstrap 3 是一个流行的前端开发框架,用于构建响应式和移动设备优先的网页。将Bootstrap 3组件引入Axure,设计师可以更方便地在原型设计中实现现代网页的布局和样式,而无需编写代码。 Bootstrap 3 组件库是为...

    bootstrap3中文离线手册

    Bootstrap3中文离线手册是一个非常实用的资源,它包含了对Bootstrap3框架的详细API文档,专为开发者设计,便于在没有网络连接的情况下查阅。Bootstrap是一个流行的前端开发框架,由Twitter开发,用于快速构建响应式...

    bootstrap3中文文档_cn.zip

    这个“bootstrap3中文文档_cn.zip”压缩包包含了关于 Bootstrap 3 的详细中文文档,帮助开发者更好地理解和应用这个框架。 Bootstrap 3 的核心特点包括网格系统、组件、JavaScript 插件和定制选项。以下是对这些...

    BootStrap3 Admin Template

    Bootstrap3 Admin Template是一款基于Bootstrap3框架的后台管理界面模板,专为开发人员设计,用于快速构建功能丰富的、响应式的企业级后台系统。Bootstrap是Twitter推出的一款开源的前端框架,它包含CSS、JavaScript...

    免费bootstrap3后台管理模板

    Bootstrap3 是一个流行的前端开发框架,由Twitter开发并开源,它极大地简化了网页设计和响应式布局的实现。本资源“免费bootstrap3后台管理模板”是专为开发人员设计的一款基于Bootstrap3的后台管理系统界面模板,名...

    Bootstrap 第8章 输入框和导航组件

    在第8章“输入框和导航组件”中,我们将深入探讨Bootstrap如何处理表单元素和导航结构,这两部分是任何网页设计中的关键组成部分。 **一、输入框组件** Bootstrap的输入框组件(Form Controls)为创建美观且功能...

    bootstrap3中文文档

    Bootstrap3是其第三个主要版本,它在前两个版本的基础上进行了优化和改进,提供了更丰富的组件、更优秀的响应式设计以及更友好的API。 在Bootstrap3中文文档中,你可以找到以下关键知识点: 1. **基本结构**:文档...

    Bootstrap3中文文档(v3.0.3)

    1. **响应式布局**:Bootstrap3的核心特性之一就是响应式设计,它支持各种设备屏幕大小,从桌面到移动设备,通过预定义的栅格系统(Grid System)实现灵活的布局。栅格系统由12列组成,可以自由组合和堆叠,确保页面...

    ACCP8.0Y2Web前端框架与移动应用开发第三章Bootstrap组件

    3. **预定义的CSS样式**:Bootstrap提供了一系列预定义的CSS类,如文本对齐,字体样式,颜色,按钮,表单,提示信息等,极大地简化了网页样式设计。 4. **导航组件**:Bootstrap的导航组件包括导航条(navbar)、...

    用Vue2实现的Bootstrap3组件

    例如,他们可能创建了一个名为`BButton.vue`的按钮组件,该组件不仅包含了Bootstrap3的按钮样式,还利用Vue2的特性,添加了自定义的事件处理和动态属性。又或者,他们可能有一个`BCarousel.vue`组件,实现了...

    bootstrap3 支持ie8

    Bootstrap3是一款广受欢迎的前端开发框架,它以其响应式设计和移动优先的策略,极大地简化了网站开发。然而,一个显著的问题是,Bootstrap3在设计之初,并不完全支持古老的Internet Explorer 8(简称IE8)。这主要是...

    Python-djangobootstrap3集成了Bootstrap3的Django

    **Python-django-bootstrap3** 是一个专门为 Django 框架设计的库,它使得在 Django 项目中集成和使用 Bootstrap 3 前端框架变得简单而高效。Bootstrap 是一个流行的开源工具包,用于快速构建响应式和移动优先的网站...

    bootstrap3中文文档_cn20131130

    Bootstrap3是中国开发者非常熟悉的一款前端开发框架,尤其在2013年11月30日发布的这个中文文档版本,更是受到了广泛的关注和使用。Bootstrap3的中文文档为国内开发者提供了一个更便于理解和学习的平台,它详尽地介绍...

    Bootstrap 第3章 表格和按钮

    本章我们将深入探讨Bootstrap中的表格(Tables)和按钮(Buttons)元素,这两个组件在网页布局和交互中扮演着至关重要的角色。 ### 1. Bootstrap表格 Bootstrap的表格设计遵循简洁、响应式和易于定制的原则。表格...

    Bootstrap 3 综合实战项目教程,Web前端响应式开发项目实战视频教程带源码资源

    Bootstrap 3 综合实战项目教程,Web前端响应式开发项目实战视频教程带源码资源Bootstrap 3 综合实战项目教程,Web前端响应式开发项目实战视频教程带源码资源Bootstrap 3 综合实战项目教程,Web前端响应式开发项目...

Global site tag (gtag.js) - Google Analytics