Bootstrap基础 CSS样式 个人总结

Bootstrap基础 全局CSS样式， 总结01

bootstrap引用：   		引用bootstrap CSS样式(注意：bootstrap基于jquery,因此想要完成导航切换等效果，必须引用JQ，并且jquery必须在bootstrap.js之前被引用）				引用jquery					引用bootstrap.js必须是html5文档类型移动端 mata标签

全局 CSS 样式

栅格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，
系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局
行（row） 必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中

媒体查询
/* 超小屏幕（手机，小于 768px） /
/ 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） /
/ 小屏幕（平板，大于等于 768px） /
@media (min-width: @screen-sm-min) { … }
/ 中等屏幕（桌面显示器，大于等于 992px） /
@media (min-width: @screen-md-min) { … }
/ 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { … }

栅格参数：
类前缀:                          .col-xs- .col-sm- .col-md- .col-lg-
.container 最大宽度:       None 750px 970px 1170px
分别针对：超小屏，手机屏 ，平板屏 ，pc屏

列偏移
使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如**.col-md-offset-4** 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。

列排序
通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。
push翻译：推（从左边第一个开始推出去几块，即左对齐右移几块）
pull翻译：拉（从右边第一个开始拉回来几块，即右对齐左移几块）

排版

	1.标题（.page-header）2.段落（.lead）中心内容.lead的class属性会突出显示段落3.small（123465 缩小显示）4.mark标记（123465 突出标记显示）5.del删除线6.文本对齐 
Left aligned text.
Center aligned text.
Right aligned text.
7.文本大小写
Lowercased text.
Uppercased text.
Capitalized text.
8.无样式列表(class="list-unstyled" 清除小点)	9.自定义列表

页面主体
Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 元素和所有段落元素。另外，

（段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。

代码
code 变成代码块
pre 按照源格式输出，给了灰色背景框
kbd 输出键盘按键的样子（其实就是给了文字一个背景颜色）
var 跟i标签一样 （主要写数学公式，斜体效果）

	例子：For example <section>
我希望现在能键入cmd命令
if(i<3){console.log("厉害");}
y=2x+1
hello  world

表格
class=“table table-striped table-bordered table-hover”
table 加上线独立起来
table-striped 条纹状 隔行颜色区别
table-bordered 带上左右边框
table-hover 鼠标放上表格产生一定变化
table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。

	状态类（表格颜色）...      灰色...     绿色...     黄色...		 红色...        蓝色响应式表格   ----------------其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。

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

不要将表单组直接和输入框组混合使用。建议将输入框组嵌套到表单组中使用。

	
    			 (role主要用于增强语义)用户名密码选择文件
选择你需要的文件
1.要用
将内容括起来2.form-inline 表单一行显示    class="form-horizontal"水平显示3.form下的div添加form-group 的class属性3.必须有label标签   不想显示给label标签添加sr-only的class属性1、role是HTML5的标签属性，可以用于标识一个普通的标签，使之语义化，方便浏览器对其具体功能进行识别。
简单的说，role是为了给一些特定的浏览工具，比如盲文浏览工具识别
2、下面有其他案例：Eg1: ，把div元素转换为button按钮功能使用；
Eg2:，把div元素转换为navigation导航功能使用；
Eg3:，把div元素转换为checkbox复选框功能使用；
Eg4:链接，把a链接元素转换为button按钮功能使用。

文本域
支持多行文本的表单控件。可根据需要改变 rows 属性。

下拉列表（select）

1234

对于标记了 multiple 属性的 控件来说，默认显示多选项。

禁用状态
添加disabled属性

只读状态
为输入框设置 readonly 属性可以禁止用户修改输入框中的内容。处于只读状态的输入框颜色更浅（就像被禁用的输入框一样），但是仍然保留标准的鼠标状态。

校验状态
Bootstrap 对表单控件的校验状态，如 error、warning 和 success 状态，都定义了样式。使用时，添加 .has-warning、.has-error 或 .has-success 类到这些控件的父元素即可。任何包含在此元素之内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式

Input with success       (success)
//（glyphicon glyphicon-ok form-control-feedback）字体图标信息，单词间空格不可以删除

控件尺寸
通过 .input-lg 类似的类可以为控件设置高度，通过 .col-lg-* 类似的类可以为控件设置宽度。

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

按钮
可作为按钮使用的标签或元素：

  、 或  元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。（即给这些标签添加 btn的class属性值）

	虽然按钮类可以应用到  和  元素上，但是，导航和导航条组件只支持  元素。

对于  元素，是通过 :active 状态实现的。对于  元素，是通过 .active 类实现的。
然而，你还可以将 .active 应用到  上（包含 aria-pressed="true" 属性)），并通过编程的方式使其处于激活状态。
！！即给按钮添加 active的class属性值
Primary button

 .row :nth-child(2) {opacity: 0.3;} (禁用，不出现禁用符号，按钮:hover样式还在，按钮颜色变淡程度由opacity值决定)
或者
disabled="disabled"(禁用，出现禁用符号)
或者
class="disabled"(禁用，不出现禁用符号，按钮:hover样式消失，按钮颜色变淡)

  (圆形 ：即圆边角的矩形)
  （圆圈）
（缩略图形式 有个灰色 边框）

×在上面的示例中，按钮（button）元素被定义为一个关闭（close）按钮，按钮中间有一个“X（×）”字符。
辅助软件并不能知道X是什么意思，所以需要aria-label标签来为辅助设备**提供相应的标识**来告诉它这个button是close的作用。aria-labelledby，并将其值为所有读取的元素的id,当获取到焦点时，屏幕阅读器是会读该ID下的内容
PS：如果一个元素同时有aria-labelledby和aria-label，读屏软件会优先读出aria-labelledby的内容aria-hidden="true"  对屏幕阅读器隐藏，图标本身没什么含义，不需要被屏幕阅读器读取到，因此使用aria-hidden="true"对其隐藏

...
...
不能用于导航条组件中
排列导航条中的组件时可以使用这些工具类：.navbar-left 或 .navbar-right 。

...
...

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！