安装和栅格系统学完,这篇写的是排版
手册中排版的目录如下图

《标题,页面主题,内联文本元素,对齐,改变大小写,缩略语,地址,引用,列表》
手册中介绍那么多,其实并不是所有的都要去看看。很多都是没有必要的。
总结了几个要看的地方:

  《标题,段落,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)---- 排版的更多相关文章

  1. Bootstrap学习笔记(一) 排版

    Bootsrap是一款优秀的前端开发框架,我从慕课网上开始学习Bootstrap,以下我学习过程中的一些笔记及代码. 首先学习排版: 从Bootstrap网站下载Bootstrap3中文文档(V3.3 ...

  2. Bootstrap学习笔记(二) 表单

    在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...

  3. Bootstrap~学习笔记索引

    回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...

  4. bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120

    为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...

  5. bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111

    基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...

  6. Bootstrap学习笔记-布局

    Bootstrap学习笔记-布局 默认是响应式布局,就是你在改变页面的时候也不会出现乱的现象. <html><head> <meta charset="utf- ...

  7. Bootstrap学习笔记博客

    本片博客用于记录之后要用到Bootstrap的学习笔记   概括: Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASC ...

  8. bootstrap学习笔记--bootstrap安装环境

    Bootstrap 安装是非常容易的.此文是本人的学习汇总,便于以后查询学习,同时也希望给大家带来帮助. 下载 Bootstrap 您可以从 http://getbootstrap.com/ 上下载 ...

  9. Bootstrap学习笔记系列1-------Bootstrap网格系统

    Bootstrap网格系统 学习笔记 [TOC] 简单网格 先上代码再解释 <!DOCTYPE html> <html> <head> <title>B ...

  10. bootstrap 学习笔记(1)---介绍bootstrap和栅格系统

    学习前端许久,对于布置框架和响应浏览器用html 和javascript 写的有点繁琐,无意间看到这个框架,觉得挺好用的就开始学习了,但是这个框架上面有很多知识,不是所有的都要学的,故将学习笔记和觉得 ...

随机推荐

  1. vue2 + typescript2 项目开发(环境配置)

    Vue 引入 TypeScript vue init airyland/vux2 projectName 增加开发包的依赖 npm install typescript ts-loader --sav ...

  2. 零基础学python-3.7 还有一个程序 python读写文本

    今天我们引入另外一个程序,文件的读写 我们先把简单的程序代码贴上.然后通过我们多次的改进.希望最后可以变成一个简单的文本编辑器 以下是我们最简单的代码: 'crudfile--读写文件' def re ...

  3. window 平台搭建简单的直播点播系统

    Windows平台如何搭建简单的直播系统前文已经有介绍,今天介绍下如何搭建简单的点播系统. 同样还是利用crtmpServer,crtmpServer可以从github中下载,可以从群里下载(群里有修 ...

  4. RobotFramework --RIDE介绍

    RIDE是robotframework的图形操作前端,我们在RIDE上进行测试用例设计和编写测试脚本,并执行自动化测试.下面来全面的认识下这个操作工具. 在右边编辑页面有三大模块,Edit,TextE ...

  5. How to reset your password in Ubuntu

    There are many reasons you might want to reset a password: Someone gave you a computer with Ubuntu i ...

  6. 安卓UI适配限定符

    引言 对于程序在不同尺寸的Android机器上执行,对UI的适用性造成了额外的开销,只是限定符的出现,非常方便的攻克了这个问题.通过创建限定符相关的文件夹来解决资源的载入. 限定符用处 限定符(mdp ...

  7. UVA11770 - Lighting Away

    题目链接 题意:一个有向图,每对一个结点操作.就能够触发连锁反应,使得该结点及它直接或间接指向的点均获得标记,问至少须要操作多少个结点使得全部结点获得标记 思路:有向图的强连通分量.用Tarjan缩点 ...

  8. kubernetes之计算机资源管理

    系列目录 当你编排一个pod的时候,你也可以可选地指定每个容器需要多少CPU和多少内存(RAM).当容器请求特定的资源时,调度器可以更好地根据资源请求来确定把pod调度到哪个节点上.当容器请求限制特定 ...

  9. 通过路由管理视图间切换 - AngularJS路由解析

    模板的视图刷新 ng-view这个指令和路由组合之后就可以将$route对应的视图放入指定的HTML中,这一过程中它会创建自己的作用域并将模板嵌套在内部. ng-view指令的优先级是1000(终极) ...

  10. vue 表单输入与绑定 v-model

    vue使用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定.下面我们通过示例先了解下基本用法: &l ...