本帖最后由 小江哥 于 2018-1-12 17:10 编辑
一、bootstrap简介什么是Bootstrap？Ø Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 两位设计师开发的。 Ø Bootstrap 是 2011 年8月在 GitHub 上发布的开源产品(开放源代码)。 Ø Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。 Ø Bootstrap支持响应式布局！响应式布局指的是一个网站能够兼容多种终端设备访问！ 终端设备： 电脑、平板电脑、手机 部署bootstrap1）去bootstrap的官方网站 下载bootstrap框架
解压压缩包文件：
2）讲解bootstrap中的三个文件夹
3）将bootstrap里面的文件引入到我们的项目中 bootstrap要求使用HTML5的文档 支持移动设备优先：
将CSS文件引入到 我们的项目中 <link rel=”stylesheet” href=”CSS 文件”/>
引入jQuery文件
二、全局的CSS样式设置全局 CSS 样式；基本的 HTML 元素均可以通过 class 设置样式并得到增强效果；还有先进的栅格系统。 CSS样式：bootstrap给用户写了很多的CSS样式 我们可以通过类名来使用 格式： <标签名 class=”类名”></标签名> 布局容器bootstrap它认为每一个网页应该都会拥有固定的宽度它会在容器里面水平居中或者说是占满容器的100%的宽度！ 1）固定的宽度 .container 类用于固定宽度并支持响应式布局的容器。
2）百分百宽度 .container-fluid 类用于 100% 宽度，占据的容器的100%。
排版样式l <h1>~<h6>或者.h1~.h6 l <strong></strong>或者<b></b> 加粗 l <em></em>或者<i></i> 斜体 l <del></del>或者<s></s> 删除线 l <ins></ins>或者<u></u> 下划线 l .text-left 用于实现文本的水平居左对齐 基本不会使用 因为文字默认就是在左边 l .text-center 用来实现文本的水平居中对齐 l .text-right 用于实现文本的水平居右对齐 l .text-uppercase 用于将小写字母转换为大写字母 l .text-lowercase 用于将大写字母转换为小写字母 l .text-capitalize 用于实现首字母大写
列表样式列表：有序列表、无序列表、定义列表 l .list-unstyled 用来将列表前面的项目符号去除掉 同时去除了列表的默认的padding值 l .list-inline 将列表中的内容排列成同一行 并且增加了少量的padding值 l .dl-horizontal 给定义列表来使用 将定义标题与定义描述信息排列在同一行 将dt标记与dd标记里面的内容排列在同一行 表格样式l .table 为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线 注意：.table这个类名是所有的类名的父类名 千万不能将其删除 其它的类名直接在.table后面增加即可！每一个类名之间使用空格分隔！ l .table-bordered 为表格和其中的每个单元格增加边框线 l .table-striped 实现隔行变色的效果 l .table-hover 实现鼠标放上的效果 l .table-condensed 紧凑型的表格 将padding值减半 l 状态类 状态类它只给tr或者td或者th来设置 不能给table标记来设置
按钮样式l .btn 表示按钮 它是所有按钮的父类名 l .btn-default 默认样式的按钮 l .btn-primary 重要的按钮 l .btn-success 成功的按钮 l .btn-danger 危险的按钮 l .btn-warning 警告的按钮 l .btn-info 一般信息的按钮 l .btn-link 链接状态的按钮 l .btn-lg 超大状态 l .btn-sm 小按钮 l .btn-xs 超小按钮
图片样式响应式的图片l .img-responsive 响应式的图片 图片的形状l . img-rounded 响应式圆角矩形图片 l .img-circle 响应式圆形图片 l .img-thumbnail 圆角边框的图片 栅格系统什么是栅格系统？ Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视（viewport尺寸的增加，系统会自动分为最多12列。 栅格系统用于通过一系列的行（row）与列（col）的组合来创建页面布局，内容就可以放入这些创建好的布局中 注意： n “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中。 n 一行最多只能有12列 栅格参数 | | | | | | 大于等于768px小于等于992px | 平板 | .col-sm- | | | | 大于1200px | PC大屏幕 | .col-lg- |
假设我们有一个页面同时给要这四种设备来进行访问： 如果是手机 一行显示2列 如果是平板电脑 一行显示3列 如果是中等屏幕 一行显示4列 如果是超大屏幕 一行显示6列
列偏移l .col-lg|md|sm|xs -offset-* *号表示偏移量 列嵌套在列里面再可以嵌套一个行与列的组合 (栅格系统) 表单样式l .form-group 表单组 l .form-control 给<input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100% 圆角边框 l .form-inline 内联表单 这个类名一定是给form这个标记设置 l .form-horizontal 水平排列的表单 通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。 l .sr-only 它是主要给label来设置 将label隐藏起来 三、组件组件：包括字体图标、下拉菜单、导航等等 Glyphicons 字体图标这里的字体图标都是通过fonts这个文件夹里面的文件来生成，我们千万不要将fonts这个文件夹删除了！ 三角图标l .caret 给span标签加一个class属性值为caret 下拉菜单l .dropdown 将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里 l data-toggle 属性：下拉菜单触发器 取值为：dropdown l .dropdown-menu 给<ul>标签设置的下拉菜单的样式 l . dropdown-header 用于设置下拉菜单的标题 l divider 用于设置水平分隔线 l .disabled为下拉菜单中的 <li> 元素添加 .disabled 类，从而禁用相应的菜单项 面包屑导航l . breadcrumb 给有序列表或者无序列表添加 l .active 给当前页添加 分页l .pagination 给无序列表或者有序列表添加 l .active 给当前页添加 l .pages 翻页效果的分页 标签l .label 标签的父类 l .label-default 默认的标签 l .label-success 成功的标签 l .label-danger 危险的标签 l .label-warning 警告的标签 l .label-info 一般信息的标签 l .label-primary 重要的标签 微章l . badge 导航l .nav 导航栏的基类 用于<nav>标签中 l .nav-default 导航栏默认样式 用于<nav>标签中 l .navbar-header 导航栏头部样式 l .collapse 用于折叠导航栏样式的基类 l .nav-collapse 折叠导航栏的样式 l .nav-fixed-top：导航栏固定在顶部 l .nav-fixed-bottom 导航栏固定在底部 l .navbar-inverse 实现反色的导航栏 l data-toggle属性的值要为collapse l . navbar-right 导航栏里面的内容在右边 四、JavaScript插件如果我们要在项目中使用JavaScript插件那么一定要先将bootstrap.js或者是bootstrap.min.js引入到我们当前的项目中 ，但是在引入js之前一定还要先引入jQuery.js文件 ！ 焦点轮播图 | 
收藏
淘帖
踩
