Bootstrap快速学习笔记(1)排版系列之一

欢迎收看大奥编写的Bootstrap快速学习笔记(1)排版系列之一

本学习笔记根据[慕课网]教程修改而来,用它学习Bootstrap,将会带来全新的体验哦:

  • 标题
  • 段落
  • 强调内容
  • 粗体和斜体
  • 强调相关的类
  • 文本对齐风格
  • 列表
  • 代码展示

详细介绍

  • 标题 Bootstrap重写了h1-h6标题的样式属性并自定义了.h1-.h6类,并用small标签来显示副标题
  • 段落 Bootstrap重写了p标签的样式属性
  • 强调内容 .lead类改变文本样式
  • 粗体和斜体 粗体<strong><b>斜体<em><i>
  • 强调相关的类主要涉及到使用不同颜色显示不同信息,通过class类来实现 .text-muted:提示 浅灰色;.text-primary:主要 蓝色;.text-success:成功 浅绿色;.text-info:通知信息 浅蓝色;.text-warning:警告 黄色;.text-danger:危险 褐色;
  • 文本对齐风格 自定义了四种对齐方式,通过class类来实现 .text-left:左对齐;.text-center:居中对齐;.text-right:右对齐;.text-justify:两端对齐;
  • 列表有序列表<ol>;无序列表<ul>;去点列表,通过class类来实现 .list-unstyled;内联列表,通过class类来实现 .list-inline,主要用于水平导航栏;定义列表<dl><dt><dd>;水平定义列表,通过class 类来实现 .dl-horizontal;
  • 代码展示<code>主要用于单个单词或单个句子的代码显示;<pre>用于多行代码也就是代码块的显示, 并可以通过class类 .pre-scrollable来给<pre>中的代码块展示框产生滚动条;<kbd>用于用户输入提示;

注意:知识的积累是一个漫长的过程,请继续关注后续内容

时间: 2024-10-11 07:46:56

Bootstrap快速学习笔记(1)排版系列之一的相关文章

Bootstrap快速学习笔记(1)排版系列之二

欢迎收看大奥编写的Bootstrap快速学习笔记(1)排版系列之二 本学习笔记根据[慕课网]教程修改而来,用它学习Bootstrap,将会带来全新的体验哦: 表格 表格行的类 详细介绍 表格表格是Bootstrap的基础组件之一,有一个基础样式和四个附加样式以及一个响应式样式,全部通过class类来实 现,.table:基础表格,这是无论哪种类型的表格都必不可少的类:.table-striped:斑马线表格,更具可读性:.table- bordered:带边框的表格:.table-hover:鼠

Bootstrap快速学习笔记(2)表单系列之二

欢迎收看大奥编写的Bootstrap快速学习笔记(2)表单系列之二 本学习笔记根据[慕课网]教程修改而来,用它学习Bootstrap,将会带来全新的体验哦: 表单控件大小 表单控件状态 按钮 图像 详细介绍 表单控件大小表单控件大小可以通过给表单控件添加class类来实现,如果想要比较大,则添加input-lg类,如果想要比较小, 则添加input-sm类,但这仅是对高度进行了处理,如果要对宽度进行处理,需要在每个input控件外围添加div容器并带有col-xs-4类,并 且要在这组控件的外围

Bootstrap快速学习笔记(2)表单系列之一

欢迎收看大奥编写的Bootstrap快速学习笔记(2)表单系列之一 本学习笔记根据[慕课网]教程修改而来,用它学习Bootstrap,将会带来全新的体验哦: .form-control类 水平表单 内联表单 详细介绍 form-control类把该类直接添加到控件上: 1.宽度变成了100%:2.设置了一个浅灰色(#ccc)的边框:3.具有4px的圆角:4.设置阴影效果,并且元素得到焦点之时,阴影和边框效果会有所变化:5.设置了placeholder的颜色为#999 水平表单最外层form标签要

bootstrap 新手学习笔记 代码整理

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 滚动监听(Scrollspy)插件方法</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <script src="js/jqu

AngularJs学习笔记--Guide教程系列文章索引

在很久很久以前,一位前辈向我推荐AngularJs.但当时我没有好好学习,仅仅是讲文档浏览了一次.后来觉醒了……于是下定决心好好理解这系列的文档,并意译出来(英文水平不足……不能说是翻译,有些实在是看不懂,希望大家在参观的过程中指出其中的错误).经过1个多月断断续续的努力,终于把Guide里面的文章基本上都弄出来.Guide中的部分章节,由于重复的部分似乎有点多,而且篇幅较短,这里就没有列出来. 文章列表如下: AngularJs学习笔记--bootstrap AngularJs学习笔记--ht

AJAX快速学习笔记

可关注我的个人微信公众号:卟野iiiiiiiya AJAX快速学习笔记: https://mp.weixin.qq.com/s?__biz=MzI0MDY0NzI3Mw==&tempkey=OTMwX2NOeUIrdzFEaThtMFBiUlJYdFhqcWViaHY1bFlQUTdmU1RrUnpkc1IzQmNfWENHVXFZb2ZLajhURlFwbzZoOF80RlA0THdQeGVYcDB2OENSdnBKcUNHdU9QRER0OWxkUE9YUGp0SU90WmwwWVl1SnJ

LoadRunner学习笔记--未经排版

LoadRunner学习笔记 并发用户数量: 与服务器进行交互的在线用户数量 请求响应时间 从客户端发送请求到得到整个响应的时间 一般包括网络响应时间+server的响应时间 事务相应时间 完成这个事务所用的时间 是性能测试中重点关注的指标 吞吐率 单位时间在网络上传输的数据量(吞吐量:网络上传输的数据总量) 指从server返回客户端的 是衡量网络性能的主要指标 TPS 每秒钟系统能够处理事务的数量 点击率 每秒发送的HTTP请求的数量 点击率越大对server的压力也就越大 资源利用率 对不

Python学习笔记--未经排版

Python 学习笔记 Python中如何做到Print() 不换行 答:Print("输出内容",end='不换行的分隔内容'),其中end=后面为2个单引号 注:在Python 2.x中,Print "输出内容", 即在输出内容后加一逗号 Python中 is 和 == 的区别 答:Python中的对象包含三要素:id.type.value 其中id用来唯一标识一个对象,type标识对象的类型,value是对象的值 is判断的是a对象是否就是b对象,是通过id来

Java快速学习笔记01

这一波快速学习主要是应付校招笔面试用,功利性质不可避免. 学习网址: http://www.runoob.com/java/java-tutorial.html 执行命令解析: 以上我们使用了两个命令 javac 和 java. javac 命令用于将 java 源文件编译为 class 字节码文件,如: javac HelloWorld.java. 运行javac命令后,如果成功编译没有错误的话,会出现一个 HelloWorld.class 的文件. java 命令可以运行 class 字节码