Bootstrap学习第一天
听说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学习第一天的更多相关文章
- BootStrap学习02栅格系统
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- bootstrap 学习总结
Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目.当前最新版本是3.2.0; 使用的第一步,可以直接复制官方的模版,另存为index ...
- BootStrap学习（2）
使用Bootstrap添加代码框 可先看:简介.引入.包下载等:http://www.cnblogs.com/0201zcr/p/4900062.html Bootstrap 允许您以两种方式显示代码 ...
- Bootstrap 学习（1）
简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. Bootst ...
- 前端框架——BootStrap学习
BootStrap简单总结下:1.栅格系统,能够很好的同时适应手机端和PC端(及传说中的响应式布局) 2.兼容性好 接下来是对BootStrap学习的一些基础案例总结和回顾: 首先引入:bootstr ...
- bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111
基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...
- python 全栈开发，Day57(响应式页面-@media介绍,jQuery补充,移动端单位介绍,Bootstrap学习)
昨日内容回顾 ajax //get post 两种方式 做 请求 get 主要是获取数据 post 提交数据 同一个路由地址 既可以是get请求也可以是post请求 一个路由对应一个函数 get请求 ...
- Bootstrap~学习笔记索引
回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...
- Magento学习第一课——目录结构介绍
Magento学习第一课--目录结构介绍 一．Magento为何强大 Magento是在Zend框架基础上建立起来的,这点保证了代码的安全性及稳定性.选择Zend的原因有很多,但是最基本的是因为zen ...
随机推荐
- [netty4][netty-buffer]netty之池化buffer
PooledByteBufAllocator buffer分配 buffer分配的入口: io.netty.buffer.PooledByteBufAllocator.newDirectBuffer( ...
- 计算机网络要点---TCP
计算机网络要点---TCP 浏览器在通过域名通过dns服务器找到你的服务器外网ip,将http请求发送到你的服务器,在tcp3次握手之后(http下面是tcp/ip),通过tcp协议开始传输数据,你的 ...
- 《Java从入门到失业》第二章：Java环境（一）：Java SE安装
从这一章开始,终于我们可以开始正式进入Java世界了.前面我们提到过,Java分三个版本,我们这里只讨论Java SE. 2.1Java SE安装 所谓工欲善其事,必先利其器.第一步,我们当然是要下载 ...
- 一线大厂工程师推荐：Mysql、Springboot、JVM、Spring等面试合集
前两天晚上,正当我加班沉浸在敲代码的快乐中时,听到前桌的同事在嘀咕:Spring究竟是如何解决的循环依赖? 这让我想起最开始学Java的时候,掌握了一点基本语法和面向对象的一点皮毛.当时心里也是各种想 ...
- Ubuntu18.04 安装 Fabric & 使用 Fabric 测试网络
前言: 本文介绍在 Ubuntu 18.04 中安装 Fabric, 并对 官方文档中的一个小案例(Using the Fabric test network)进行测试. 目的: 初步了解 Fabri ...
- 0x01 基本算法-位运算 a^b
#include<bits/stdc++.h>using namespace std;int power(int a, int b, int p){ int ans = 1%p; ...
- PAT 2-08. 用扑克牌计算24点（25）:
题目链接:http://www.patest.cn/contests/ds/2-08 解题思路:思路参考24点游戏技巧http://www.24game.com.cn/articles/points2 ...
- python基础 Day8
python Day8 文件操作的识 利用python代码写一个脚本操作文件的过程 文件的路径:path 打开方式:读,写,追加,读写,写读 编码方式:utf-8,gbk,gb2312 简单文件读取( ...
- 1 Spark概述
第1章 Spark概述 1.1 什么是Spark Spark是一种快速.通用.可扩展的大数据分析引擎,2009年诞生于加州大学伯克利分校AMPLab,2010年开源,2013年6月成为Apache孵 ...
- 个人项目 源程序特征统计程序（C++）
零.GitHub地址 https://github.com/King-Authur/Word-count 一.项目的相关要求 wc.exe 是一个常见的工具,它能统计文本文件的字符数.单词数和行数.这 ...