bootstrap 笔记01

bootstrap源码样式:

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

1,<small> bootstrap.css文件中第407行~第443行
2, 段落(正文文本) bootstrap.css文件中第274行~280行*/
3,强调内容lead bootstrap.css文件第470行~480行*/
除此之外,Bootstrap还通过元素标签:<small>、<strong>、<em>和<cite>给文本做突出样式处理。
/*源码查看bootstrap.css文件第55行~第58行*/

b,strong {
font-weight: bold; /*文本加粗*/
}

/*源码查看bootstrap.css文件第481行~第484行*/

small,.small {
font-size: 85%; /*标准字体的85%,也就是14px * 0.85px,差不多12px*/
}

/*源码查看bootstrap.css第485行~第487行*/

cite {
font-style: normal;
}

4,粗体:strong 或b 标签时加粗
5,斜体:em 和 i标签,font-style:italic
6,强调相关的类 bootstrap.css文件第500行~第532行:

.text-muted:提示,使用浅灰色(#999)
.text-primary:主要,使用蓝色(#428bca)
.text-success:成功,使用浅绿色(#3c763d)
.text-info:通知信息,使用浅蓝色(#31708f)
.text-warning:警告,使用黄色(#8a6d3b)
.text-danger:危险,使用褐色(#a94442)

7,文本对齐风格 bootstrap.css文件第488行~第499行:
? .text-left:左对齐
? .text-center:居中对齐
? .text-right:右对齐
? .text-justify:两端对齐 (在使用中文中,谨慎使用)

8,列表
? 普通列表
? 有序列表
? 去点列表
? 内联列表
? 描述列表
? 水平描述列表

9,在Bootstrap中默认情况下无序列表和有序列表是带有项目符号的,通过给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格。

10,列表-内联列表 添加类名 list-inline,为制作水平导航而生
bootstrap.css文件第584行~第593行*/

11,列表-定义列表
,Bootstrap并没有做太多的调整,只是调整了行间距,外边距和字体加粗效果。
/*源码请查看bootstrap.css文件第594行~第607行*/

12,列表-水平定义列表
添加类 dl-horizontal /*源码请查看bootstrap.css文件第608行~第621行*/

13,代码(很酷)
1、使用<code></code>来显示单行内联代码
2、使用<pre></pre>来显示多行块代码
3、使用<kbd></kbd>来显示用户输入代码

14,pre 元素,当代码块超过 340高的时候,就会出现垂直滚动条,添加类: pre-scrollable
bootstrap.css第731行~第734行*/

15,表格
? .table:基础表格 第1402行~第1441行
? .table-striped:斑马线表格 第1465行~第1468行:
? .table-bordered:带边框的表格 第1450行~第1464行
? .table-hover:鼠标悬停高亮的表格
? .table-condensed:紧凑型表格
? .table-responsive:响应式表格,可以用在外面的div上

16,表格-表格行的类
.active 表示当前活动的信息
.success 表示成功或正确的行为
.info 表示中立的信息或行为
.warning 表示警告
.danger 表示危险或错误的行为

17,基础表单 /*源码请查阅bootstrap.css文件第1631行~第1652行*/

时间: 2024-07-29 08:09:43

bootstrap 笔记01的相关文章

【opengl 学习笔记01】HelloWorld示例

<<OpenGL Programming Guide>>这本书是看了忘,忘了又看,赶脚还是把笔记做一做心里比较踏实,哈哈. 我的主题是,好记性不如烂笔头. ================================================================ 1. 下载glut库 glut库地址为:www.opengl.org/resources/libraries/glut/glutdlls37beta.zip glut全称为:OpenGL Utilit

《30天自制操作系统》笔记(01)——hello bitzhuwei’s OS!

<30天自制操作系统>笔记(01)--hello bitzhuwei's OS! 最初的OS代码 1 ; hello-os 2 ; TAB=4 3 4 ORG 0x7c00 ; 指明程序的装载地址 5 6 ; 以下这段是标准FAT32格式软盘专用的代码 7 8 JMP entry 9 DB 0x90 10 DB "HELLOIPL" ; freeparam 启动区的名称可以是任意的字符串(8字节) 11 DW 512 ; 每个扇区(sector)的大小(必须为512字节)

HTTP 学习笔记01

HTTP   hypertext transfer protocol (超文本传输协议) TCP/IP 协议集中的一个应用层协议 用于定义WEB浏览器与WEB服务器之间交换数据的过程以及数据本身的格式 HTTP 1.0  会话方式 HTTP 1.1 方式 HTTP 请求消息结构 一个请求行,若干消息头,以及实体内容 其中的一些消息头和实体内容都是可选的,消息头和实体内容之间要用空行隔开. GET   方式下是没有实体内容的 POST .PUT.DELETE 方式下请求消息才可以包含实体内容 HT

SWIFT学习笔记01

1.Swift,用来判断option是不是nil,相当于OC的 if(option) if let name = option{ greeting = "if=====" }else{ greeting = "else===" } 2.运行switch中匹配到的子句之后,程序会退出switch语句,并不会继续向下运行,所以不需要在每个子句结尾写break. 3.//使用..创建的范围不包含上界,如果想包含的话需要使用...,集合上,就是[)与[]的关系 for i

C++ GUI Qt4学习笔记01

C++ GUI Qt4学习笔记01 qtc++signalmakefile文档平台 这一章介绍了如何把基本的C++只是与Qt所提供的功能组合起来创建一些简单的图形用户界面应用程序. 引入两个重要概念:一个是“信号和槽”,另一个是“布局”. 窗口部件(widget)是用户界面的一个可视化元素,相当于windows系统中的“控件”和“容器”.任意窗口部件都可以用作窗口. 1.1Hello Qt 正确安装Qt4开发环境,创建工程目录hello,源代码文件名为hello.cpp,进入hello目录 (1

【VB6笔记-01】 读取Excel绑定到DataGrid

Private Sub cmdOpen_Click() CommonDialog1.Filter = "Excel???t(*.xlsx)|*.xlsx" CommonDialog1.DialogTitle = "????" CommonDialog1.ShowOpen Me.txtFilePath.Text = CommonDialog1.FileName Dim DBconn As ADODB.Connection Dim strSQL As String Di

HTML学习笔记01

HTML学习笔记 HTML学习笔记01 一.HTML的定义 1 HTML就是"HyperText Markup Language","超文本标记语言".2 HTML不是<color="red">编程语言,而是一种标记语言.3 标记语言是一套标记标签.4 HTML使用标记标签来描述网页. 二.HTML标签 1 HTML标签是由尖括号包围的关键词.2 HTML标签通常是成对出现的.3 标签对中的第一个标签是开始标签,第二个标签是结束标签.

ijkplayer阅读笔记01

ijkplayer阅读笔记01 1.这章解决ijkplayer播放库初始化部分,直接贴上流程伪代码如下: IjkMediaPlayer_native_setup { ijkmp_android_create(message_loop){ mp->ffplayer->vout = SDL_VoutAndroid_CreateForAndroidSurface();{ SDL_VoutAndroid_CreateForANativeWindow();{ vout->create_overla

Log4j笔记----01

新建普通java project 项目创建文件如上 log4j.properties中编辑属性 ### 设置### log4j.rootLogger = debug,stdout,D,E ### 输出信息到控制台 ### log4j.appender.stdout = org.apache.log4j.ConsoleAppender log4j.appender.stdout.Target = System.out log4j.appender.stdout.layout = org.apach