bootstrap学习总结-01 环境准备

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 环境准备的更多相关文章

OpenGL 学习笔记 01 环境配置
以下教程仅适用于Mac下的Xcode编程环境!其他的我也不会搞. 推荐教程:opengl-tutorial 本项目Github网址 OpenGL太可怕了...必需得把学的记下来,不然绝壁 ...
Bootstrap学习笔记01
1.Make Images Mobile Responsive 用处: 使图片适配你的页面宽度. 操作: 给图片添加 .img-responsive class属性. <img src= ...
SoapUI 学习总结-01 环境配置
遇到的问题 1,怎么SoapUI的Request URL不支持大写怎么办? 问题:在SoapUI的Request URL中,每次输入的URL中含有的大写字母会自动转换为小写字母,导致请求不了对应的地址 ...
python 全栈开发，Day57(响应式页面-@media介绍,jQuery补充,移动端单位介绍,Bootstrap学习)
昨日内容回顾 ajax //get post 两种方式做请求 get 主要是获取数据 post 提交数据同一个路由地址既可以是get请求也可以是post请求一个路由对应一个函数 get请求 ...
一起学习CMake – 01
一起学习CMake – 01 本节介绍CMake里最常用的三个命令,分别是cmake_minimum_required; project; add_executable等. CMake是个好东西,在使 ...
C++ GUI Qt4学习笔记01
C++ GUI Qt4学习笔记01 qtc++signalmakefile文档平台这一章介绍了如何把基本的C++只是与Qt所提供的功能组合起来创建一些简单的图形用户界面应用程序. 引入两个重要概 ...
openresty 学习笔记一:环境安装
openresty 学习笔记一:环境安装 openresty 是一个基于 Nginx 与 Lua 的高性能 Web 平台,其内部集成了大量精良的 Lua 库.第三方模块以及大多数的依赖项.用于方便地搭 ...
Bootstrap~学习笔记索引
回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...
软件测试之loadrunner学习笔记-01事务
loadrunner学习笔记-01事务<转载至网络> 事务又称为Transaction,事务是一个点为了衡量某个action的性能,需要在开始和结束位置插入一个范围,定义这样一个事务. 作 ...

随机推荐

Python __init__.py 作用详解
__init__.py 文件的作用是将文件夹变为一个Python模块,Python 中的每个模块的包中,都有__init__.py 文件. 通常__init__.py 文件为空,但是我们还可以为它增加 ...
.net程序员转行做手游开发经历（四）
今天是大年初二,在这里先给大家拜个年,祝大家在新的一年里能事事顺心. 年前的时候更新了一版,先发了内测,没有想到过年这几天,有的小伙伴们还在玩,还给我们提了很多建议和意见,让我们觉得非常温暖,给我们很 ...
.Net简单图片系统-简介
系统简介最近做了一个简单图片系统,这个系统就是将上传的的图片保存到系统本地文件系统或者基于fastdfs的分布式文件系统中,在查看图片时会直接请求此系统或者fastdfs的tracker服务器(需 ...
Xamarin Android -创建Splash Screen (一)
......(空话少说) Xamarin 开发的技术资料很少,通过学习,把自己的学习过程及其中碰到的问题与大家分享. Splash Screen 就是在应用程序启动时,出现的一张图片,一般App的Sp ...
ElasticSearch入门系列（五）数据
序言:无论程序如何写,最终都是为了组织数据为我们服务.在实际应用中,并不是所有相同类型的实体的看起来都是一样的.传统上我们使用行和列将数据存储在关系型数据库中相当于使用电子表格,这种固定的存储方式导致 ...
37-wc 简明笔记
显示行数.单词数和字节数 wc [options] [file-list] 参数 file-list是wc分析的一个或多个文件的路径名列表.如果省略file-list,wc就从标准输入中读取输入选项 ...
检查URL地址脚本
方法一: [root@Centos-6 script]# vi check_url_01.sh #!/bin/sh #this script is created by nulige #check u ...
Ajax 是什么？Ajax 的交互模型？同步和异步的区别？如何解决跨域问题？以及 HTTP状态码
一.Ajax 是什么: 1. 通过异步模式,提升了用户体验 2. 优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用 3. Ajax 在客户端运行,承担了一部分本来由服务器承担的工作 ...
Ubuntu14.04下安装Hadoop2.4.0 （单机模式）
一.在Ubuntu下创建hadoop组和hadoop用户增加hadoop用户组,同时在该组里增加hadoop用户,后续在涉及到hadoop操作时,我们使用该用户. 1.创建hadoop用户组 2.创 ...
zabbix 用 LLD 完全自动化监控 Oracle
文章转载自:http://mp.weixin.qq.com/s?__biz=MzA3MzYwNjQ3NA==&mid=2651296856&idx=1&sn=2bdf78071 ...