Bootstrap是前端开发中比较受欢迎的框架，简洁且灵活。它基于HTML、CSS和JavaScript，HTML定义页面元素，CSS定义页面布局，而JavaScript负责页面元素的响应。Bootstrap将HTML、CSS和JavaScript封装成一个个功能组件，用起来简单，粗暴,是由美国麻省理工学院的Mark Otto和Jacob Thornton合作开发。由于笔者的室友在三天半之内就学完了html5+css3+javascript+bootstrap框架，这让我感到压力巨大。尤其是这几天课程比较多，又不敢逃课，
 
学习真正的知识进度缓慢。所以笔者也开始进入了Bootstrap领域进行研究。
 

1.登录Bootstrap官网

点击Download.

2.下载Bootstrap

Download Bootstrap：下载预编译和压缩版Bootstrap（不含文档和源码）。

Download code：Bootstrap源码，如官网介绍，需要编译Less文件 和一些安装。

刚接触Bootstrap的话建议下载第一个，下载下来直接用。

使用Bootstrap进行前端开发
开发环境：WAMP（windows下的Apache + MySQL + PHP）

编辑器：DW

Step 1: 将下载下来的压缩包解压，将里面的css,和js文件夹放到你的工程目录中(即您wamp下的网站根目录了)。在工程根目录中新建了一个”index.html”，用来测试Bootstrap。

Step 2: 编辑”index.html”，使用Bootstrap封装的功能部件。

编写代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>在线尝试 Bootstrap 实例</title>

<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

<h1>Hello, world!</h1>

</body>

</html>

Step 3: 在浏览器中打开我们编写好的”index.html”查看。

如果发现有大写的Hello,world!则说明您的Bootstrap安装成功了！

实战web前端之：Bootstrap框架windows下安装与使用的更多相关文章

  1. Scrapy框架Windows下安装

    在windows下安装好Python3 后,安装Scrapy也有许多种方法,我这里采用pip 安装.前提您已经安装了pip 直接在cmd命令行中 pip install Scrapy building ...

  2. 【前端工具】 在 Windows 下安装 GruntJS——教程（译）

    在你安装 Grunt.js 之前你需要先安装 Node.js.对于本教程而言,我已经安装好了 node.js v0.10.0. 我将要安装 Grunt.js v0.4.1.警告:如果你已经安装了 Gr ...

  3. 06 前端之Bootstrap框架

    目录 前端之Bootstrap框架 一.简介 二.引入方式 本地引入(最完整的) CDN引入 三.布局容器 四.栅格系统 五.列偏移 六.表格与表单 6.1表格 6.2表单form 七.按钮 预定义样 ...

  4. (转)windows下安装nodejs及框架express

    转自:http://jingyan.baidu.com/article/456c463b60fb380a583144a9.html windows下安装nodejs及框架express nodejs从 ...

  5. 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案（一）

    相关连接导航 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二) 常用 Gulp 插件汇总 ...

  6. Web前端三大主流框架是什么？Web前端前景与就业形势

    近十年以来,IT行业发展火热,衍生了很多新职业,例如UI设计师.开发工程师.软件测试工程师等等,在众多备受瞩目的新生职业中,Web前端工程师是其中的一员.那么Web前端三大主流框架是什么呢? 一.We ...

  7. python应用：爬虫框架Scrapy系统学习第二篇——windows下安装scrapy

    windows下安装scrapy 依次执行下列操作: pip install wheel pip install lxml pip install PyOpenssl 安装Microsoft visu ...

  8. windows下安装ruby和 rails的痛苦经历

    准备安装ruby on rails,在网上搜了下,步骤都类似,但实际安装过程中却碰到很多问题.下面详细说下: 说明下,文章是按照我尝试的过程描述的.但最终是靠 运行 railsinstaller一键式 ...

  9. QT学习之windows下安装配置PyQt5

    windows下安装配置PyQt5 目录 为什么要学习QT 命令行安装PyQt5以及PyQt5-tools 配置QtDesigner.PyUIC及PyRcc 为什么要学习QT python下与界面开发 ...

随机推荐

  1. 树莓派配置watchdog

    安装watchdog apt install watchdog 编辑/etc/modules,添加bcm2708_wdog 编辑/etc/watchdog.conf watchdog-device = ...

  2. C++相关：部分标准库特殊设施

    C++ tuple(元组) tuple是C++11新标准里的类型.它是一个类似pair类型的模板.pair类型是每个成员变量各自可以是任意类型,但是只能有俩个成员,而tuple与pair不同的是它可以 ...

  3. 关于内核转储(core dump)的设置方法

    原作者:http://blog.csdn.net/wj_j2ee/article/details/7161586 1. 内核转储作用 (1) 内核转储的最大好处是能够保存问题发生时的状态. (2) 只 ...

  4. 对混合数值，字符，null的字段进行排序

    今天有个需求是进行排序.  这一列值是字符串类型的, 但是里面有数值型 比如"1" 和null类型的.  实现效果是需要 数值型的先按照数值的方式先排,然后字符串按照字符传排,最后 ...

  5. 传统IT公司/创业公司/互联网大公司的offer如何选择？[转载+原创]

    背景介绍: 第一家工作的公司是一家跨国外企安全公司, 骄傲的称自己不是互联网公司而是传统软件公司, 第二家公司是当下最热的知识分享社区, 创业公司. 第三家公司是挤走谷歌, 曾一度称霸中国的搜索引擎公 ...

  6. Spring3.1 对Bean Validation规范的新支持(方法级别验证)

    上接Spring提供的BeanPostProcessor的扩展点-1继续学习. 一.Bean Validation框架简介 写道Bean Validation standardizes constra ...

  7. 4.app是怎么炼成的

    很多刚进入app后端的小伙伴,有的是之前没有接触过这个行业,有的是只在学校学习了基本的技术知识,不知道开发app的整个流程是怎么样的,因此心里会有一股恐惧.听着别人口中的一大串app相关的术语,也不知 ...

  8. selenium设置proxy、headers(phantomjs、Chrome、Firefox)

    phantomjs 设置ip 方法1: service_args = [ '--proxy=%s' % ip_html, # 代理 IP:prot (eg:192.168.0.28:808) '--p ...

  9. linux常用命令：创建文件和文件夹

    1.首先说一下touch 创建文件的命令,touch可以用于创建二进制文件,用法非常简单.用法:touch+文件名,touch与文件名之间一定要有空格.图中先用之前分享过的命令来查看一下/目录下面有多 ...

  10. IDEA破解 Intellij IDEA license server 激活（可用）

    激活地址如下图所示: 2018 intellij idea 注册码(亲测可用): C0FHYYCJ22-eyJsaWNlbnNlSWQiOiJDMEZIWVlDSjIyIiwibGljZW5zZWVO ...