1 下载Bootstrap

　　Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。当前下载的Bootstrap版本为v3.3.7

http://getbootstrap.com/

http://v3.bootcss.com/

http://www.runoob.com/bootstrap/bootstrap-tutorial.html

2 Bootstrap包含的文件

css: Bootstrap最重要的部分，预先设计好的样式文件。

fonts: Bootstrap用到的字体。

js: Bootstrap用到的JS插件。

3 使用Bootstrap

　　现在网页中使用Bootstrap需要在网页中加载Bootstrap用到的css样式表，js文件。

1) BootStrap的JS插件依赖于Jquery库，需要在以下网站下载Jqeruy：

http://jquery.com/

2) 编写第一个Bootstrap

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <link rel="stylesheet" href="css/index.css" />

        <meta name="viewport" content="width=device-width,initial-scale=1">

        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

        <link rel="icon" href="./img/index.png">

        <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

        <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->

        <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

        <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

        <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

    </head>

    <body>

        <div class="container">

            <h1 class="page-header">使用<small>Bootstrap编写网页</small></h1>

            <p>helloWorld

            </p>

        </div>

    </body>

</html>

bootstrap学习总结-01 环境准备的更多相关文章

  1. OpenGL 学习笔记 01 环境配置

    以下教程仅适用于Mac下的Xcode编程环境!其他的我也不会搞. 推荐教程:opengl-tutorial  本项目Github网址       OpenGL太可怕了...必需得把学的记下来,不然绝壁 ...

  2. Bootstrap学习笔记01

    1.Make Images Mobile Responsive 用处:   使图片适配你的页面宽度. 操作:   给图片添加 .img-responsive class属性. <img src= ...

  3. SoapUI 学习总结-01 环境配置

    遇到的问题 1,怎么SoapUI的Request URL不支持大写怎么办? 问题:在SoapUI的Request URL中,每次输入的URL中含有的大写字母会自动转换为小写字母,导致请求不了对应的地址 ...

  4. python 全栈开发，Day57(响应式页面-@media介绍,jQuery补充,移动端单位介绍,Bootstrap学习)

    昨日内容回顾 ajax //get post 两种方式 做 请求 get 主要是获取数据 post 提交数据 同一个路由地址 既可以是get请求也可以是post请求 一个路由对应一个函数 get请求 ...

  5. 一起学习CMake – 01

    一起学习CMake – 01 本节介绍CMake里最常用的三个命令,分别是cmake_minimum_required; project; add_executable等. CMake是个好东西,在使 ...

  6. C++ GUI Qt4学习笔记01

    C++ GUI Qt4学习笔记01   qtc++signalmakefile文档平台 这一章介绍了如何把基本的C++只是与Qt所提供的功能组合起来创建一些简单的图形用户界面应用程序. 引入两个重要概 ...

  7. openresty 学习笔记一:环境安装

    openresty 学习笔记一:环境安装 openresty 是一个基于 Nginx 与 Lua 的高性能 Web 平台,其内部集成了大量精良的 Lua 库.第三方模块以及大多数的依赖项.用于方便地搭 ...

  8. Bootstrap~学习笔记索引

    回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...

  9. 软件测试之loadrunner学习笔记-01事务

    loadrunner学习笔记-01事务<转载至网络> 事务又称为Transaction,事务是一个点为了衡量某个action的性能,需要在开始和结束位置插入一个范围,定义这样一个事务. 作 ...

随机推荐

  1. 使用pngquant来压缩png资源缩小apk

    最近发现了一个叫做pngquant的工具,可以有效的压缩资源文件中的png文件,从而减小发布的apk的大小.我发现这个工具有两个特点: 1. 真无损,压缩后重新运行了我的app发现是没有任何区别的 2 ...

  2. Win2008上.NET4.0部署出错HTTP 错误 500.21 - Internal Server Error的解决方法

    原因:在安装Framework v4.0之后,再启用IIS,导致Framework没有完全安装 解决:开始->所有程序->附件->鼠标右键点击“命令提示符”->以管理员身份运行 ...

  3. SD卡状态广播

    SD状态发生改变的时候会对外发送广播.SD卡的状态一般有挂载.未挂载和无SD卡. 清单文件 一个广播接受者可以接受多条广播.这里在意图过滤器中添加是data属性是因为广播也需要进行匹配的.对方发送的广 ...

  4. Cadence Allegro元件封装制作流程

    (本文为转载,原文出处不详) 引言 一个元件封装的制作过程如下图所示.简单来说,首先用户需要制作自己的焊盘库Pads,包括普通焊盘形状Shape Symbol和花焊盘形状Flash Symbol:然后 ...

  5. jsp内置对象作业1-用户登录

    题目:编写一个jsp程序,实现用户登录,当用户输入的用户名或密码错误时,将页面重定向到错误提示也,并在该页面显示30秒后,自动返回到用户登录页面. 1.用户登录页面 <%@ page langu ...

  6. Django form 中文提交 错误

    在文件头部添加 刻解决 import sys reload(sys) sys.setdefaultencoding("utf-8")

  7. Entity Framework Code First （三）Data Annotations

    Entity Framework Code First 利用一种被称为约定(Conventions)优于配置(Configuration)的编程模式允许你使用自己的 domain classes 来表 ...

  8. node.js-概念

    官方网站:http://nodejs.cn/ 1.Node 是一个服务器端 JavaScript 解释器,可是真的以为JavaScript不错的同学学习Node就能轻松拿下,那么你就错了,总结:水深不 ...

  9. js 时间与时间戳的转换

      一:时间转时间戳:javascript获得时间戳的方法有四种,都是通过实例化时间对象 new Date() 来进一步获取当前的时间戳 1.var timestamp1 = Date.parse(n ...

  10. Java类加载器总结

    1.类的加载过程   JVM将类加载过程分为三个步骤:装载(Load),链接(Link)和初始化(Initialize)链接又分为三个步骤,如下图所示: 1) 装载:查找并加载类的二进制数据: 2)链 ...