1.全局样式里面:

1.container:版心

2.col-xx-xx:栅格布局

3.btn btn-default: 按钮,默认按钮样式

4..pull-left  pull-right  clearfix: 左浮动 右浮动 清除浮动

5.响应式工具:visiable-xx:  在xx下隐藏

6.text-center;text-left;text-right:居中/靠左/靠右

2.CSS组件里面:

1.Glyphicons 字体图标(自定义字体图标)

2.nav-tabs:导航

3.nav-bar nav-default:  导航条

4.pagination: 分页

5.media: 媒体对象(默认样式是:在一个内容块的左边或者右边展示一个多媒体的内容[图像,视频,音频])

6.panel: 面板(将某些DOM内容放到一个盒子里面)

3.javascript插件

1.tabs data-toggle="tab" : 标签页

2.carousel : 轮播图

3.collapse: 手风琴菜单

4.滚动监听:window.resize();

5.工具提示 tooltip

6.affix: 固定在顶部

以后下载的框架里面,我们要找的一般在dist文件夹里面(编译好的)。源码在less里面。

另外:

1.div:first-child: 是指div元素的父元素的第一个孩子,并不是指第一个div;(有误),如果第一个不是div那么就选不中

2.div:nth-of-type(1): 只从div里面去找第一个元素;

3.div:first-of-type : 是div这种类型的第一个元素;

4.手机端产品滑动:

1.监听屏幕变化 window.resize().

2.利用js,让轮播图里面的图片滑动的时候大小图的切换。先判断屏幕宽度的大小,当屏幕宽度>768px的时候,给轮播图里面的img设置大图片的路径,设置背景图片,就不需要图片标签了(赋值一个: ''),代码: $item.css('background-image', 'url('+ imgSrc +')');;当屏幕宽度<=768px的时候,给li里面插入图片标签,此时,就不需要背景图片了(赋值一个: ''); 代码:$item.html('<img src="'+ imgSrc +'" alt="" );

3.利用js,给轮播图添加在手机端的滑动效果(touchstart)。给#slide添加滑动事件(用addeventListener),判断滑动的方向,从左往右滑动,调用.carousel('prev');从右往左,调用.carousel('next');

4.利用自定义属性  data-large-image存储大图片的路径, data-small-image 存储小图片的路径。然后在js中,再利用jQuery获取到这个自定义属性,设置到item上。那么如何获取???

用:data函数来获取。var imgSrc = $item.data('large-image').

5.在产品推荐的nav-tabs里面,想让ul在手机端或者屏幕变小的时候出现横向滚动条,那么我们给ul外层设置一个div(ul-wraper)设置overflow-x:scroll,通过监听屏幕宽度的大小的变化和利用媒查询来判断屏幕宽度,这样,当里面的宽度超出父亲的宽度,就出现横向滚动条了。但是在此时,我们一般要利用js来计算一下产品推荐里面的总宽度(里面所有li的宽度之和),首先获取到里面所有的li的宽度,然后把这些li的宽度都加起来。

代码:// 计算产品推荐里面的盒子的总宽度

var tabs = $('#products .nav-tabs');

// ul 下面的 li们

var lis = $('#products .nav-tabs > li');

// 开始的宽度设置为0

var width = 0;

// 遍历lis,

lis.each(function(index, el) {

width += $(el).width();

});

tabs.css('width', width);

5.特殊类名:

.pull-left:左浮动

.pull-right:右浮动

.col-md-4:在中屏幕下占4份;   .col-sm-6:在小屏幕下占6份;

.col-md-offset-4:是指将 .col-md-4的元素向右侧偏移4个列(column)的宽度。

.visible-xs-*:在超小屏幕下可见    <768px      手机

.visible-sm-*:在小屏幕下可见      >=768px    平板

.visible-md-*:在中屏幕下可见     >=992px     桌面

.visible-lg-*:在大屏幕下可见       >=1200px   桌面

.hidden-xs-*:在超小屏幕下隐藏    <768px      手机

.hidden-sm-*:在小屏幕下隐藏      >=768px    平板

.hidden-md-*:在中屏幕下隐藏      >=992px     桌面

.hidden-lg-*:在大屏幕下隐藏        >=1200px   桌面

6.使用工具提示(tooltip.js),一定要用js触发一下。

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on top</button>

$(function () {

$('[data-toggle="tooltip"]').tooltip();

});

7.事件定义完就触发一下 用trigger('resize');

其他:

一、栅格系统

1.栅格布局

<div class="col-md-8 col-xs-6 col-lg-4"></div>

表示:该DIV在中等屏幕中占有‘8/12’,在手机中占有‘6/12’,在大屏幕中占有屏幕比例的‘4/12’。

  1. 布局容器:页面的内容滑入栅格系统都包含在这里面。可以添加一下两种类。二者不能嵌套。

.container 类用于固定宽度并支持响应式布局的容器。

.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。

二、表格:

1.  表格基本实例:给任意table标签添加 .table 类可以生成表格的最基本的样式。(含有少量的padding和水平方向的分割线)

2.  条纹状表格: .table-striped 类可以给tbody内的每一行增加斑马条纹样式。(类似于隔行高亮), 但是这个有兼容性,条纹表格是以来css3选择器:nth-child来实现的,IE8 不支持.

3. 让表格增加边框: .table-bordered 类 为表格和其中的每个单元格增加边框。

例如:<table class="table table-bordered">里面是表格的内容</table>

4. 鼠标悬停: .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。(鼠标移入当前行,当前行高亮)

5. 紧缩表格:  .table-condensed  : (表格的padding减半)

6.状态类:(给或者单元格设置颜色)

7.响应式表格:  将.table 元素包裹在 .table-responsive 元素内,可以创建响应式表格。在小屏幕设备上(<768px)水平滚动,大于768px时候,水平滚动条消失。

Firefox 浏览器对 fieldset 元素设置了一些影响 width 属性的样式,导致响应式表格出现问题。除非使用我们下面提供的针对 Firefox 的 hack 代码,否则无解:

火狐的兼容处理办法:

@-moz-document url-prefix() {

fieldset { display: table-cell;

}}

三.表单

1.基本实例

单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

例如:

<form role="form">

<div class="form-group">

<label for="exampleInputEmail1">Email address</label>

<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">

</div>

<div class="form-group">

<label for="exampleInputPassword1">Password</label>

<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">

</div>

</form>

2.内联表单:为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口(viewport)至少在 768px 宽度时(视口宽度再小的话就会使表单折叠)。需要手动设置宽度

注意:在 Bootstrap 中,输入框和单选/多选框控件默认被设置为 width: 100%; 宽度。在内联表单,我们将这些元素的宽度设置为 width: auto;,因此,多个控件可以排列在同一行。根据你的布局需求,可能需要一些额外的定制化组件。

一定要添加 label 标签

如果你没有为每个输入控件设置 label 标签,屏幕阅读器将无法正确识别。对于这些内联表单,你可以通过为label 设置 .sr-only 类将其隐藏。

3.水平排列表单: .form-horizontal并联合使用 Bootstrap 预置的栅格类,可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为,使其表现为栅格系统中的行(row),因此就无需再额外添加 .row 了。

效果:

4.内联单选和多选框: 通过将 .checkbox-inline 或 .radio-inline 类应用到一系列的多选框(checkbox)或单选框(radio)控件上,可以使这些控件排列在一行。

5.下拉列表(select)

使用默认选项或添加 multiple 属性可以同时显示多个选项。

6.静态控件: 如果需要在表单中将一行纯文本和 label 元素放置于同一行,为 <p> 元素添加 .form-control-static 类即可。

实例:

代码:

<form class="form-horizontal" role="form">

<div class="form-group">

<label class="col-sm-2 control-label">Email</label>

<div class="col-sm-10">

<p class="form-control-static">email@example.com</p>

</div>

</div>

<div class="form-group">

<label for="inputPassword" class="col-sm-2 control-label">Password</label>

<div class="col-sm-10">

<input type="password" class="form-control" id="inputPassword" placeholder="Password">

</div>

</div>

</form>

7.禁用输入框:  disabled:

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

8.被禁用的 fieldset

为<fieldset> 设置 disabled 属性,可以禁用 <fieldset> 中包含的所有控件。

例如:

<form role="form">

<fieldset disabled>

<div class="form-group">

<label for="disabledTextInput">Disabled input</label>

<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">

</div>

<div class="form-group">

<label for="disabledSelect">Disabled select menu</label>

<select id="disabledSelect" class="form-control">

<option>Disabled select</option>

</select>

</div>

<div class="checkbox">

<label>

<input type="checkbox"> Can't check this

</label>

</div>

<button type="submit" class="btn btn-primary">Submit</button>

</fieldset></form>

9.只读输入框  :为输入框设置readyonly属性,禁止用户输入

10.控件尺寸: .input-lg  设置控件的高度,通过.col-lg-*为控件设置宽度、

11.水平排列的表单组的尺寸:通过添加 .form-group-lg 或 .form-group-sm 类,为 .form-horizontal 包裹的 label 元素和表单控件快速设置尺寸。

四、按钮

1.预定义样式

代码:

<button type="button" class="btn btn-default">Default</button>

<button type="button" class="btn btn-primary">Primary</button>

<button type="button" class="btn btn-success">Success</button>

<button type="button" class="btn btn-info">Info</button>

<button type="button" class="btn btn-warning">Warning</button>

<button type="button" class="btn btn-danger">Danger</button>

<button type="button" class="btn btn-link">Link</button>

.btn-block 类可以将其拉伸至父元素100%的宽度,而且按钮也变为了块级(block)元素。

2.尺寸  使用 .btn-lg、.btn-sm 或 .btn-xs 可以获得不同尺寸的按钮。

让按钮处于激活状态(底色更深、边框颜色更深,向内投射阴影),对于 <button> 元素,是通过 :active 状态实现的。对于 <a> 元素,是通过 .active 类实现的。然而,你还可以将 .active 应用到 <button>上,并通过编程的方式使其处于激活状态。

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>

<button type="button" class="btn btn-default btn-lg active">Button</button>

3.禁用状态

A 给按钮背景设置opacity属性,呈现无法点击的效果。

B 为button元素添加disabled属性,表示禁用

五、图片

1.响应式图片  给图片设置 .img-responsive 类名。

2.图片形状  给img标签添加相应的类,让图片呈现不同的形状。(.img-rounded; .img-circle; .img-thumbnail)

六、关闭按钮:让模态框和警告框消失

七.响应式工具

1.可用的类

我的BootStrap学习笔记的更多相关文章

  1. Bootstrap~学习笔记索引

    回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...

  2. Bootstrap学习笔记(二) 表单

    在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...

  3. bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120

    为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...

  4. bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111

    基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...

  5. Bootstrap学习笔记-布局

    Bootstrap学习笔记-布局 默认是响应式布局,就是你在改变页面的时候也不会出现乱的现象. <html><head> <meta charset="utf- ...

  6. Bootstrap学习笔记博客

    本片博客用于记录之后要用到Bootstrap的学习笔记   概括: Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASC ...

  7. bootstrap学习笔记--bootstrap安装环境

    Bootstrap 安装是非常容易的.此文是本人的学习汇总,便于以后查询学习,同时也希望给大家带来帮助. 下载 Bootstrap 您可以从 http://getbootstrap.com/ 上下载 ...

  8. Bootstrap学习笔记系列1-------Bootstrap网格系统

    Bootstrap网格系统 学习笔记 [TOC] 简单网格 先上代码再解释 <!DOCTYPE html> <html> <head> <title>B ...

  9. bootstrap 学习笔记(1)---介绍bootstrap和栅格系统

    学习前端许久,对于布置框架和响应浏览器用html 和javascript 写的有点繁琐,无意间看到这个框架,觉得挺好用的就开始学习了,但是这个框架上面有很多知识,不是所有的都要学的,故将学习笔记和觉得 ...

  10. bootstrap 学习笔记

    bootstrap作为当下的流行框架不知道它怎么能行呢? 之前也看过好多bootstrap的网上教程,可是发现光看真的记不住,说起来也真是忧桑~重点还是要自己做才是真正的印象深刻.后来我发现解析模板是 ...

随机推荐

  1. Java对象和它的内存管理

    java中的内存管理分为两个方面: 内存分配:指创建java对象时JVM为该对象在堆空间中所分配的内存空间. 内存回收:指java 对象失去引用,变成垃圾时,JVM的垃圾回收机制自动清理该对象,并回收 ...

  2. 检测SqlServer服务器性能

    通过性能监视器监视 Avg. Disk Queue Length   小于2 Avg. Disk sec/Read , Avg. Disk sec/Write  小于10ms 可以用数据收集器定时收集 ...

  3. msyqld 的 The user specified as a definer ('root'@'%') does not exist 问题

    msyqld 的 The user specified as a definer ('root'@'%') does not exist 问题 造成问题:搭建网站时显示内容不完整. 跟踪tomcat日 ...

  4. Python 模块 - jieba

    安装 jieba pip3 install jieba jieba 支持三种分词模式: 精确模式:将句子最精确地切开,适合文本分析 全模式:把句子中所有的可以成词的词语都扫描出来, 速度非常快,但是不 ...

  5. swoole学习

    <?php ini_set('default_socket_timeout', -1); class serverEmail { public $serv = null; public func ...

  6. 【图片】机器学习--名画风格 neural-style

    neural-style 学习画作风格,将风格施加到另外一张图片中 例如将名画<星夜>的风格施加到一副建筑照片中: 源码 https://github.com/jcjohnson/neur ...

  7. 03-23 MVC框架(以查询、删除为例)

    1.MVC的定义: MVC(Model-View-Controller,模型-视图-控制器)是用于将应用程序粉好吃呢过如下3个主要方面的体系结构模式: 模型(Model):一组类和业务规则,类用于描述 ...

  8. LNK2026: 模块对于 SAFESEH 映像是不安全的<转>

    转自VC错误:http://www.vcerror.com/?p=162 错误描述: 在使用VS2012编译工程时,提示错误:" error LNK2026: 模块对于 SAFESEH 映像 ...

  9. F5负载均衡架构图

    原文:https://blog.csdn.net/qq_35611533/article/details/51917279?locationNum=1&fps=1

  10. SVN 与Git的区别

    1:最主要的区别是Git是分布式版本控制系统,而SVN是集中式的版本控制系统.能理解这一点,区别它们就会容易很多,Git并不是目前唯一的分布式版本控制系统,比如还有Mercurial等.不过话说回来G ...