bootstrap简介:

☑  简单灵活可用于架构流行的用户界面和交互接口的html、css、javascript工具集。

☑  基于html5、css3的bootstrap,具有大量的诱人特性:友好的学习曲线,卓越的兼容性,响应式设计,12列格网,样式向导文档。

☑  自定义JQuery插件,完整的类库,基于Less等。

排版:  

标题

    ①.h1=36px,h2=30px,h3=24px,h4=18px,h5=14px、h6=12px

②<small>标签来制作副标题

强调内容:

    class="lead" 另外还有元素标签:<small>、<strong>、<em>、<cite>、<b>、<em>、<i>给文本做突出样式处理。

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

颜色提示

文本对齐风格:

    .text-left:左对齐  .text-center:居中对齐  .text-right:右对齐  .text-justify:两端对齐

.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
.text-justify {
text-align: justify;
}

源码

列表:

1 无序列表、有序列表<ul>、<ol>

2 定义列表 <dl><dt><dd>

表格:

1.基础表格   类名“.table”:后面各种表格都要加上这个类名。

2.斑马线表格 类名“table-striped”

.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
background-color: #f9f9f9;
}

示例

3.带边框的表格 类名“.table-bordered”

.table-bordered {
border: 1px solid #ddd;/*整个表格设置边框*/
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
border: 1px solid #ddd; /*每个单元格设置边框*/
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
border-bottom-width: 2px;/*表头底部边框*/
}

示例

4.鼠标悬浮高亮的表格  类名“table-hover”

.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
background-color: #f5f5f5;
}

示例

5.紧凑型表格  类名“table-condensed”

.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > td {
padding: 5px;
}

示例

6.响应式表格  类名“.table-responsive”:当你的浏览器可视区域小于768px时,表格底部会出现水平滚动条。

Bootstrap提供了一个容器,并且此容器设置类名“.table-responsive”,此容器就具有响应式效果,然后将<table class="table">置于这个容器当中,这样表格也就具有响应式效果

<div class="table-responsive">
<table class="table table-bordered">

</table>
</div>

示例

Bootstrap学习笔记(排版)的更多相关文章

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

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

  2. Bootstrap~学习笔记索引

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

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

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

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

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

  5. Bootstrap学习笔记-布局

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

  6. Bootstrap学习笔记博客

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

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

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

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

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

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

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

随机推荐

  1. OO第二单元の小结

    第二单元(线程与电梯问题)总结博客 三次作业的设计策略 第一次:本次作业只有一部电梯,而且不用捎带.因此,我一共设计了两个线程:一个负责管理输入,一个负责电梯运行.同时,我将调度队列设置为单例模式,里 ...

  2. mongodb 两台互为主从

    主机A [root@mysql_master zhxf]# cat docker-compose.yml version: '3' services: mongo_rs1: image: mongo: ...

  3. 配置Nginx支持pathinfo模式

    Nginx服务器默认不支持pathinfo, 在需要pathinfo支持的程序中(如thinkphp),则无法支持”/index.php/Home/Index/index”这种网址.网上流传的解决办法 ...

  4. hdu-1277--字典树坑题

    hdu-1227 字典树,坑题!!当字典树练手 Problem Description 我们大家经常用google检索信息,但是检索信息的程序是很困难编写的:现在请你编写一个简单的全文检索程序. 问题 ...

  5. hadoop完全分布式手动安装(一主多从centos linux各版本均试验成功,文档完整无一遗漏)

    hadoop完全分布式手动安装(一主多从centos linux各版本均试验成功,文档完整无一遗漏) 网上的文章99%都是垃圾,我凭良心书写,确保幼儿园同学也能安装成功! 查看系统环境    1.查看 ...

  6. (转)mysql、innodb和加锁分析

    mysql.innodb和加锁分析 原文:https://liuzhengyang.github.io/2016/09/25/mysqlinnodb/ 介绍 本文主要介绍MySQL和InnoDB存储引 ...

  7. ifram的使用 左边是<a>链接 右边是对应网页嵌套的显示网页链接内容 和toggle的收放用法

    1.ifram的使用 左边是<a>链接  右边是对应网页嵌套的显示网页链接内容 <div class="container"> <div class= ...

  8. Install NDK in Eclipse/Android Studio

    1. Download NDK https://developer.android.com/tools/sdk/ndk/index.html 2.Install NDK $ tar xvf andro ...

  9. Win10正式版关机时自动更新怎么关闭

    http://jingyan.baidu.com/article/64d05a02462d6fde55f73b97.html

  10. vmware8~12最新版本 克隆Centos6.X 系列虚拟机网卡无法启动问题 (三步即可)

    1.因工作或者学习需要,都需要在VM上克隆一台服务器,此时无论是快捷克隆(相当于快照的机体)或者完整克隆,都会碰到IP问题. 如:创建后症状:启动之后使用ifconfig,发现无ip地址,只有回环地址 ...