bootstrap学习笔记【转】

bootstrap是由Twitter公司研发的一个基于HTML,CSS,JavaScript的开源框架，最重要的部分是它的响应式布局。（国内文档翻译官网：http://www.bootcss.com/可供下载中文文档及相关工具）

1.bootstrap6大特点：

1.跨设备，浏览器可以兼容所有现代浏览器

2.响应式布局，支持PC端的的各种分辨率，同时也兼容pad，手机等终端设备。

3.提供全面的组件，向导航，菜单标签，工具条按钮等一系列组件，方便开发者调用

4.内置jQuery插件方便实现各种常规特效

5.支持HTML5语义化标签和CSS3属性

6.支持LESS动态样式：LESS使用变量，嵌套，操作混合编码，编写更快，更灵活的CSS。

解压后dist文件夹下

三大目录结构：Css JS Fonts

3.第一次使用bootstrap，建一个index.html的文件放置在dist下

转载自：http://www.cnblogs.com/daniel-lij/p/6131116.html

时间： 2024-10-11 09:22:11

bootstrap学习笔记【转】的相关文章

HTML5+Bootstrap 学习笔记 4

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

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

bootstrap学习笔记一： bootstrap初认识，hello bootstrap（下）

这一篇主要是补上源码,开始之前请先回顾:bootstrap学习笔记一: bootstrap初认识,hello bootstrap(上) 首先,我们的页面要求, lang,charset等就不用说了,老html属性, viewport是h5的属性,目的是 width=device-width 铺满设备宽度, initial-scale=1正常比较 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta c

BootStrap 学习笔记一

BootStrap学习笔记一: 学习工具:BootStrap中文文档:http://v3.bootcss.com/css/#type-lists 1.HTML5文档类型 <!DOCTYPE html> <html lang="zh-CN"> ... </html> 2.为了确保适当的绘制和触屏缩放,需要在 <head> 之中添加 viewport 元数据标签. <meta name="viewport" cont

BootStrap 学习笔记二

BootStrap学习笔记一: 学习工具:BootStrap中文文档:http://v3.bootcss.com/css/#type-lists <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 为了让 IE 浏

BootStrap 学习笔记三

BootStrap学习笔记一: 学习工具:BootStrap中文文档:http://v3.bootcss.com/css/#type-lists 表格 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 为了让 I

bootstrap学习笔记一登录水平表单

先上效果图: 样式定义: <form class="form-horizontal"> <div class="control-group"> <label class="control-label" for="UserName">用户名</label> <div class="controls"> <input type="tex

bootstrap 学习笔记（1）---介绍bootstrap和栅格系统

学习前端许久,对于布置框架和响应浏览器用html 和javascript 写的有点繁琐,无意间看到这个框架,觉得挺好用的就开始学习了,但是这个框架上面有很多知识,不是所有的都要学的,故将学习笔记和觉得重点的东西写下来,以便以后学习. Bootstrap 是一个相应式的布局的一个前端框架.bootstrap 学习有以下步骤: 1.bootstrap 安装, 2.bootstrap 全局css 样式 3.bootstrap css组件 4.bootstrap javascr

Bootstrap 学习笔记之表单（4 day）

Bootstrap学习到这里,理解了为什么它是一个框架,所谓的框架,目前看来就是它本身提供了一套完整的HTML结构和样式. 我们在使用的时候,只要按照这套规则来搭建HTML结构和加上相应的样式名后就可以了. 今天学习的是表单, Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单水平表单需要一提的就是表单的状态: 表单控件状态除了 :focus 状态(即,用户点击 input 或使用 tab 键聚焦到 input 上),Bootstrap 还为禁用的输入框定义了样式,

Bootstrap学习笔记01

1.Make Images Mobile Responsive 用处: 使图片适配你的页面宽度. 操作: 给图片添加 .img-responsive class属性. <img src="/images/cat.jpg" class="img-responsive"> 2.Center Text with Bootstrap 用处: 使文本居中. 操作: 给文本添加 center-text class属性. <p class=&qu