Bootstrap入门学习
课程大纲
HTML+css简介
Bootstrap结构
Bootstrap的简单使用
<!doctype html> <!-- 头部声明 文档为 html文件 -->
<html lang=“en”> <!– html文件开始标签 lang语言 -->
<head> <!-- head 标识页面头部信息 -->
<meta charset="UTF-8">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<link href='/images/' rel='icon' type='image/x-icon'/>
<script type="text/javascript" src="/js/"></script>
</head>
<body> <!-- 页面主体 显示部分 -->
<div class="" id="">
<div></div>
</div>
</body> <!– 主体部分结束 -->
</html> <!– html闭合标签 -->
HTML 基本构成元素
头部声明两种方式
Head部分的常用声明文件及css js 文件的引入
Body主体部分的内容
Html常用标签及不同声明中的写法
Div +css排版
Class与id的区别
目的:了解html标签 明白网页前端文件的构成及运行的过程
Bootstrap
Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的,用于快速开发 Web 应用程序和网站的前端框架。
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的前端框架。
DIV+CSS
移动设备优先:自 Bootstrap 3 起,框架包含了贯穿于整个库的移动设备优先的样式。
浏览器支持:所有的主流浏览器都支持 Bootstrap。
响应式设计:Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
容易上手:只要您具备 HTML 和 CSS 的基础知识,您就可以开始学习 Bootstrap。
Bootstrap结构
基本结构:Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。
CSS:Bootstrap 自带以下特性:全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class,以及一个先进的网格系统。
组件:Bootstrap 包含了十几个可重用的组件,用于创建图像、下拉菜单、导航、警告框、弹出框等等。
JavaScript 插件:Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件,也可以逐个包含这些插件。
定制:您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。
Bootstrap 结构
bootstrap/
├── css/
│ ├──
│ ├──
│ ├── bootstrap-
│ └── bootstrap-
├── js/
│ ├──
│ └──
└── fonts/
├── glyphicons-halflings-
├── glyphicons-halflings-
├── glyphicons-halflings-
└── glyphicons-halflings-
预编译版
Bootstrap 源码
bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│ ├── css/
│ ├── js/
│ └── fonts/
└── docs/
└── examples/
Bootstrap使用
1. 下载bootstrap: http://g
bootstrap入门学习 来自淘豆网m.daumloan.com转载请标明出处.