bootstrap 学习笔记(2)---- 排版
安装和栅格系统学完,这篇写的是排版
手册中排版的目录如下图

《标题,页面主题,内联文本元素,对齐,改变大小写,缩略语,地址,引用,列表》
手册中介绍那么多,其实并不是所有的都要去看看。很多都是没有必要的。
总结了几个要看的地方:
《标题,段落,mark标记,del删除线,small小号字体,文字文本对齐,文本大小写,无样式列表,内联列表,自定义列表(描述),水平排列列表》
现在对其做如下说明:
1、标题:
<h1 class="page-header">bootstrap前端框架</h1>
2、段落<p class="lead">fdsjfksdhfkfjfjsdkjfds;<del>agfdkjgh</del>dfjghfdghfdgds撒分<small>段函数返回的</small>是反攻倒算复合弓法的很多方v的v更改fdsjfksdhfkfjdsjksfjdkfjsdkjfds;agfdkjghdfjghfdghfdgds撒分段函数返回的是反攻倒算复合弓法的很多方v的v更改<p>
3、mark标记 :<mark>dsjksfjdk</mark>

4、del 删除线 <del>agfdkjgh</del>
5、小号字体<small>段函数返回的</small>
6、文字对齐方式: 讲了五种,3种有用 分别是左中右
<p class="text-left">dfsdhfdsjhfd</p>
<p class="text-center">dfsdhfdsjhfd</p>
<p class="text-right ">dfsdhfdsjhfd</p>
7、文本大小写:
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>
结果:

8、无样式列表:移除了默认的 list-style 样式和左侧外边距的一组元素(只针对直接子元素)。这是针对直接子元素的,也就是说,你需要对所有嵌套的列表都添加这个类才能具有同样的样式。
<ul class="list-unstyled">
<li>sfsdgfd</li>
<li>fgf</li>
</ul>
9、内联列表: 通过设置 display: inline-block; 并添加少量的内补(padding),将所有元素放置于同一行。
<ul class="list-inline">
<li>sfsdgfd</li>
<li>fgf</li>
<li>fgdfg</li>
<li>fghfdgdfhgt</li>
<li>skajdasjkhd</li>
</ul>
10、自定义列表,带有描述的短语列表:
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>
11、水平排列列表:
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>
内容原文内容挺多的,常用的这11项,记住就好了。
bootstrap 学习笔记(2)---- 排版的更多相关文章
- Bootstrap学习笔记(一) 排版
Bootsrap是一款优秀的前端开发框架,我从慕课网上开始学习Bootstrap,以下我学习过程中的一些笔记及代码. 首先学习排版: 从Bootstrap网站下载Bootstrap3中文文档(V3.3 ...
- Bootstrap学习笔记(二) 表单
在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...
- Bootstrap~学习笔记索引
回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...
- bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120
为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...
- bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111
基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...
- Bootstrap学习笔记-布局
Bootstrap学习笔记-布局 默认是响应式布局,就是你在改变页面的时候也不会出现乱的现象. <html><head> <meta charset="utf- ...
- Bootstrap学习笔记博客
本片博客用于记录之后要用到Bootstrap的学习笔记 概括: Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASC ...
- bootstrap学习笔记--bootstrap安装环境
Bootstrap 安装是非常容易的.此文是本人的学习汇总,便于以后查询学习,同时也希望给大家带来帮助. 下载 Bootstrap 您可以从 http://getbootstrap.com/ 上下载 ...
- Bootstrap学习笔记系列1-------Bootstrap网格系统
Bootstrap网格系统 学习笔记 [TOC] 简单网格 先上代码再解释 <!DOCTYPE html> <html> <head> <title>B ...
- bootstrap 学习笔记(1)---介绍bootstrap和栅格系统
学习前端许久,对于布置框架和响应浏览器用html 和javascript 写的有点繁琐,无意间看到这个框架,觉得挺好用的就开始学习了,但是这个框架上面有很多知识,不是所有的都要学的,故将学习笔记和觉得 ...
随机推荐
- Go -- etcd详解(转)
CoreOS是一个基于Docker的轻量级容器化Linux发行版,专为大型数据中心而设计,旨在通过轻量的系统架构和灵活的应用程序部署能力简化数据中心的维护成本和复杂度.CoreOS作为Docker生态 ...
- 7.【nuxt起步】-Nuxt与后端数据交互
接下来就是对接服务端接口,展示真实的数据 1.做了个虚拟接口地址:http://test.yms.cn/testjson.asp 输出数据: { "title": "单间 ...
- System::String *,char*,string 等的类型转换 [转]
在VC 的编程中,经常会用到各种类型的转换,在MFC中textbox等控件得到的返回类型是System::String *,而写入的文件要求是 const char *类型的,下面介绍一些转换的方法: ...
- OpenGL超级宝典笔记——深度纹理和阴影 【转】
目录[-] 光源视角 新型的纹理 深度纹理的大小 首先绘制阴影 然后是光照 投影阴影贴图 阴影比较 之前我们介绍过简单的把物体压平到投影平面来制造阴影.但这种阴影方式有其局限性(如投影平面须是平面). ...
- OpenGL - Tessellation Shader 【转】
http://blog.sina.com.cn/s/blog_8c7d49f20102v4qm.html Patch is just an ordered list of vertices (在tes ...
- 查找——图文翔解SkipList(跳跃表)
跳跃表 跳跃列表(也称跳表)是一种随机化数据结构,基于并联的链表,其效率可比拟于二叉查找树(对于大多数操作须要O(logn)平均时间). 基本上.跳跃列表是对有序的链表添加上附加的前进链接,添加是以随 ...
- asp .net 为图片添加图片水印 .
首先写好一个写入图片水印的类,先创建一个ImageWriter类库 (该类中有包含枚举类型和方法) using System; using System.Collections.Generic; ...
- nightwatch.js - scroll until element is visible
.getLocationInView() Determine an element's location on the screen once it has been scrolled into vi ...
- PCIE、UART、HDA、I2C、SMBUS、SPI、eSPI、USB、PS2、CAN、SDIO等数据传输协议简介
M.2 wife一般支持USB.SDIO.PCIE三种传输 1.摄像头 (1)MIPI CSI (2)USB mipi摄像头模组IC简单便宜(小),应为一般把ADC解码在CPU端. MIPI摄像头简介 ...
- AngularJs 在控制器中过滤
<html> <head> <title>Simple app</title> <script src="https://ajax.go ...