bootstarp总结

第一章 bs入门
1:bootstarp简介:
--Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。
--Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。
2:bootstarp网址:
--中文网址:https://www.bootcss.com/
--外文网址: http://getbootstrap.com/
3:bootstarp优点:
--移动设备优先:自 Bootstrap 3 起,框架包含了贯穿于整个库的移动设备优先的样式。
--浏览器支持:所有的主流浏览器都支持 Bootstrap。
--容易上手:只要您具备 HTML 和 CSS 的基础知识,您就可以开始学习 Bootstrap。
--响应式设计:Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
4:Bootstrap 框架的内容:
--基本结构:Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。
--CSS:Bootstrap 自带以下特性:全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class,以及一个先进的网格系统。
--组件:Bootstrap 包含了十几个可重用的组件,用于创建图像、下拉菜单、导航、警告框、弹出框等等。
--JavaScript 插件:Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件,也可以逐个包含这些插件。
--定制:您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。
5:Bootstrap文件介绍:






6:Bootstrap基本结构:







Bootstrap 101 Template

    
    
    
  
  
    

你好,世界!

7:如何使用bootstarp框架:
--下载bootstarp框架
--把用到文件引入到项目当中
--熟记应用bootstarp框架里面定义好的类的作用
8:bootstarp框架的内容:
--css样式
--css组件
--js插件

第二章 栅格系统
序号 名字 类名 作用
1: 容器 .container 响应式的布局容器
大屏(>=1200px)宽度是1170px
中屏(>=992px)宽度是970px
小屏(>=768px)宽度是750px
超小屏(100%)
2: 容器 .container-fluid 流失布局布局容器
流失布局 百分百的宽
适合做移动端开发


3: 栅格系统 bs中的栅格系统将容器平均分为了12列
参数 bs中行和列的组合来创建页面
行 .row 行是放在容器中的
列 .column 列是当中行中的
大屏 .col-lg- 大屏(>=1200px)下用到的列的类名是.col-lg
中屏 .col-md- .col-md-4 表示中屏下,该元素占比是4列
小屏 .col-sm- 每一列默认左右都有15px的padding
超小屏 .col-xs- 列里面可以同时添加其他屏下的类
4: 列嵌套 子列会把会把父元素当中12份划分
5: 列偏移 .col-md-offset- .col-md-offset-4 偏移4份
6: 列排序 .col-md-push-* 和 .col-md-pull-* push由左到右,pull由右到左
7: 响应式工具 hidden- * visible- 隐藏、显示
类名 大屏 lg 中屏 md 小屏 sm 超小屏 xs
hidden-lg 隐藏 显示 显示 显示
hidden-md 显示 隐藏 显示 显示
hidden-sm 显示 显示 隐藏 显示
hidden-xs 显示 显示 显示 隐藏

    visible-lg      显示                  隐藏                  隐藏                  隐藏
    visible-md      隐藏                  显示                  隐藏                  隐藏
    visible-sm      隐藏                  隐藏                  显示                  隐藏
    visible-xs      隐藏                  隐藏                  隐藏                  显示

8:什么是栅格系统?
栅格系统又名网格系统,是有容器+行+列组成
9:容器最多容纳12列,多一列会在下一行显示,少一列,会把该列的位置空着

第三章 排版
.lead 使段落突出显示
.small 设定小文本 (设置为父文本的 85% 大小)
.page-header 给标题添加分割线//题目
.text-left 设定文本左对齐
.text-center 设定文本居中对齐
.text-right 设定文本右对齐
.text-muted 文字减弱//字体颜色为灰色
.text-primary 字体颜色为天蓝色
.text-success 字体颜色为绿色
.text-info 字体颜色为湖蓝色
.text-warning 字体颜色为咖啡色
.text-danger 字体颜色为红色
.text-justify 设定文本对齐,段落中超出屏幕部分文字自动换行
.text-nowrap 段落中超出屏幕部分不换行
.text-lowercase 设定文本小写
.text-uppercase 设定文本大写
.text-capitalize 设定单词首字母大写
.initialism 显示在 元素中的文本以小号字体展示,且可以将小写字母转换为大写字母
.blockquote 段落前添加竖线样式
.pull-right 文本右对齐
.blockquote-reverse 设定引用右对齐
.list-unstyled 移除默认的列表样式,列表项中左对齐 (

      中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项,你需要在嵌套的列表中使用该样式)//消除默认样式
      .list-inline 将所有列表项放置同一行//类似浮动
      .dl-horizontal 该类设置了浮动和偏移,应用于
      元素和
      元素中,具体实现可以查看实例
      .dl-horizontal 可以让
      内的短语及其描述排在一行。开始是像
      的默认样式堆叠在一起,随着导航条逐渐展开而排列在一行。
      .pre-scrollable 使
       元素可滚动,代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条

      .text-muted:提示,使用浅灰色(#999)
      .text-primary:主要,使用蓝色(#428bca)
      .text-success:成功,使用浅绿色(#3c763d)
      .text-info:通知信息,使用浅蓝色(#31708f)
      .text-warning:警告,使用黄色(#8a6d3b)
      .text-danger:危险,使用褐色(#a94442

      第四章 代码
      变量赋值: x = ab + y
      按键提示: CTRL + P

       多行代码
       多行代码带有滚动条
      电脑程序输出: Sample output
      同一行代码片段: span, div

      第五章 表格
      标签 作用

      为表格添加基础样式。
      表格标题行的容器元素(),用来标识表格列。
      表格主体中的表格行的容器元素()。
      一组出现在单行上的表格单元格的容器元素( 内使用。
      )。
      默认的表格单元格。
      特殊的表格单元格,用来标识列或行(取决于范围和位置)。必须在
      关于表格存储内容的描述或总结。

      表格类
      类 作用
      .table 为任意

      添加基本样式 (只有横向分隔线)
      .table-striped 在 内添加斑马线形式的条纹 ( IE8 不支持)
      .table-bordered 为所有表格的单元格添加边框
      .table-hover 在 内的任一行启用鼠标悬停状态
      .table-condensed 让表格更加紧凑

      ,

      类 作用
      .active 将悬停的颜色应用在行或者单元格上
      .success 表示成功的操作
      .info 表示信息变化的操作
      .warning 表示一个警告的操作
      .danger 表示一个危险的操作

      上下文
      类 描述
      .active 对某一特定的行或单元格应用悬停颜色
      .success 表示一个成功的或积极的动作
      .warning 表示一个需要注意的警告
      .danger 表示一个危险的或潜在的负面动作

      第六章 按钮
      类 作用
      .btn 为按钮添加基本样式
      .btn-default 默认/标准按钮
      .btn-primary 原始按钮样式(未被操作)
      .btn-success 表示成功的动作
      .btn-info 该样式可用于要弹出信息的按钮
      .btn-warning 表示需要谨慎操作的按钮
      .btn-danger 表示一个危险动作的按钮操作
      .btn-link 让按钮看起来像个链接 (仍然保留按钮行为)
      .btn-lg 制作一个大按钮
      .btn-sm 制作一个小按钮
      .btn-xs 制作一个超小按钮
      .btn-block 块级按钮(拉伸至父元素100%的宽度)
      .active 按钮被点击
      .disabled 禁用按钮

      第七章 图片
      类 描述
      .img-rounded 为图片添加圆角 (IE8 不支持)
      .img-circle 将图片变为圆形 (IE8 不支持)
      .img-thumbnail 缩略图功能
      .img-responsive 图片响应式 (将很好地扩展到父元素)

      第八章 辅助类
      文本
      以下不同的类展示了不同的文本颜色。如果文本是个链接鼠标移动到文本上会变暗:
      类 描述
      .text-muted 文字减弱//字体颜色为灰色
      .text-primary 字体颜色为天蓝色
      .text-success 字体颜色为绿色
      .text-info 字体颜色为湖蓝色
      .text-warning 字体颜色为咖啡色
      .text-danger 字体颜色为红色
      .text-justify 设定文本对齐,段落中超出屏幕部分文字自动换行
      .text-nowrap 段落中超出屏幕部分不换行
      .text-lowercase 设定文本小写
      .text-uppercase 设定文本大写
      .text-capitalize 设定单词首字母大写
      .text-muted 字体灰色
      .text-primary "text-primary" 类的文本样式
      .text-success "text-success" 类的文本样式
      .text-info "text-info" 类的文本样式
      .text-warning "text-warning" 类的文本样式
      .text-danger "text-danger" 类的文本样式

      背景

      以下不同的类展示了不同的背景颜色。 如果文本是个链接鼠标移动到文本上会变暗:
      类 描述
      .bg-primary 表格单元格使用了 "bg-primary" 类
      .bg-success 表格单元格使用了 "bg-success" 类
      .bg-info 表格单元格使用了 "bg-info" 类
      .bg-warning 表格单元格使用了 "bg-warning" 类
      .bg-danger 表格单元格使用了 "bg-danger" 类、

      其他
      类 描述
      .pull-left 元素浮动到左边
      .pull-right 元素浮动到右边
      .center-block 设置元素为 display:block 并居中显示
      .clearfix 清除浮动
      .show 强制元素显示
      .hidden 强制元素隐藏
      .sr-only 除了屏幕阅读器外,其他设备上隐藏元素
      .sr-only-focusable 与 .sr-only 类结合使用,在元素获取焦点时显示(如:键盘操作的用户)
      .text-hide 将页面元素所包含的文本内容替换为背景图
      .close 显示关闭按钮
      .caret 显示下拉式功能

      第九章 表单
      在bs框架下有3种表单 1-默认表单 2-内联表单 3-水平排列表单
      类 作用
      .form-group 一个区域,一组表单,我的input是被form-group包裹的
      .form-control input的宽度是百分百,是自适应的宽
      .form-inline 让表单元素一行显示(内联表单)
      .sr-only 是lable的类,隐藏文字
      .col-sm-10 设置表单元素宽
      .input-lg input宽最大高
      .input-sm input宽小高
      .input-xs input宽超小高
      .input-group-addon
      .input-group
      .checkbox-inline 多选一行显示
      .radio-inline 单选一行显示
      disabled 禁用状态(不用写在类里面)
      readonly 只读状态(不用写在类里面)
      .form-control-static
      .has-warning
      .has-error
      .has-success

      第十一章 下拉菜单
      下拉菜单组件的使用事项
      1:先引入css
      2:引入jq
      3:引入js
      类 作用
      .dropdown 下拉菜单
      .pull-right 向右对齐
      .dropdown-header 添加标题
      .caret 三角符号
      .dropdown 指定下拉菜单,下拉菜单都包裹在 .dropdown 里
      .dropdown-menu 创建下拉菜单
      .dropdown-menu-right 下拉菜单右对齐
      .dropdown-header 下拉菜单中添加标题
      .dropup 指定向上弹出的下拉菜单
      .disabled 下拉菜单中的禁用项
      .divider 下拉菜单中的分割线

      第十二章 按钮组建
      类 作用
      .btn-group 基本按钮
      .btn-toolbar 该 class 有助于把几组

      结合到一个
      中,一般获得更复杂的组件。 //组合成一个新的组件
      .btn-group-lg,
      .btn-group-sm,
      .btn-group-xs 这些 class 可应用到整个按钮组的大小调整,而不需要对每个按钮进行大小调整。

      .btn-group-vertical 该 class 让一组按钮垂直堆叠显示,而不是水平堆叠显示。

      第十三章 按钮下拉菜单
      类 作用
      .btn-group 划分一组
      .dropdown-toggle 在button按钮里面添加(只是一个说明,不重要)
      .btn-lg 大
      .btn-sm 小
      .btn-xs 超小

      第十四章 输入组框
      类 作用
      .input-group 输入框分组
      .input-group-addon 输入框外添加额外的内容
      .input-group-btn 输入框外添加额外的内容(主要是添加btn按钮用)
      .form-control 让input框的宽百分百显示,自适应
      .input-group-lg 大
      .input-group-sm 小

      你可能感兴趣的:(bootstarp总结)