听说bootstrap很火，页面做的非常好看，今天我决定开始学习bootstrap。

bootstrap是一种响应式前端技术，可以用于构建适应多种设备的网站页面，当页面尺寸变化时会根据变化的尺寸适应设备屏幕的大小。 注意
1.bootstrap必须是HTML5的网页
2.bootstrap中的动态效果都基于jquery库。

文件目录结构：

CSS文件目录下还有一个文件bootstrap-responsive.css也有对应的压缩版本；

第一个bootstrap案例代码：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Bootstrap, from Twitter</title>

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

<meta name="description" content="">

<meta name="author" content="">

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

<style>

body {

padding-top: 60px;  <

}

</style>

<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">

</head>

<body>

<div class="navbar navbar-inverse navbar-fixed-top">

<div class="navbar-inner">

<div class="container">

<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

<a class="brand" href="#">我的笔记</a>

<div class="nav-collapse collapse">

<ul class="nav">

<li class="active"><a href="#">首页</a></li>

<li><a href="#about">关于</a></li>

<li><a href="#contact">内容</a></li>

</ul>

</div>

</div>

</div>

</div>

<div class="container">

<h1>这是一个Bootstrap的测试页</h1>

<p>学习bootstrap第一天.<br>bootstrap是一种响应式前端技术，可以用于构建适应多种设备的网站页面，当页面尺寸变化时会根据变化的尺寸适应设备屏幕的大小。

注意<br>

1.bootstrap必须是HTML5的网页<br>

2.bootstrap中的动态效果都基于jquery库。</p>

</div>

<script src="bootstrap/js/jquery.js"></script>

<script src="bootstrap/js/bootstrap.js"></script>

</body>

</html>

正常的页面：

缩小后的页面：

Bootstrap学习第一天的更多相关文章

  1. BootStrap学习02栅格系统

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. bootstrap 学习总结

    Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目.当前最新版本是3.2.0; 使用的第一步,可以直接复制官方的模版,另存为index ...

  3. BootStrap学习（2）

    使用Bootstrap添加代码框 可先看:简介.引入.包下载等:http://www.cnblogs.com/0201zcr/p/4900062.html Bootstrap 允许您以两种方式显示代码 ...

  4. Bootstrap 学习（1）

    简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. Bootst ...

  5. 前端框架——BootStrap学习

    BootStrap简单总结下:1.栅格系统,能够很好的同时适应手机端和PC端(及传说中的响应式布局) 2.兼容性好 接下来是对BootStrap学习的一些基础案例总结和回顾: 首先引入:bootstr ...

  6. bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111

    基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...

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

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

  8. Bootstrap~学习笔记索引

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

  9. Magento学习第一课——目录结构介绍

    Magento学习第一课--目录结构介绍 一．Magento为何强大 Magento是在Zend框架基础上建立起来的,这点保证了代码的安全性及稳定性.选择Zend的原因有很多,但是最基本的是因为zen ...

随机推荐

  1. Android 使用AS编译出错：Error: Duplicate resources

    原因在于drawable目录下有重复的文件名!!! 修改其中的一个文件名或者删除其中一张图(或者xml文件)就可以啦~

  2. Android PopupWindow显示之后所在的Activity结束的时候出现短暂黑屏问题

    在当前Activity弹出PopuoWindow后,点击取消弹窗,然后结束当前Activity时会出现短暂黑屏现象.这是由于设置背景透明度时候造成的. //设置添加屏幕的背景透明度 public vo ...

  3. magento2 定时任务

    * * * * * /usr/bin/php /www/wwwroot/m2.demo.evebit.cn/bin/magento cron:run | grep -v "Ran jobs ...

  4. java多线程之消费生产模型

    需求:要求仓库最大容量为4,且一共只生产20台电视机,下面的代码只适用于一个生产者一个消费者,有没有大佬提点建议怎么改成一对多或多对多不会出现死锁情况 class Warehouse { privat ...

  5. 使用docker搭建redis集群

    创建网卡 docker network create redis --subnet 172.20.0.0/ --gateway 172.20.0.1 通过脚本创建6个redis配置 for i in ...

  6. Java树形结构中根据父类节点查找全部子类节点

    上一篇文章介绍了两种树形结构数据整合json格式的方法,第一种方法中有根据父类获取全部子类的方法,这里单独拿出来再说一下. 仍然是利用递归来整合,代码如下: //根据父节点获取全部子节点 public ...

  7. C/C++经典面试题1，const关键字用法总结

    本文主要说明了const关键字的作用,包括了用于对数组,指针与类相关的修饰方法,作为笔记总结使用.若有错误与不足,欢迎指正. const关键字 用于修饰一个常类型,常类型的变量或对象的值无法被改变,即 ...

  8. Spring实战第4版PDF下载含源码

    下载链接 扫描右侧公告中二维码,回复[spring实战]即可获取所有链接. 读者评价 看了一半后在做评论,物流速度挺快,正版行货,只是运输过程有点印记,但是想必大家和你关注内容,spring 4必之3 ...

  9. 《Head First 设计模式》：模板方法模式

    正文 一.定义 模板方法模式在一个方法中定义一个算法的骨架,而将一些步骤延迟到子类中.模板方法使得子类可以在不改变算法结构的情况下,重新定义算法中的某些步骤. 要点: 模板方法定义了一个算法的步骤,每 ...

  10. C# 压缩、解压文件夹或文件(带密码)

    今天梳理一下项目中用到的压缩.解压文件夹或文件的方法,发现因为需求不同,已经用了好几个不同组件.今天就好好整理记录下,别下次遇到需求又重头开始了. DotNetZip DotNetZip是一个开源的免 ...