Bootstrap 中 类别样式名称和 标签等内容(持续更新中。。。)

每次看每次都觉得新鲜,用起来的时候却还是习惯性的忘记其原有的东西,自己再写出来一个自己都觉得是多余的内容。所以此次决定再捋一遍,记录每个class 和标签,具体的再不断的完善更新吧,下次再用直接查笔记,就不用去官网了。哈哈(想得美(─.─|||)

一、页面排版:

1.页面主体

全局 font-size:14px; line-height:1.428(即20px); color:#333;

<p> 段落元素为 1/2 行高(即10px);

  1.  lead 
.lead  {

          margin-bottom: 20px;

          font-size: 16px;

          font-weight: 300;

          line-height: 1.4;

  }

@media (min-width: 768px){
  .lead{
    font-size:21px;
  }
}

2.标题  ( 内联元素定义class=(.h1~h6))

<h1> //36px

<h2> //30px

<h3> //24px

<h4> //18px

<h5> //14px

<h6> //12px

可以嵌入 <small>元素作为副标题,h1~h3下的small, font-size:65%;(分别为23.4px ;19.5px; 15.6px) h4~h6下,font-size:75%;(分别为:13.5px;10.5px;9px;), 样式更改:color:#777;line-height:1;font-weight:400; 其余样式参考官网。

3.内联文本元素

<mark>      // 添加标记

<del>         // 删除文本

<s>            // 无用本文

<ins>         // 插入的文本

<u>           // 下划线文本 效果同上

<small>    // 标准字号的85%

<strong>  // 加粗 700

<em>       // 倾斜

4.对齐方式

.text-left           //  居左

.text-right        //  居右

.text-center     //  居中

.text-justify    //  两端对齐,支持度不佳

.text-nowrap  //  不换行

5.英文文本大小写

.text-lowercase     //  小写

.text-uppercase    //  大写

.text-capitalize    //  首字母大写

6.缩略语

<abbr>  //  没有被复写,可添加 class=“initialism”

.initialism

.initialism{
     font-size:90%;
     text-transform:uppercase;
}

7.地址文本

<address>  //  去掉倾斜,设置行高,底部20px

8.引用为本

<blockquote>  //  border-left:5px solid #eee; font-size:17.5px; margin:0 0 20px; padding:10px 20px;

.blockquote-reverse      // 反向(border-right:5px solid #eee; border-left:0; padding-right:15px; padding-left:0; text-align:right;)

blockquote.pull-right   //  反向 (效果同上)

9.列表

.list-unstyled  //  ul 移除默认样式

.list-inline      //  ul 设置成内联方式

.dl-horizontal  //  dl 水平排列描述列表

10.代码

<code>  //  内联代码

<kbd>  //  用户输入

<pre>  //  代码块

<var>  //  表示标记变量,没有复写css

   <samp>  //  代表程序输出,没有复写css

11.表格

*基于table添加class*

    .table  //  基本的表格样式

.table-striped   //  条纹状的表格,<tbody>产生一行隔一行加单色背景效果

.table-bordered  //  增加边框

    .table-hover  //  <tbody>下表格悬停鼠标实现背景效果

*在tr上添加class,设置每一行的背景样式*

 .success      //  成功或者积极的动作

.active       //   鼠标悬停在行或者单元格上

   .success      //  成功或者积极的动作

   .success      //  成功或者积极的动作

   .success      //  成功或者积极的动作

时间: 2024-07-30 16:29:10

Bootstrap 中 类别样式名称和 标签等内容(持续更新中。。。)的相关文章

vue项目常用方法封装,持续更新中。。。

vue项目中可以直接使用 1.常用工具类untils.js中 /* * 验证手机号是否合格 * true--说明合格 */ export function isPhone(phoneStr){ let myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/; if (!myreg.test(phoneStr)) { return false; } else { return true; } } /* * 验证身份证号是否合格 * true--说明合格 */ export fun

前端面试题总结——HTML(持续更新中)

前端面试题总结--HTML(持续更新中) 1.什么是HTML? HTML:HyperText Markup Language超文本标记语言 2.XHTML和HTML有什么区别 HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的标记语言 3.简述一下你对HTML语义化的理解? html语义化让页面的内容结构化,结构更清晰,便于对浏览器.搜索引擎解析; 前端学习圈:767273102 ,从最基础的HTML+CSS+JavaScript.jQuery,Ajax,node,angula

Android 系统中,那些能大幅提高工作效率的 API 汇总(持续更新中...)

前言 "条条大路通罗马."工作中,实现某个需求的方式往往不是唯一的,这些不同实现方式不仅表现在代码质量上,还影响着我们的工作效率.就像,在 Android 系统中,总有那么一些鲜为人知的 API 能够减少我们很多零碎的工作量.于是,就想凭着一些经验,整理一些常用的,找个地方归纳总结,也供日后翻阅. getResources().getIdentifier(String name, String defType, String defPackage) 根据资源名称获取资源 id.正常情况

Atom使用记录(持续更新中)

部分内容取自:http://www.jianshu.com/p/dd97cbb3c22d,我自己也在使用,持续更新中 Atom安装插件在窗口中File---Setting---install 在里面进行搜索就行. minimap: 为Atom加上一个代码预览地图,就想sublime中右侧的缩略图一样,效果如图. Emmet(和sublime一样的) simplified-chinese-menu:Atom的简体中文语言包,完整汉化,兼容所有已发布的版本Atom. autoclose-html:h

资源向导之 JOS 计划 #持续更新中# MIT 6.828

JOS 计划 #持续更新中# 童鞋,上网要科学上网,做lab也要科学的做. 之前我一上来就做实验,很多资料都不知道.现在打算重新来过 方法: 0.xv6源码不要用MIT官网的那份,我的主机是Linux/Ubuntu 14.0各种编译error,我都改的想吐.后来直接用github上别人改好的,直接能跑起来没有编译错误的xv6. 1.按照MIT给出的课程安排表,每一次课的相关lecture必须全部过一遍. 2.要求的课堂作业必须完成,很多时候课程要求的任务是很轻松的,只要修改部分代码就行了.这里我

java开发中遇到的问题及解决方法(持续更新)

摘自 http://blog.csdn.net/pony12/article/details/38456261 java开发中遇到的问题及解决方法(持续更新) 工作中,以C/C++开发为主,难免与其他服务和Web进行交换,Java开发必不可少,又不想动用Eclipse大家伙,只能自己动手编写脚本进行Java代码的编译和运行,期间遇到的一些问题,记录下来供自己和大家参考.1)软件包不存在/软件包 javax.jms 不存在    这是由于javac编译时找不到javax.jms所在的软件包,因此将

【前端】Util.js-ES6实现的常用100多个javaScript简短函数封装合集(持续更新中)

Util.js (持续更新中...) 项目地址: https://github.com/dragonir/Util.js 项目描述 Util.js 是对常用函数的封装,方便在实际项目中使用,主要内容包含:数组类.浏览器类.日期类.函数类.数学类.媒体类.节点类.对象类.字符串类.类型检测类.正则表达式类等内容. 使用方法 1. 引入Bable transpiler以保证支持ES6 <script type="javascript/text" src="./browser

PTA|团体程序设计天梯赛-练习题目题解锦集(C/C++)(持续更新中……)

PTA|团体程序设计天梯赛-练习题目题解锦集(持续更新中) 实现语言:C/C++:      欢迎各位看官交流讨论.指导题解错误:或者分享更快的方法!! 题目链接:https://pintia.cn/problem-sets/994805046380707840/problems 目录 (点击对应题目即可进入相应题解--小声BB--) L1-001 Hello World (5 分) L1-002 打印沙漏 (20 分) L1-003 个位数统计 (15 分) L1-004 计算摄氏温度 (5

前端面试题总结——Html5(持续更新中)

前端面试题总结--H5(持续更新中) 1.HTML5 为什么只需要写 <!DOCTYPE HTML>? HTML5 需要doctype来规范浏览器的行为,让浏览器按照它们应该的方式来运行:HTML4.01基于SGML,所以需要对DTD进行引用,才能告知浏览器文档所使用的文档类型. 2.HTML5的form如何关闭自动完成功能? 给不想要提示的 form 或某个 input 设置为 autocomplete=off. 3.HTML5 中如何嵌入音频? 当前,audio 元素支持三种音频格式:&l