前几天我听朋友说起 twitter bootstrap 。我带着好奇在网上搜索了一下，都是一些英文信息。本来就头大 ，加上英文不好，只好到github上下载了源码参考着学习了一下 。下面是我安装 booostrap的几个步骤。
1、Twitter bootstrap 下载
github上面的下载方式很多，这里下载的 zip 压缩包。
本章以v2.0.2 写的，考虑以后 bootstrap 可能会升级 。
下载地址是：http://twitter.github.com/bootstrap/assets/bootstrap.zip
百度U盘 href="http://pan.baidu.com/share/link?shareid=92110&uk=1862801370
2、解压bootstrap文件
解开后的目录有 docs 、img 、 js 、 less 和几个文件 。看到的第一眼，让人不由自主的点击了 docs 文件夹。在这里就可以开始学习了 。
3、第一个boostrap的应用
在docs目录下能找到examples的文件夹里面有三个文件。创建了 Lesson_1.htm的文件 。 下面是我些的代码 。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>Bootstrap--Lesson_1</title>
<!-- Le styles -->
<link rel="stylesheet" href="../boostrap/css/bootstrap.min.css" >
<link rel="stylesheet" href="../boostrap/css/bootstrap-responsive.min.css" >
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="myModal" class="modal">
<div class="modal-header">
<a class="close" data-dismiss="modal" >×</a>
<h3>twitter bootstrap 第一章</h3>
</div>
<div class="modal-body">
这是第一个 bootstrap 程序 。</br>
Hello word !
<div style="float:right;">
Tity-开始你学习之旅</div>
</div>
<div class="modal-footer">
保存
关闭
</div>
</div>
</body>
</html>
上面代码是bootstrap的 modal 插件的简单应用。
1、引用两个 css 样式。
<link rel="stylesheet" href="../boostrap/css/bootstrap.min.css" >
<link rel="stylesheet" href="../boostrap/css/bootstrap-responsive.min.css" >
bootstrap.min.css 是 bootstrap的基本样式。
bootstrap-responsive.min.css 是响应样式。
注意：bootstrap.min.css 要放在 bootstrap-responsive.min.css样式的前面。 如果要添加自己的样式必需放在 bootstrap-responsive.min.css 后面。
2、 html的基本元素
<div id="myModal" class="modal">
<div class="modal-header">
<a class="close" data-dismiss="modal" >×</a>
<h3>twitter bootstrap 第一章</h3>
</div>
<div class="modal-body">
这是第一个 bootstrap 程序 。</br>
Hello word !
<div style="float:right;">
Tity-开始你学习之旅</div>
</div>
<div class="modal-footer">
保存
关闭
</div>
</div>
最后查看效果 。
源代码
http://pan.baidu.com/share/link?shareid=92152&uk=1862801370
分享到：
相关推荐
#### 四、创建第一个页面 下面是一个简单的示例，展示如何在HTML5页面中引入Bootstrap并创建一个按钮： ```html <!DOCTYPE html> <title>Bootstrap介绍 <link rel="stylesheet" href="css/bootstrap.min.css...
在本主题中，我们将深入探讨Twitter Bootstrap的第三章，这是一个流行的前端开发框架，以其响应式设计和易用性而闻名。Bootstrap使用HTML、CSS和JavaScript，帮助开发者快速构建美观且功能丰富的网页。在这个章节，...
Bootstrap是由Twitter的开发者于2011年创建的，其主要目标是简化网页设计过程，让开发者能够快速构建具有现代感且兼容各种设备的网站。Bootstrap的核心理念是模块化和可重用性，它提供了一系列预先设计的CSS样式、...
在第26章中，我们将会深入探讨Bootstrap的核心概念和实用技巧。 首先，Bootstrap的核心在于其网格系统。它采用12列的响应式布局，可以根据屏幕大小自动调整元素的宽度，从而确保在不同设备上都能呈现良好的视觉效果...
《Twitter Bootstrap3 Succinctly》是一本关于Bootstrap框架升级到第三版的入门级教程书籍。作者是Peter Shaw，书籍前言由Daniel Jebaraj撰写，版权信息部分表明这本书是由Syncfusion公司版权所有，并提供了一个重要...
在第22章"Bootstrap 首页内容[上]"中，我们将会深入探讨如何利用Bootstrap创建一个吸引人的网站首页。这个章节可能涵盖了以下几个关键知识点： 1. **Bootstrap简介**：首先，你需要了解Bootstrap的基本概念，它是...
这是使用Bootstrap3 创建的第一个“Hello, World!”页面。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn....
Bootstrap，由Twitter开发，是一种广泛使用的开源前端框架，它提供了丰富的HTML、CSS和JavaScript组件，用于简化网页设计和开发过程。Bootstrap案例通常包含各种使用Bootstrap框架构建的实际网站或页面示例，这些...
在这一章中，你可能会学到Bootstrap的核心特性，如网格系统、组件库、JavaScript插件以及其对响应式设计的支持。Bootstrap的网格系统是其布局设计的核心，通过12列的响应式栅格，可以轻松创建多设备适配的页面结构。...
Bootstrap是世界上最流行的前端开发框架之一，由Twitter的开发者创建，旨在简化Web开发过程，提供一套易用、响应式和移动设备优先的工具。这个“Bootstrap-个人简历响应式网页模板”充分利用了Bootstrap的核心特性，...
Bootstrap是世界上最流行的前端开发框架之一，它由Twitter的开发者创建并开源。这个“学校实训项目-国外Bootstrap设计公司网站模板.zip”文件显然包含了使用Bootstrap框架构建的网站模板，旨在为学生提供一个实践...
Bootstrap是由Twitter开发并开源的一款CSS/HTML/JS框架，它提供了丰富的预设样式、组件和JavaScript插件，大大简化了网页的开发过程。其主要特点包括响应式设计、网格系统、易于定制和丰富的UI元素。 2. **响应式...
Bootstrap是由Twitter开发并开源的，它提供了一系列预先设计的CSS样式、JavaScript组件和字体图标，使得开发者可以快速地创建具有现代感的网页设计。在本课程中，你将了解到以下关键知识点： 1. **响应式设计**：...
在《BootStrap实战》一书中，第二章通常会深入介绍Bootstrap的基础知识和核心概念。 1. **响应式设计**：Bootstrap通过栅格系统实现了响应式设计，这意味着网站可以根据不同设备的屏幕尺寸自动调整布局。这一特性...
我的第一个 Bootstrap 页面 <link rel="stylesheet" href="path/to/bootstrap/css/bootstrap.min.css"> 欢迎来到我的网站 点击我 <script src="path/to/bootstrap/js/bootstrap.min.js"> ``` 在这个...
Bootstrap是世界上最流行的前端开发框架之一，由Twitter的开发者创建，旨在简化网页设计和开发过程。这个"BootStrap精美模板"集合提供了一系列预设计的页面和元素，方便开发者快速构建响应式、移动优先的网站。以下...
Bootstrap是由Twitter开发并开源的一款快速、直观且强大的前端框架，用于构建响应式布局和移动设备优先的WEB项目。2016年的Bootstrap精美模板大全集合了当时流行的模板设计，为开发者提供了丰富的界面元素和设计灵感...
在本课程"ACCP8.0 Y2 Web前端框架与移动应用开发第二章Bootstrap样式"中，我们将深入探讨Bootstrap这一流行的前端开发框架，以及如何利用它来构建响应式、美观的网页和移动应用。Bootstrap是由Twitter开发并开源的一...
每一章都会介绍一个特定的问题，并提供多个可立即应用的解决方案，让开发者能够在实际项目中迅速找到适用的方法。 学习这两本书，你将能掌握Bootstrap 4的基础和高级特性，包括： 1. **基本结构**：理解HTML5文档...