BootStrapCss(v3)样式基础笔记(简单清晰)

1.为了给段落添加强调文本，则可以添加 class=”lead”，这将得到更大更粗、行高更高的文本，如下面实例所示：

<p class="lead">你好啊</p>

2.<small>（设置文本为父文本大小的 85%）

3.Bootstrap 定义<abbr>元素的样式为显示在文本底部的一条虚线边框，当鼠标悬停在上面时会显示完整的文本（只要您为 title 属性添加了文本）例如

<abbr title="World Wide Web">WWW</abbr><br>

4. .dl-horizontal 把<dl> 行中的属性与描述并排显示。
.list-inline把<ul><ol>行中的属性与描述并排显示。例如

<ul class="list-inline"><li>Item 1</li><li>Item 2</li>
</ul>

<dl class="dl-horizontal"><dt>Description</dt><dd>Item 1</dd>
</dl>

5.表格
Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素：
下列表样式可用于表格中：
.table:为任意<table> 添加基本样式 (只有横向分隔线)(包含大小尺寸等)
.table-striped 在 <tbody>内添加斑马线形式的条纹 ( IE8 不支持)
.table-bordered 为所有表格的单元格添加边框
.table-hover 在<tbody> 内的任一行启用鼠标悬停状态(颜色改变)
.table-condensed 让表格更加紧凑

下表的类可用于表格的行或者单元格：
.active 将悬停的颜色应用在行或者单元格上 (相当于默认选中)
.success 表示成功的操作 (绿色)
.info 表示信息变化的操作 (浅蓝色)
.warning 表示一个警告的操作 (黄色)
.danger 表示一个危险的操作(红色)

响应式表格：table-responsive
在表格外面套一个<div class="table-responsive"></div>就OK了

6.表单
1：.form-control 可以将 <input>、<textarea> 和 <select> 元素宽度属性为 width: 100%;
.control-label 可以将元素宽度属性为 width: 100%;

.form-group 一般写在表单元素外面，可以获取更好的排列效果，例如

<div class="form-group"><label >Email address</label><input type="email" class="form-control"  placeholder="Email"></div>

2:在元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block (也就是排在一行)
在元素添加 .form-horizontal类可以将 label 标签和控件组水平并排布局(就是独占一行)

3:标签中有时候加了 class=“sr-only” 它就相当于注释！不会显示在页面中

7：按钮
1.class=“btn btn-default” 基本样式没有颜色
2.class=“btn btn-primary” 首选项蓝色
3.class=“btn btn-success” 成功绿色
4.class=“btn btn-info” 一般信息浅蓝
5.class=“btn btn-warning” 警告橘黄色
6.class=“btn btn-danger” 危险红色
7.class=“btn btn-link” 链接
例如：

<button type="button" class="btn btn-default">（默认样式）Default</button>

按钮大小:
.btn-lg、.btn-sm 或 .btn-xs 分别为大小超小按钮
例如：

<button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>

通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。
例如：

<button type="button" class="btn btn-primary btn-lg btn-block">（块级元素）Block level button</button>

8：图片
1.通过为图片添加 .img-responsive 类可以让图片支持响应式布局
注意：如果需要让使用了.img-responsive 类的图片水平居中，请使用 .center-block 类，不要用 .text-center

2.图片形状

<img src="..." alt="..." class="img-rounded"> 有四个圆角的照片
<img src="..." alt="..." class="img-circle">   圆形照片
<img src="..." alt="..." class="img-thumbnail"> 带相框

9：辅助类
1.情境文本颜色(也就是给一行文字加颜色)

<p class="text-muted">...</p>  灰白
<p class="text-primary">...</p> 蓝色
<p class="text-success">...</p> 绿色
<p class="text-info">...</p> 浅蓝
<p class="text-warning">...</p> 黄色
<p class="text-danger">...</p> 红色

2.情境背景色

<p class="bg-primary">...</p> 蓝色
<p class="bg-success">...</p> 绿色
<p class="bg-info">...</p> 浅蓝
<p class="bg-warning">...</p> 黄色
<p class="bg-danger">...</p> 红色

3.三角符号：<span class="caret"></span>

10.下面是一些基本样式：

BootStrapCss(v3)样式基础笔记(简单清晰)相关推荐

html入门基础笔记(简单实用)
一.初识html 1.HTML:Hyper Text Markup Language(超文本标记语言) java是一门编译性语言 html是一门解释性的标记语言超文本:文字.图片.音频.视频.动画. ...
java基础笔记简单回忆
0. 自述自从大学毕业后开始做java开发有几年了,但是都是用现在比较流行的一些框架蒙头写业务代码,总有一种自己水平不行的感觉故而决定重新开始在将java基础视频(待我看完后在分享视频网盘 ...
红宝书背诵笔记 — 简单基础词语
简单基础词 a开头的简单基础词 b开头的简单基础词 c开头的简单基础词 d开头的简单基础词 e开头的简单基础词 f开头的简单基础词 g开头的简单基础词 h开头的简单基础词 i开头的简单基础词 j开头的 ...
HTML5基础——笔记
HTML5基础--笔记近几年来,互联网+.大数据.云计算'物联网'虚拟现实'人工智能.机器学习.移动互联网等IT相关新名词.新概念层出不穷,相关产业发展如火如荼.互联网+移动互联网已经深入到人民日常 ...
Node.js基础笔记
Node.js基础笔记 1. NodeJS入门基础 1.1 NodeJS 介绍 1.1.1 NodeJS 是什么 1.1.2 NodeJS 的优势 1.1.3 NodeJS 的技术特性 1.1.4 N ...
HTML-CSS基础笔记
HTML-CSS基础笔记文章目录 HTML-CSS基础笔记一.html的发展历程二.常用声明方式三. HTML的注释四. 常用的标签 4.1.img标签 4.2. a标签 4.3. em标签 ...
Andrew Ng-机器学习基础笔记（下）-Python实现代码
目录前言: 10. 应用机器学习的建议 10.1 决定下一步做什么 10.2 评估一个假设 10.3 模型选择和交叉验证集 10.4 诊断误差和方差 10.5 正则化和偏差/方差 10.6 学习曲线 ...
HTML5、CSS3基础笔记
HTML5 & CSS3基础笔记 HTML html的基本格式实体 meta标签语义化标签-01 块和行内语义化标签-02 列表超链接介绍相对路径超链接的其他用法图片标签图片格 ...
JQuery 基础笔记
JQuery 基础笔记 1. jQuery 概述 1.1 jQuery 是什么? 1.2 jQuery 简单应用 1.3 jQuery 功能应用 1.4 jQuery 技术优势 1.5 jQuery ...

BootStrapCss(v3)样式基础笔记(简单清晰)

BootStrapCss(v3)样式基础笔记(简单清晰)相关推荐

最新文章

热门文章