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>
分享到:
相关推荐
#### 四、创建第一个页面 下面是一个简单的示例,展示如何在HTML5页面中引入Bootstrap并创建一个按钮: ```html <!DOCTYPE html> <title>Bootstrap介绍 <link rel="stylesheet" href="css/bootstrap.min.css...
Bootstrap3-Editable是一款基于Bootstrap框架的插件,主要用于在Bootstrap表格中实现行内编辑功能。这个插件使得用户可以直接在表格的每一行中编辑数据,而无需跳转到新的页面或者打开模态框,极大地提高了用户体验...
Bootstrap3 是一个流行的前端开发框架,由 Twitter 开发并开源,它提供了丰富的预定义样式、组件和JavaScript插件,使得创建响应式、移动优先的网页变得简单易行。在这个特定的场景中,我们关注的是Bootstrap3中的...
Bootstrap是世界上最流行的前端开发框架之一,它为开发者提供了丰富的组件、样式和JavaScript插件,用于快速构建响应式、移动优先的...配合《BootStrap实战》随书源码第3章的实例,动手实践是巩固理论知识的最佳方式。
Bootstrap 3 是一个流行的前端开发框架,用于构建响应式和移动设备优先的网页。将Bootstrap 3组件引入Axure,设计师可以更方便地在原型设计中实现现代网页的布局和样式,而无需编写代码。 Bootstrap 3 组件库是为...
Bootstrap3中文离线手册是一个非常实用的资源,它包含了对Bootstrap3框架的详细API文档,专为开发者设计,便于在没有网络连接的情况下查阅。Bootstrap是一个流行的前端开发框架,由Twitter开发,用于快速构建响应式...
Bootstrap3 是一个流行的前端开发框架,由Twitter开发并开源,它极大地简化了网页设计和响应式布局的实现。本资源“免费bootstrap3后台管理模板”是专为开发人员设计的一款基于Bootstrap3的后台管理系统界面模板,名...
Bootstrap3 Admin Template是一款基于Bootstrap3框架的后台管理界面模板,专为开发人员设计,用于快速构建功能丰富的、响应式的企业级后台系统。Bootstrap是Twitter推出的一款开源的前端框架,它包含CSS、JavaScript...
在第8章“输入框和导航组件”中,我们将深入探讨Bootstrap如何处理表单元素和导航结构,这两部分是任何网页设计中的关键组成部分。 **一、输入框组件** Bootstrap的输入框组件(Form Controls)为创建美观且功能...
Bootstrap3是其第三个主要版本,它在前两个版本的基础上进行了优化和改进,提供了更丰富的组件、更优秀的响应式设计以及更友好的API。 在Bootstrap3中文文档中,你可以找到以下关键知识点: 1. **基本结构**:文档...
1. **响应式布局**:Bootstrap3的核心特性之一就是响应式设计,它支持各种设备屏幕大小,从桌面到移动设备,通过预定义的栅格系统(Grid System)实现灵活的布局。栅格系统由12列组成,可以自由组合和堆叠,确保页面...
3. **预定义的CSS样式**:Bootstrap提供了一系列预定义的CSS类,如文本对齐,字体样式,颜色,按钮,表单,提示信息等,极大地简化了网页样式设计。 4. **导航组件**:Bootstrap的导航组件包括导航条(navbar)、...
例如,他们可能创建了一个名为`BButton.vue`的按钮组件,该组件不仅包含了Bootstrap3的按钮样式,还利用Vue2的特性,添加了自定义的事件处理和动态属性。又或者,他们可能有一个`BCarousel.vue`组件,实现了...
Bootstrap3是一款广受欢迎的前端开发框架,它以其响应式设计和移动优先的策略,极大地简化了网站开发。然而,一个显著的问题是,Bootstrap3在设计之初,并不完全支持古老的Internet Explorer 8(简称IE8)。这主要是...
**Python-django-bootstrap3** 是一个专门为 Django 框架设计的库,它使得在 Django 项目中集成和使用 Bootstrap 3 前端框架变得简单而高效。Bootstrap 是一个流行的开源工具包,用于快速构建响应式和移动优先的网站...
Bootstrap3是中国开发者非常熟悉的一款前端开发框架,尤其在2013年11月30日发布的这个中文文档版本,更是受到了广泛的关注和使用。Bootstrap3的中文文档为国内开发者提供了一个更便于理解和学习的平台,它详尽地介绍...
本章我们将深入探讨Bootstrap中的表格(Tables)和按钮(Buttons)元素,这两个组件在网页布局和交互中扮演着至关重要的角色。 ### 1. Bootstrap表格 Bootstrap的表格设计遵循简洁、响应式和易于定制的原则。表格...
Bootstrap 3 综合实战项目教程,Web前端响应式开发项目实战视频教程带源码资源Bootstrap 3 综合实战项目教程,Web前端响应式开发项目实战视频教程带源码资源Bootstrap 3 综合实战项目教程,Web前端响应式开发项目...
Bootstrap3 是一个流行的前端开发框架,由Twitter推出,旨在提供一套简洁、直观、强大的工具,用于构建响应式和移动优先的网站。这个“基于bootstrap3后台模板”包含了用于创建高效管理后台所需的所有元素和功能,...