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