Bootstrap学习笔记

bootstrap介绍

bootstrap是一个HTML,CSS ,JavaScript的框架
包含很多常见的css样式,javascript的效果

安装

第一种直接引入文件的方式(用CDN的地址)
CSS:“http://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css”
JS:“https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.slim.min.js”
“https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min/js”

第二种方式
模块化的包管理的当时
npm,install,bootstrap

使用

布局容器

Bootstrap需要为页面内容和栅格系统包裹一个.container容器

.container类,用于固定宽高并支持响应式布局的容器
.container-fluid类,用于100%宽度,占据全部视口的容器

注意,由于padding等属性的原因,这两种容器类不能互相嵌套

栅格系统

Bootstrap提供了一套响应式、移动设备优先的流式栅格系统
随着屏幕或视口尺寸的增加,系统会自动分为最多12列(12份)
利用class=“row”&&class=“col-md-1~12”

栅格参数

表格

在Bootstrap里,给标签< table>添加.table类可以为其赋予基本样式(少量内补-padding)和水平方向的分割线

详情可见全局css样式

表单

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

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

可能需要手动设置宽度
在bootstrap中,输入框和单选/多选框空间默认被设置为width:auto;,因此,多个空间可以排列在同一行,根据你的布局需求,可能需要一些额外的定制化组件

一定要添加label标签
如果你没有为每个输入控件设置label标签,屏幕阅读器将无法正确识别。对于这些内联表单,你可以通过为label设置.sr-only类将其隐藏,还有一些辅助技术提供label标签的替代方案,比如aria-label,aria-labelleby或title属性。如果这些都不存在,屏幕阅读器可能会采用使用placeholder属性,如果存在的话,使用占位符来代替其他的标记,但要注意,这种方法是不妥当的

焦点状态
将某些默认表单空间的默认outline样式移除,然后对:focus状态赋予box-shadow属性

禁用状态
为输入框设置disabled属性可以进制其与用户有任何交互(焦点,输入等)。被禁用的输入框颜色更浅,并且还添加了not-allowed鼠标状态

表单按钮

可作为按钮使用的标签或元素
为a,button或input元素添加按钮类(button class)即可使用bootstrap提供的样式
http://v3.bootcss.com/css/#buttons

针对组件的注意事项
虽然按钮类可以应用到a和button元素上,但是,导航和导航组件只支持button元素

链接被作为按钮使用时的注意事项
如果a元素被作为按钮使用,并用于当前页面触发某些功能,而不是用于连接其他页面或链接前页面中的其他部分,那么,无比为其设置role-button属性

跨浏览器实现
尽可能使用button元素来获取在各个浏览器上获得相匹配的回值效果

预定式样式

激活状态
当按钮处于激活状态时,其表现为被按下去(底色更深、边框颜色更深,内向投射阴影).对于button元素,是通过active状态实现的。对于a元素,是通过active类是西安的。然而,你还可以将active应用到button上(包含aria-pressed=true属性),并且通过编程的方式使其处于激活状态

组件

图标

bs有免费的文字图标可以使用

处于性能考虑,所有图标都需要一个基类和对应每个图标的类,把下面的代码放在任何地方都可以正常使用.注意,为了设置正确的内补,务必在图标和文本之间添加一个空格

不要和其他组件混合使用
图标类不能和其他组件直接联合使用,他们不能在同一个元素上与其他类共同存在.应该创建一个嵌套的span标签,并将图标类应用到这个span标签上

只对内容为空的元素起作用
图标类只能应用在不包含任何文本内容或子元素的元素上

改变图标字体文件的位置
bootstrap假定所有的图标字体文件全部位于…/fonts/目录内,相对于预编译版css文件的目录,如果你修改了图标字体文件的位置,那么,你需要通过下面列出的任何一种方式有更新css文件

在less源文件中修改@icon-font-path和/或@icon-font-name变量
利用less编译器提供的相对url地址选项
修改预编译css文件中的url()地址

根据你自身的情况选择一种方式即可

图标的可访问性
现代的辅助技术能够识别朗读由css生成的内容和特定的Unicode字符。为了避免屏幕屏幕识读设备抓取非故意的和可能产生混淆的输出内容(尤其是当图标纯粹作为装饰用途时),我们为这些图标设置饿了aria-hidden=true属性
如果你使用图标是为了表达某些含义(不仅仅是为了装饰用),请确保你所要表达的意思能够通过被辅助设备识别,例如,包含额外的内容并通过sr-only类让其在视觉上表达出隐藏的效果
如果你所创建的组件不包含任何文本内容(例如,button内只包含了一个图标),你应当提供其他的内容来表示这个空间的意图,这样就能让使用辅助设备的用户知道其作用了。这种情况下,你可以空间添加aria-label属性

alert组件中所包含的图标是用来表示这是一条错误消息的,通过添加额外的.sr-only文本就可以让辅助设备知道着条提示所要表达的意思了

下拉菜单

用于显示链接列表的可切换、有上下文的菜单。下拉菜单的JavaScript插件让它具有了交互性

输入框组

通过在文本输入框input前面、后面或是两边加上文字或按钮,可以实现对表单空间的拓展。为.input-group赋予.input-group-adden或.input-group-btn类,可以给.inform-control的前面或后面添加额外的元素

只支持文本输入框input
这个请避免shiyongselect元素,因为Webkit浏览器不能完全绘制它的样式
避免使用textarea元素,由于他们的rows属性在某些情况下不被支持

输入框组中的工具提示和弹出框需要特别的设置
为.input-group中所包含的元素应用工具提示或popover时,必须设置container:'body’参数,为的是避免意外的副作用

不要和其他组件混用
不要将表单或栅格列类直接和输入框混合使用。而实将输入框组潜逃到表单组或栅格相关元素的内部

按钮组