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>

正常的页面:

缩小后的页面:

时间: 2024-10-13 10:45:28

Bootstrap学习第一天的相关文章

ExtJS学习第一天 MessageBox

此文用来记录学习笔记: •学习任何技术,首先都要从Helloworld开始,那么我们首要任务就是写一个简单的HelloWorld程序,带领同学们走进ExtJS的世界. •Ext.onReady:这个方法是Ext的准备函数,也就是Ext相关的代码都会在这个函数里书写,它比较类似于window的onload方法,但是注意其执行时机是在页面的DOM对象加载完毕之后立即执行. •Ext.window.MessageBox:这个类提供了ExtJS的弹出提示框.确认框等简单的小组件.我们首先根据它写出我们的

Bootstrap学习 按钮组

把一系列的.btn按钮放入.btn-group中即可... <div class="btn-group"> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button>

bootstrap 学习总结

Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目.当前最新版本是3.2.0; 使用的第一步,可以直接复制官方的模版,另存为index.html. 这一过程相当于是搭好一个框架,像我们使用yii需要引入它的框架文件一样. 模板是这个样子的: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8&q

(转)bootstrap 学习总结

bootstrap 学习总结 - bjtqti 时间 2014-09-14 10:55:00  博客园-所有随笔区 原文  http://www.cnblogs.com/afrog/p/3970770.html 主题 Bootstrap Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目.当前最新版本是3.2.0; 使用的第一步,可以直接复制官方的模版,另存为index.html. 这一过程相当于是搭好一个框架,像我们使用yii需

Bootstrap学习总结

目录 Bootstrap学习总结 Bootstrap介绍 什么是bootstrap? 为什么要用bootstrap? 如何使用bootstrap 视口 栅格系统 Bootstrap学习总结 @(目录) Bootstrap介绍 什么是bootstrap? Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目. 特点就是灵活简洁,代码优雅,美观大方: 其目的是为了让Web开发更敏捷: 是Twitter公司的两名前端工程师Mark Ott

HTML5+Bootstrap 学习笔记 4

HTML5 <map> <area> 标签 <map> 标签定义客户端的图像映射.图像映射是带有可点击区域的图像. <area> 标签定义图像映射内部的区域(图像映射指的是带有可点击区域的图像). area 元素始终嵌套在 <map> 标签内部. 1 <img src ="planets.gif" alt="Planets" usemap ="#planetmap" /> 2

Bootstrap学习笔记(二) 表单

在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等. 在Bootstrap框架中,通过定制了一个类名`form-control`,也就是说,如果这几个元素使用了类名"form-control",将会实现一些设计上的定制效果. 1.宽度变成了100% 2.设置了一个浅灰色(#ccc)的边框 3.具有4px的圆角 4.设置阴影效果

PS学习第一天

ps 学习第一天 ps 学习第一天 ps软件的使用 1.PS面板的介绍 新建文档 工具 选框工具 拾色器:前景色和背景色的颜色的调整 移动工具 图层面板 文件保存和打开 自由变换 羽化 常用快捷键 ps软件的使用 1.PS面板的介绍 1.1软件界面 PS面板.png 说明 窗口-工作区-复位基本功能:让软件界面恢复到默认的标准状态; 所有的控制面板都在窗口菜单中,可以对其进行隐藏和显示,只需要去掉前面的小勾 工具箱中个小工具对应属性栏的属性,每一个小工具有不同的属性操作 控制面板是将来对工作区的

FluentData 学习 第一弹

地址: http://fluentdata.codeplex.com/ 前世: FluentData 我们公司用的一个增删改查的里面的持久层.之前还不知道 这个持久层叫FluentData.  某天看见群里 说 某视频网站里面 居然在讲这个开发框架,还收费.我搜了一下.fluentdata有源代码. 这个13年有过记载.不过我是新手.什么也需要 学习一下.  和 室友说了一下微型orm ,他们 呢  用的  微型orm是 Dapper .可以去了解一下. 废话真多,完毕. FluentData