我的BootStrap学习笔记
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’。
- 布局容器:页面的内容滑入栅格系统都包含在这里面。可以添加一下两种类。二者不能嵌套。
.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学习笔记的更多相关文章
- Bootstrap~学习笔记索引
回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...
- Bootstrap学习笔记(二) 表单
在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...
- bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120
为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...
- bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111
基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...
- Bootstrap学习笔记-布局
Bootstrap学习笔记-布局 默认是响应式布局,就是你在改变页面的时候也不会出现乱的现象. <html><head> <meta charset="utf- ...
- Bootstrap学习笔记博客
本片博客用于记录之后要用到Bootstrap的学习笔记 概括: Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASC ...
- bootstrap学习笔记--bootstrap安装环境
Bootstrap 安装是非常容易的.此文是本人的学习汇总,便于以后查询学习,同时也希望给大家带来帮助. 下载 Bootstrap 您可以从 http://getbootstrap.com/ 上下载 ...
- Bootstrap学习笔记系列1-------Bootstrap网格系统
Bootstrap网格系统 学习笔记 [TOC] 简单网格 先上代码再解释 <!DOCTYPE html> <html> <head> <title>B ...
- bootstrap 学习笔记(1)---介绍bootstrap和栅格系统
学习前端许久,对于布置框架和响应浏览器用html 和javascript 写的有点繁琐,无意间看到这个框架,觉得挺好用的就开始学习了,但是这个框架上面有很多知识,不是所有的都要学的,故将学习笔记和觉得 ...
- bootstrap 学习笔记
bootstrap作为当下的流行框架不知道它怎么能行呢? 之前也看过好多bootstrap的网上教程,可是发现光看真的记不住,说起来也真是忧桑~重点还是要自己做才是真正的印象深刻.后来我发现解析模板是 ...
随机推荐
- Linux - samba 服务
暂时关闭 iptables 防火墙 [root@sch01ar ~]# systemctl stop iptables.service 暂时关闭 firewall 防火墙 [root@sch01ar ...
- 有关DotNetBar设计样式和运行时的样式不一致的问题
可以在 窗体类构造函数的InitializeComponent后加上下面圈出的内容: this.EnableGlass = false; 参考文章 DotNetBar如何控制窗体样式
- 「小程序JAVA实战」小程序多媒体组件(27)
转自:https://idig8.com/2018/08/19/xiaochengxujavashizhanxiaochengxuduomeitizujian27/ 来说下 ,小程序的多媒体组件.源码 ...
- python 监控windows磁盘空间和备份大小
#!/usr/bin/env python # Version = 3.5.2 # __auth__ = '无名小妖' import os import time import sendmail im ...
- **不使用tuple函数,将列表转为元组
使用动态参数: l = [1, 1, 3, 4, 5] def f(*args): return args x = f(*l) print(x)
- win7 wifi
win7 wifi the settings saved on this computer for the network do not match the requirements of the n ...
- sudo:must be setuid root 解决方法 <转>
http://walkerqt.blog.51cto.com/1310630/1354103
- vertex shader(3)
之前我们学习了如何声明顶点着色器.如何设置常量寄存器中的常量.接下来我们学习如何写和编译一个顶点着色器程序. 在我们编译一个顶点着色器之前,首先需要写一个. 有17种不同的指令(instruction ...
- win 10+ iis 10 部署.net core 1.1 web api
今天上午部署了wcf,部署了好久,一直没有部署好,最后找到了dudu的部署方法,结果中午吃饭的时候成功了,这是链接:http://www.cnblogs.com/dudu/p/3328066.html ...
- Java开发WebService实例(1)
参考文献:http://blog.sina.com.cn/s/blog_7bd0d6a70101dixc.html 简单的java工程实现 1 首先建立一个Java工程,在里面建一个Web servi ...