11.28-12.1日 bootstrap的学习笔记

BootStrap 学习笔记

准确说是一个CSS框架。

11.29

1.bootstrap安装：

   

Bootstrap要求必须是HTML5类型

移动端设备的真实宽度：

name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

布局容器：

.container

 

栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

.row 一行12列

.col-md-4 占三列的宽（每列四份）

想要在一行中出现n个相同的布局，则用12/n。

栅格系统工作原理：

• “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
• 通过“行（row）”在水平方向创建一组“列（column）”。
• 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
• 类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
• 通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
• 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
• 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
• 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
• 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-*栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-*不存在， 也影响大屏幕设备。

可以嵌套使用，把子标签当成下一级的父标签，接着分成12份。

  //可以在前面空出一个宽为4份的格子。

  //会发生向左浮动

 

3、排版，代码，按钮

1. 标题（.page-header）：着重强调了一下，并且标题的下面增加了一条灰色的线
2.  段落 (.lead) ：对段落也有了强调的功能 调节了样式，间距这些
3. 标题样式 ：
4. 内联文本元素：

 

1. Mark text <.mark> hightlight 高光标记。
2. del删除线
3. 无用文本（.s）和删除线一样
4. Small <.small> 字体稍微变小一点。
5. 文本对齐 <.text-left> 左边对齐  <.text-center> 中间对其 <.text-right> 右边

<.text-justify> 领端对齐  

1. 文本大小写  <.text-lowercase> 全部小写 <.text-uppercase>全部大写

<.text-capitalize> 单词首字母大写

1. 插入文本（.ins）
2. 带下划线的文本（.u）和插入文本是一样的
3. 小号文本（.small）

1. 列表

有序无序列表:

• …

有序列表:

1. …

无样式列表

• …

内联列表

无样式列表<.list-unstyled>

1. 描述（自定义列表）带有描述的列表
2. 水平排列列表<.dl-horizontal>

代码

1. 标签 多行代码可以使用 ，按照原格式输出，也就是可以实现代码的换行这种，并且在外面还加了一个div框，背景是灰色的，圆角。

2. 标签，字体和背景都会变成红色的，有一种代码的感觉
3. 标签，对应字段变成斜体，和一样
4. <.kbd>对应字段背景变黑
5. 程序输出 标记程序输出的内容

 

表格：

<.table>  //生成比较专业的表格，会调节一下边距

<. table-striped >   // 会出现横条的行

<. table-bordered >  //会出现竖条的列

<. table-hover >   //会出现鼠标移动的一些效果，移动到哪一格子，哪一个会背景会改变

<. table-condensed > //视窗变下的时候，会紧缩表格，其实不加也会紧缩，但是效果会有一点点不同。