bootstrap笔记

简介: bootstrap笔记

表单作用:表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。表单用于向服务器传输数据。用户在浏览器中的注册页面添加信息后,点击提交,此时是将这些信息提交至某个服务器,服务器根据提交的信息将注册信息保存. 这个过程就需要使用form标签了

对输入元素使用form-control 可以去除阴影,边框附带淡蓝色,输入状态更加柔和。

Bootstrap 3 的 container class 用于包裹页面上的内容。

.container {
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
}

通过上面的代码,把 container 的左右外边距(margin-right、margin-left)交由浏览器决定。

请注意,由于内边距(padding)是固定宽度,默认情况下容器是不可嵌套的。

Bootstrap 网格系统(Grid System)的工作原理

网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了 Bootstrap 网格系统是如何工作的:

行必须放置在 .container class 内,以便获得适当的对齐(alignment)和内边距(padding)。

网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如,要创建三个相等的列,则使用三个 .col-xs-4。

1

Bootstrap 中用到一些 HTML元素和CSS属性需要将页面设置为 HTML5 文档类型,即在页面顶部添加“”

2

布局容器:Bootstrap 需要为页面内容和栅格系统包裹一个 .container或container-fluid(占据全部视口viewport的容器)容器。

3

栅格系统,Bootstrap 提供了一套最多12列的流式栅格系统,通过 .row表示行 和 .col-xs-4 这种表示宽度的列快速创建栅格布局。

4

Bootstrap 排版、链接样式设置了基本的全局样式。

font-size 设置为 14px,line-height 设置为 1.428。

(段落)元素还被设置了等于 1/2 行高(即 10px)的底部外边距(margin)。 基础样式 【排版】, 1. 标题,可以用来.h1 到 .h6 类给内联属性的文本赋予标题样式,标题内通过 标签或带.small 类的元素标记副标题。 主体文本:.lead 类让段落突出显示。 2. 内联文本,使用 标签表示标注文本,删除,无用,插入,下划线,小号(父容器字体大小的 85%),着重,斜体。 3. 文本对齐类,text-left,text-center,text-right,text-justify,text-nowrap 4. 文本大小写类,text-lowercase,text-uppercase,text-capitalize 5. 缩略语类,为 元素设置 title属性并使用.initialism 类让 font-size 变得稍微小些。例:ATTR 6. 地址,以日常使用的格式呈现,在行结尾加 保留需要的样式即可。 7. 引用,将 HTML 元素包裹在

中即可表现为引用样式。对于直接引用,建议用

标签。 8. 列表,list-unstyled类移除默认 list-style 样式和左侧外边距的一组元素(只针对直接子元素)。list-inline类通过设置 display: inline-block; 并添加少量的内补(padding),将所有元素放置于同一行。dl-horizontal类让

内的短语及其描述排在一行。 【代码】 标签包裹内联样式的代码片段, 标签标记用户通过键盘输入的内容,
相关文章
|
3月前
|
前端开发 JavaScript
BootStrap使用笔记+案例(下)
BootStrap使用笔记+案例
21 0
|
3月前
|
前端开发 Python
BootStrap使用笔记+案例(上)
BootStrap使用笔记+案例
32 0
|
3月前
|
前端开发
bootstrap例子笔记
bootstrap例子笔记
|
前端开发
后端小白的Bootstrap笔记(三)
后端小白的Bootstrap笔记(三)
96 0
|
前端开发
后端小白的Bootstrap笔记(二)
后端小白的Bootstrap笔记(二)
157 0
|
前端开发
后端小白的Bootstrap笔记(一)
后端小白的Bootstrap笔记(一)
167 0
|
前端开发 开发者
Bootstrap响应式前端框架笔记二十——工具条的应用
Bootstrap响应式前端框架笔记二十——工具条的应用
104 0
Bootstrap响应式前端框架笔记二十——工具条的应用
|
前端开发 JavaScript 人机交互
Bootstrap响应式前端框架笔记十九——标签页的使用
Bootstrap响应式前端框架笔记十九——标签页的使用
258 0
Bootstrap响应式前端框架笔记十九——标签页的使用
|
前端开发 JavaScript 开发者
Bootstrap响应式前端框架笔记十八——导航滚动监听
Bootstrap响应式前端框架笔记十八——导航滚动监听
213 0
Bootstrap响应式前端框架笔记十八——导航滚动监听
|
前端开发
Bootstrap响应式前端框架笔记十七——下拉列表交互
Bootstrap响应式前端框架笔记十七——下拉列表交互
141 0