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. Tensorflow学习笔记4：分布式Tensorflow

    简介 Tensorflow API提供了Cluster.Server以及Supervisor来支持模型的分布式训练. 关于Tensorflow的分布式训练介绍可以参考Distributed Tenso ...

  2. 怎样关闭google的自动更新

    谷歌的自动更新很烦人的,只要你点击关于Google Chrome,谷歌就会自动更新成最新版本. 但是sencha框架好像与谷歌29.0以上的兼容性不是很好,所以关闭谷歌自动更新的需求来了,网上很多人说 ...

  3. ASP.NET mvc异常处理的方法

    第一种:全局异常处理 1.首先常见保存异常的类(就是将异常信息写入到文件中去) public class LogManager { private string logFilePath = strin ...

  4. keypress，keydown，keyup，charCode，keyCode兼容性问题

    keypress对应的是字符编码,如“ABC”,“123”之类,有大小写之分(有兼容性问题) keydown,keyup对应的是键盘的键码,无大小写之分,每个键盘都有一个键码(无兼容性问题) 使用ke ...

  5. 网页设计：Meta标签详解

    很多人忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性,有兴趣吗,谁我来重新认识一下META标签吧! META标签是HTML语言HEAD区的一个辅 ...

  6. C#中快速释放内存，任务管理器可查证

    先close() 再dispose() 之后=null 最后GC.Collect() 如: ms.Close();//关闭流,并释放与之相关的资源 ms.Dispose();//如果是流的话,默认只会 ...

  7. Linux 性能优化之 IO 子系统

    本文介绍了对 Linux IO 子系统性能进行优化时需要考虑的因素,以及一些 IO 性能检测工具. 本文的大部分内容来自 IBM Redbook - Linux Performance and Tun ...

  8. 【BZOJ 2157】旅游

    再水一道模板题,明天就要出发去参加二轮省选了赶紧复习复习模板. 链剖模板题,可是写链剖太麻烦了,还是写lct吧. 但这个lct比较麻烦了,因为边权有正有负,要统计最大值和最小值,这样点权赋为什么值都会 ...

  9. 【BZOJ 1096】【ZJOI 2007】仓库建设 DP+斜率优化

    后缀自动机看不懂啊QAQ 放弃了还是看点更有用的东西吧,比如斜率优化DP 先水一道 #include<cstdio> #include<cstring> #include< ...

  10. Maven-eclipse运行maven命令

    右击项目,点击Run as,如下图: 即可看到有很多现有的maven命令,点击即可运行,并在控制台可以看到运行信息 如果你想运行的maven命令在这里没有找到,点击Maven build创建新的命令, ...