bootstrap学习小结

bootstrap简介

什么是bootstrap?

2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。在github上开源之后,迅速成为该站上最多人watch&fork的项目。大量工程师踊跃为该项目贡献代码,社区惊人地活跃,代码版本进化非常快速,官方文档质量极其高(可以说是优雅),同时涌现了许多基于Bootstrap建设的网站:界面清新、简洁;要素排版利落大方。

GitHub上这样介绍 bootstrap:

  • 简单灵活可用于架构流行的用户界面和交互接口的html、css、javascript工具集。
  • 基于html5、css3的bootstrap,具有大量的诱人特性:友好的学习曲线,卓越的兼容性,响应式设计,12列格网,样式向导文档。
  • 自定义JQuery插件,完整的类库,基于Less等。

Bootstrap样式

Bootstrap框架在这一部分做了一定的变更,不再一味追求归零,而是更注重重置可能产生问题的样式(如,body,form的margin等),保留和坚持部分浏览器的基础样式,解决部分潜在的问题,提升一些细节的体验,具体说明如下:

  • 移除body的margin声明
  • 设置body的背景色为白色
  • 为排版设置了基本的字体、字号和行高
  • 设置全局链接颜色,且当链接处于悬浮“:hover”状态时才会显示下划线样式

强调

b,strong 让文本直接加粗

.lead 让一个段落p突出显示

em,i 还可以通过使用标签或将元素设置样式font-style值为italic实现斜体

  • .text-muted:提示,使用浅灰色(#999)

  • .text-primary:主要,使用蓝色(#428bca)

  • .text-success:成功,使用浅绿色(#3c763d)

  • .text-info:通知信息,使用浅蓝色(#31708f)

  • .text-warning:警告,使用黄色(#8a6d3b)

  • .text-danger:危险,使用褐色(#a94442)

对齐风格

  • .text-left:左对齐

  • .text-center:居中对齐

  • .text-right:右对齐

  • .text-justify:两端对齐

列表

.list-unstyled 给无序列表添去除默认的列表样式的风格。

.dl-horizontal 给定义列表设置为水平(即将dt设置为浮动)

代码风格

1、code:一般是针对于单个单词或单个句子的代码,淡粉底
2、pre:一般是针对于多行代码(也就是成块的代码),灰底
3、kbd:一般是表示用户要通过键盘输入的内容,黑底

在pre标签上添加类名“.pre-scrollable”,就可以控制代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条。

表格

Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。

  1. .table:基础表格

  2. 给表格设置了margin-bottom:20px以及设置单元内距

  3. 在thead底部设置了一个2px的浅灰实线

  4. 每个单元格顶部设置了一个1px的浅灰实线

  1. .table-striped:斑马线表格(隔行有一个浅灰色的背景色)

  2. .table-bordered:带边框的表格(中规中矩)

  3. .table-hover:鼠标悬停高亮的表格(当你鼠标悬浮在某一单元格上时,单元格所在行的背景色都会变成浅灰色。)

  4. .table-condensed:紧凑型表格(变挤而已)

  5. .table-responsive:响应式表格就是当屏幕小于768px时,表格下方会出现滚轮效果等)

表格行的对应类:

bootstrap学习小结_第1张图片
表格图

表单

表单中常见的元素主要包括:文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。

表单内容用for和id进行元素绑定

form-horizontal 水平表单,标签居左,表单控件居右

sr-only 将标签隐藏

为了让控件在各种表单风格中样式不出错,需要添加类名“form-control”

控件input必须添加type类型来定义样式

控件select增加multiple多行显示

textarea设置rows可定义其高度,在from-control中无序设置cols(宽度)属性

input-sm让控件比正常大小更小

input-lg让控件比正常大小更大

图像和图标

图像

可通过src="http://placehold.it/140x140"获取图像样式

  1. img-responsive:响应式图片,主要针对于响应式设计

  2. img-rounded:圆角图片

  3. img-circle:圆形图片

  4. img-thumbnail:缩略图片

图标

通过添加类,如搜索图标,即glyphicon glyphicon-search

你可能感兴趣的:(bootstrap学习小结)