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. SQLite剖析之C/C++接口

    前言 SQLite3是SQLite一个全新的版本,它虽然是在SQLite2的代码基础之上开发的,但是使用了和之前的版本不兼容的数据库格式和API.SQLite3是为了满足以下的需求而开发的:支持UTF ...

  2. Matlab中给ｆｉｇｕｒｅ添加图例（legend），标题（ｔｉｔｌｅ）和颜色（ｃｏｌｏｒ）

    在Matlab绘图过程中,尤其是需要将多个图绘制在相同的坐标轴中时,通常需要将不同的曲线设置成为不同的颜色.此外,为了直观,还需要给这张图标增添标题和图例.这篇文章展示了在Matlab的绘图窗口(fi ...

  3. HFS汉化版|简易HTTP服务器

    专为个人用户所设计的 HTTP 档案系统 - Http File Server,如果您觉得架设 FTP Server 太麻烦,那么这个软件可以提供您更方便的档案传输系统,下载后无须安装,只要解压缩后执 ...

  4. inheritableStatics 与statics类

    /** * statics 可以包含类的静态和静态方法,但是不能被子类继承 * inheritableStatics 与statics类似但是可以被子类继承 */ Ext.onReady(functi ...

  5. Android判断当前系统时间是否在指定时间的范围内(免消息打扰)

    /** * 判断当前系统时间是否在指定时间的范围内 * * @param beginHour * 开始小时,例如22 * @param beginMin * 开始小时的分钟数,例如30 * @para ...

  6. C#反射设置属性值和获取属性值

    /// /// 获取类中的属性值 /// /// /// /// public string GetModelValue(string FieldName, object obj) { try { T ...

  7. 【POJ 1743】Musical Theme

    后缀数组求了height,模板题啦啦啦 #include<cstdio> #include<cstring> #include<algorithm> using n ...

  8. Asp.Net MVC<二> : IIS/asp.net管道

    MVC是Asp.net的设计思想,而IIS/asp.net是它的技术平台.理解ASP.NET的前提是对ASP.NET管道式设计的深刻认识.而ASP.NET Web应用大都是寄宿于IIS上的. IIS ...

  9. css 小三角

    span{ display: inline-block; border-top: 100px solid red; border-right: 100px solid transparent; bor ...

  10. Oracle-函数Decode进行多值判断

    decode函数比较表达式和搜索字,如果匹配,返回结果:如果不匹配,返回default值:如果未定义default值,则返回空值 Decode函数的语法结构如下: decode (expression ...