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端显示的页面与智能手机或平板电脑显示的页面不同时...
