Bootstrap详解() 基本样式,课程介绍,一、bootstrap是什么？,Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使 Web 开发更加快捷。 它对HTML、CSS和JAVASCRIPT进行了封装，使它们使用起来更方便。我们只需要使用它已经设定好的类，或规则，即可快速应用它提供的功能。 Bootstrap 使用了一些 HTML5 元素和 CSS3 属性(如媒体查询)。为了让这些正常工作，需要使用 HTML5 文档类型。如果在 Bootstrap 创建的网页开头不使用 HTML5 的文档类型（Doctype），可能会面临一些浏览器显示不一致的问题。 *框架是代码的可重用设计，体现为一些组件，或抽像的方法。,Bootstrap分为“全局CSS样式”、“组件”、“javascript插件”这么几个主要的部分。 设置全局 CSS 样式 基本的 HTML 元素均可以通过 class 设置样式并得到增强效果；还有先进的栅格系统。 组件 无数可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。 javascript插件 jQuery 插件为 Bootstrap 的组件赋予了“生命”。可以简单地一次性引入所有插件，或者逐个引入到你的页面中。,*使用了bootstrap设置了预定义样式的button,其它框架http:/www.codeceo.com/article/2015-web-framework.html,响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。更多有关响应式设计的内容详见 Bootstrap 响应式设计。,怎么使用bootstrap? 1.下载 http:/www.bootcss.com/ 点击bootstrap3中文文档，点击下载bootstrap3 2.下载“用于生产环境的” 下载完后它有如右三个文件夹 3.在html文档中引入bootstrap a) bootstrap.min.css b) bootstrap.min.js c) jquery 引入css中的“bootstrap.min.css”和js文件夹下的bootstrap.min.js。由于bootstrap是基于jquery的，所以在引入”bootstrap.min.js”前，要先引入jquery。并且js和jquery要放在body的最底部。,4. 使用html5的文档类型声明 ，bootstrap用到了h5，所以它包含一个html5版本的DOCTYPE 5. 添加适用于移动端的meta标签 因为现在越来越多的用户使用移动设备,为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签 width 属性控制设备的宽度。假设你的网站被带有不同屏幕分辨率的设备浏览，那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。 initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。,或者在bootstrap中文网找到“基本模板”，拷贝下来使用。,BS栅格系统 Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。 以上这段话1.bootstrap3是移动设置优先 2.bootstrap的栅格系统最多12列 3.bootstrap中包含了许多预定义类。在通常我们写的页面里，浏览器缩小到一定程度，页面会错位、变形，这在bootstrap中不会，因为它是自适应的。 下图是栅格系统，它最多可分为12列，你可以按自己喜欢的比例来划分页面，只要它们加起来不超过12。, 这是左边 这是左边 你好，世界！ 你好，世界！ ,Bootstrap 网格系统（Grid System）的工作原理,应该怎么使用bootstrap呢？ 1. 行必须放置在 .container class 内，以便获得bootstrap设置的对齐（alignment）和内边距（padding） 2. 使用.row来创建一行，每行又分为多个列。 3. 内容应该放置在列内，且唯有列可以是行的直接子元素。rowcol 正确写法 行列 4. 预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。 5. 列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负值得到，就是说，列和列之间有间隙，你想改变间隙，用负的margin来写。 6. 网格系统是通过指定你想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。,栅格选项,bootstrap栅格把设备分为了四种：超小设备（手机）、小型设备（平板）、中型设备（笔记本电脑）、大型设备（大尺寸显示器），这四种设备它们各自的列数量和都不可以超过12，它们的列有不同的class前缀做标识，超小设备用.col-xs ，小型设备用.col-sm，中型设备用.col-md-，大型设备用.col-lg-。不论哪种设备，它们的间隙都是30px(指列的padding-left:15px和padding-right:15px;),下面是 Bootstrap 网格的基本结构, /容器 /栅格中的行 /行下的直接元素列 . ,使用栅格布局的步骤 1.引入bootstrap所需要的库 就好比引入一个外部样式表，只不过这个是bootstrap的样式表，它包含css和js两部分 2.添加bootstrap容器 在body中写一个div，并为这个div添加一个container类，这个类是非常有用的，它能在页面中创建一个居中的区域，然后我们把其它的元素放在里面。它等于是创建了一个具有静态宽度，并且margin值为auto的一个居中的div框，container的优点在于它是响应式的，它会以当前屏幕的宽度为基础计算出最佳的宽度予以使用。 3. 在container中添加row 我们用row来横向布局 4. 在row中添加列 就好比表格中添加了tr，之后在tr中添加td一样。 row中的列，就是我们之前的.col-xs-*这种类型的，如我添加了两个子div，想让它们各占一半，那么这两个子div，就都要.col-xs-6，加起来正好12列,实例 Bootstrap 实例 /引入bootstrap的css /bootstrap的js基于jquery，所以先引入jquery /引入bootstrap的js /居中的容器 Hello, world! /容器中的行 /行中的列 这是我的第一个Bootstrap页面 这里是col-md-6，占了12列的6份 /两列加起来正好12 这里是另外6份 col-md-6 md代表了中等设备 ,二、Bootstrap排版 使用 Bootstrap 的排版特性，您可以创建标题、段落、列表及其他内联元素，实际上它是把大部分在HTML的基本标签加了样式。所以这部分相对比较简单。 【标题】 Bootstrap 中定义了所有的 HTML 标题（h1 到 h6）的样式 我是标题1 h1 我是标题2 h2 我是标题3 h3 我是标题4 h4 我是标题5 h5 我是标题6 h6 单从样式上看，看不出什么不同，但是我们打开firebug，可以看到，它是加了样式的， 但我们什么都没有写，只是引入了bootstrap。这说明了bootstrap把页面中的一些元素 设置了初始样式。,【内联子标题】 如果需要向任何标题添加一个内联子标题，只需要在标题标签中添加 ，用small标签包裹复标题的内容，或者添加 .small 类，这样子您就能得到一个字号更小的颜色更浅的文本。 使用bootstrap时需要按照它的规则来创建相关元素，而不要自己去写一样式，不然bootstrap的使用就没有了意义，所以需要记住一些bootstrap的规则。 1. 标题中添加标签 = 内联子标题的样式（浅灰色文字，在body下单写small无用） 2. 为元素添加small类 = 内联子标题的样式 实例 这是标题这是h1中的副标题 这是标题这是用small类来写的副标题,【引导主体副本】 为了给段落添加强调文本，则可以添加 “lead“，这将得到更大更粗、行高更高的文本，它的作用相当于是文章摘要。,实例 引导主体副本 闭包，是 javascript 中重要的一个概念，对于初学者来讲，闭包是一个特别抽象的概念，特别是ECMA规范给的定义，如果没有实战经验，你很难从定义去理解它。因此，本文不会对闭包的概念进行大篇幅描述，直接上干货，让你分分钟学会闭包！ 在接触一个新技术的时候，我首先会做的一件事就是：找它的demo code。对于码农们来说，代码有时候比自然语言更能理解一个事物。 其实，闭包无处不在，比如：jQuery、zepto的主要代码都包含在一个大的闭包中，所以下面我先写一个最简单最原始的闭包demo，好让你在大脑里产生闭包的画面,【强调标签】 bootstrap直接使用了HTML中用于标注强调的标签，并给他们另外赋予了少许的样式。这几个用于强调的标签是:samll 、strong 、 em 对于不需要强调的inline或block类型的文本，使用small标签。 对于不需要强调的文本用small /字号缩小到85%; bootstrap中，为strong标签加了 font-weight: bold; 样式来加粗文本。实际上本身strong标签默认的也是font-weight:bold 这是一段加粗的文本 用斜体字强调一段文本 rendered as italicized text *以上是bootstrap中关于“强调”的三种标签用法。small 、 strong 、em，这里是用于强调的标签，还有用于强调的类,【对齐类】 简单方便将文字对齐的类，它们一般应用在p标签上（用在div上不符合规范，用在span标签则不能生效）。 .text-left 文字左对齐 .text-center 文字居中对齐 .text-right 文字右对齐,*不符合规范的事情尽量少做，因为编程是一件严谨、规范的工作，不是随心所欲来写的。就好比你开车，可以逆行吗？如果交警不拦你你想怎么开都可以，但一般大家都会遵守交通规则。而w3c规范，就是我们程序员写程序的规则，所以要遵守。,【强调类】 这些强调类，通过颜色来表示强调。之前我们学习过强调标签 small 、strong 、em。现在学类，P元素加了这些类，会显示不同的颜色。 text-muted /muted减弱的 这些文字以#777来显示 text-warning 这是警告色，橙灰色 text-danger /危险的 这是错误提示 text-info 这只是信息 text-success 这是正确的强调信息,【缩略语】 在html4中有一个元素abbr用来指示简写或缩写，它使用title属性放完整的内容，当鼠标悬停在缩写词上时就会显示title的内容 简写 现在Bootstrap实现了对HTML 元素的增强样式。缩略语元素带有title属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针。 bootstrap把abbr的样式改变了，现在更美观。 写法没变： 这是缩写 为abbr添加 .initialism类，会显示为更小一号的字体（虽然initialism 也可以添加在其它元素上，但我们从”initialism“这个词的翻译为“缩略词”可以看出，它是专属于缩略语的类）,【地址】 bootstrap中