Bootstrap
文章
1 getting-started
什么是BOOTSTRAP1)BOOTSTRAP概述Bootstrap 是 Twitter 公司开发的一个基于 HTML、CSS、JavaScript 的技术框架,符合 HTML、CSS 规范,且代码简介、视觉优美。 Bootstrap 集合 HTML、CSS 和 JavaScript,使用了最新的浏览器技术,为实现快速开发提供了一套前端工具包。使用 Bootstrap 不仅可以构建出非常优雅的 HTML 页面,而且占用资源非常少,使用 gzip 压缩后大小仅用 10KB。并且 Bootstrap 在跨浏览器兼容方面表示也很好。 2)选择BOOTSTRAP的理由 Bootstrap 的 HTML 是基于 HTML5 的最新技术。 Bootstrap 可以快速实现响应式页面。 Bootstrap 集成了非常友好的 CSS 样式表,对于非设计人员也可以制作出很漂亮的网页。 3)BOOTSTRAP提供的功能根据 Bootstrap 官网提供的文档,可以知道 Bootstrap 分为以下几个模块: 全局 CSS 样式:提供了格栅系统、表格、表单、按钮等集成样式。 组件:提供了下拉菜单、...
2 bootstrap_css_01
1 概述1)HTML 5 文档类型Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。 1234<!DOCTYPE html><html lang="zh-CN"> ...</html> 2)移动设备优先Bootstrap 是移动设备优先的。为了确保适当的绘制和触屏缩放,需要在 <head> 之中添加 viewport 元元素。 1<meta name="viewport" content="width=device-width, initial-scale=1"> 在移动设备浏览器上,通过为 viewport设置 meta 属性为 user-scalable=no 可以禁用其缩放功能。这样禁用缩放功能后,用户只能滚动屏幕,就能让你的网站看上去更像原生应用的感觉。 1<meta name="viewport" content="width=device-wid...
3 bootstrap_css_02
1 文本1)文本对齐通过以下文本对齐类,可以简单方便的将文字重新对齐。 类名 描述 text-left 左对齐 text-center 居中对齐 text-right 右对齐 text-justify 两端对齐,段落中超出屏幕部分文字自动换行 text-nowrap 段落中超出屏幕部分不换行 123456789<div class="container"> <div class="row"> <p class="text-left">Left aligned text.</p> <p class="text-center">Center aligned text.</p> <p class="text-right">Right aligned text.</p> <p class=&quo...
4 bootstrap_css_03
1 表单1)基本表单Bootstrap 为单独的表单元素预定义了全局样式,表单内元素的具体使用如下: 设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。 123456789101112131415<div class="container"> <div class="row"> <form> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="ema...
5 bootstrap_components
字体图标Bootstrap 使用的字体图标是来自 Glyphicions Halflings 提供的。在使用的时候,需要遵守以下几点规则: 图标使用的 class 不能与其他组件的 class 混合使用。换言之,图标的 class 必须被定义在 span 元素上。 图标使用的 class 具有一个基类和一个修饰类。基类(class)统一为 .glyphicon,修饰类(class)为 .glyphicon-*-*或.glyphicon-*。 只对内容为空的元素起作用(图标使用的 class 只能应用在不包含任何文本内容或子元素的元素上)。 1234567891011121314151617181920<div class="container"> <p class="text-danger"> <span class="glyphicon glyphicon-warning-sign"></span> <span class=&q...
6 javascript
概览Bootstrap 提供相应插件在 HTML 页面中实现动态交互效果。 1)前提条件由于 Bootstrap 提供的插件都是依赖于 jQuery 的,所以必须要先引入 jQuery 文件。 Bootstrap 的每个插件都对应具有一个 JavaScript 文件,允许单独引入到 HTML 页面。也提供了一个完整版本(Bootstrap.js 或 Bootstrap.min.js 文件),允许一次性将所有插件全部引入到 HTML 页面中。 12<script src="bootstrap/js/jquery-1.11.3.js"></script><script src="bootstrap/js/bootstrap.min.js"></script> 2)两种使用方式a. data 属性通过 data 属性 API 就能使用所有的 Bootstrap 插件,无需写一行 JavaScript 代码。 12345678910<div class="container"...
7 less
Less 概述1)动态样式语言CSS 是一门非程序式语言,没有变量、函数、作用域等概念。CSS 被称之为 静态样式语言,从而导致样式文件的修改和维护困难。 动态样式语言 是指,在静态样式语言的基础上,添加了一门真正的语言所必需的元素:变量、数据类型、运算、逻辑结构、函数、继承等,从而大大提高样式的可修改和可维护性。 2)什么是 LessLess 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。 Less 官网:http://www.lesscss.net/ 3)如何使用 Lessa. 在客户端使用 在 HTML 页面的 <head> 元素内引入 .less 样式文件(**rel**属性值为stylesheet/less)。 123456789101112131415@base: #f938ab;.box-shadow(@style, @c) when (iscolor(@c)) { box-shadow: @style @c; -webkit-box-shadow: @...
8 writing-responsive-web-design
响应式页面概述1. 什么是响应式页面响应式网页(RWD,Responsive Web Design),2010年5月由Ethan Marcotte提出。简而言之,就是一个网站能够针对多个终端提供不同的显示样式,而不是针对每个终端制作一个特定的版本。 由于智能手机和平板电脑的兴起,网站页面的制作不仅要满足PC端浏览器的显示,还要满足智能手机浏览器的显示或者平板电脑浏览器的显示。(PC端、智能手机或平板电脑的浏览器之间的区别,主要集中在分辨率的不同。) 2. 为什么需要响应式页面想要同时满足PC端、智能手机和平板电脑浏览器的正常显示,实际上有以下两种实现方式: a. 分别针对PC端、智能手机和平板电脑的浏览器制作特定的页面。例如 https://www.tmall.com/ 优点:用户体验好,适合复杂页面。 缺点:工作量大,不够灵活。 b. 制作一个页面同时满足PC端、智能手机和平板电脑的浏览器显示。例如 http://www.intel.cn/ 优点:比较灵活,一个页面适应不同终端。 缺点:页面加载时间长,效率降低。 如果PC端显示的页面与智能手机或平板电脑显示的页面不同时...












