[k]bootstrap.css笔记

bootstrap-3.3.4.css

1---@2989  .btn

使用touch-action来控制滚动;CSS属性touch-action允许你在触摸时控制滚动行为;

如下是touch-action的所有可能值:

touch-action: auto 滚动正常工作，只要浏览支持触摸操作依旧可以触发水平或是垂直的滚动。
touch-action: none 触摸操作不能触发滚动
touch-action: pan-x 触摸操作可以触发水平滚动；但垂直滚动被禁止；
touch-action: pan-y 触摸操作可以触发垂直滚动；但水平滚动被禁止；
touch-action: manipulation 鼠标可以悬停在内容上（指向该内容）而不激活它（单击它）;

记住：使用touch-action: pan-x或touch-action: pan-y更好，因为你的目的明确，用户只能在元素上水平或垂直的滚动。

CSS3 user-select 新特性 禁选文本
none:用户不能选择文本;text:用户可以选择文本
需要注意的是：user-select并不是一个W3C的CSS标准属性，浏览器支持的不完整，需要对每种浏览器进行调整
user-select: none;
-ms-user-select: none; /*IE10及以上*/
-moz-user-select: none; /*FF*/
-webkit-user-select: none; /*Chrome*/

IE6-9还没发现相关的CSS属性,可以使用配合js解决
document.body.onselectstart = function(){
return false; /*IE,Chrome 都适用, FF不适用*/
}

 

2---@2989  .btn-group-justified

table-layout 固定表格布局：

automatic---默认。列宽度由单元格内容设定。
fixed---列宽由表格宽度和列宽度设定。

所有子元素的宽度只要百分比相等，不论设为1%-100%之内的任意值都是等比例平分父级元素宽度！

 

3---@2563  .form-control:focus

outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);

 

4---@3786 .input-group-addon;@3796 .input-group-addon

display: table-cell;

width: 1%;

table 的特点：table-cell响应屏幕拉伸，不设宽度则自适应，如果设置的宽度小于table-cell（即：td）的最小宽度（td内内容的宽度），则该设置无效，table-cell的宽度即为它的最小宽度。注意设置百分比与像素的区别。（暂时的理解还不全面，因为平时用的太少了，以后会陆续更新。）

 

5---@2315 .table-striped > tbody > tr:nth-of-type(odd) { background-color: #f9f9f9; }

表格的奇数行的背景色为：#f9f9f9

:nth-of-type(n|even|odd|formula)  语法
n           要匹配的每个子元素的索引。必须是一个数字。第一个元素的索引号是 1。
even      选取每个偶数子元素。
odd       选取每个奇数子元素。
formula 规定哪个子元素需通过公式(an+b)来选取。n是计数器(从0开始),b是偏移值。

 

 心得：先拷贝bootstrap的组件代码，查看效果，对于不明白的css或是js效果，查阅资料。

然后仿照bootstrap组件效果，自己手动编写css和js来实现。

 

Bootstrap v3.3.4 (http://getbootstrap.com) -- 样式代码块

/*part1--初始化基本样式--源代码:@8--@190*/

/*part2--打印样式--源代码:@192--@266*/

/*part3--Glyphicons字体图标--源代码:@267--@1071*/

/*part4--栅格系统--源代码:@1579--@2245*/

/*part5--表格--源代码:@2246--@2485*/

/*part6--表单--源代码:@2486--@3876*/