Bootstrap中的排版

  • 1. 排版
    • 标题部分
    • 文本部分
      • 对齐
        • .text-left ：文字左对齐
        • .text-center ：文字居中对齐
        • .text-right ：文字右对齐
        • .text-lowercase ：字母小写
        • .text-uppercase ：字母大写
        • .text-capitalize ：首字母大写
  • 2. 表格
    • .table ：普通表格
    • .table-bordered ：带边框表格
    • .table-striped ：条纹状表格
    • .table-hover ：悬停变色
    • .table-condensed ：紧凑风格
    • 行颜色
      • .danger 红色
      • .warning 黄色
      • .info 蓝色
      • .success 绿色
      • .active 灰色(鼠标悬停时的颜色)
  • 3. 表单
    • .form-control ：默认设置宽度属性为 width：100%，input/select/textarea
    • .form-group：一般设置在div中，将一个div作为一个组件，包裹其他元素，获得很好的排列
    • .checkbox：设置复选框样式
    • .form-inline ：使表单元素水平排列，变为内联元素
    • .input-lg ： 大输入框
    • .input-sm： 小输入框
    • .sr-only ：隐藏不想显示的元素
    • .control-label和.has-success ：改变label和组件的状态
    • button部分：
      • .btn：button普通类型，灰色
      • .btn-default： 默认button，白色
      • .btn-info：信息button，天蓝色
      • .btn-warning：警告button，黄色
      • .btn-success：成功button，绿色
      • .btn-primary：主要button，推荐button，深蓝色
      • .btn-danger：红色
      • .btn-lg：大button
      • .btn-sm：小button
      • .btn-xs：超级小button
      • .active：使按钮变成点击状态
      • .disabled：使按钮变成无法点击的样式（实际可以点击，禁用button可以直接设置disabled属性）
      • .block：使button变成块状button
      • .btn-link：使button变成链接样式
      • 给a标签加入button样式变为button，但是如果a标签被作为按钮使用，并用于在当前页面触发某些功能（不是用作传统标签的链接其他页面或者当前页面的某些部分），那么需要将a表情设置role="button"属性
  • 4. 图片部分：
    • .img-rounded：圆角
    • .img-circle：圆形
    • .img-thumbnail：带有边框的圆角图形
    • .img-responsive 响应式图片
    • .center-block 响应式图片水平居中
  • 5. 辅助类
    • 文本颜色
    • 背景颜色
    • 关闭按钮 .close
    • 三角符号 .caret
    • 元素浮动
      • .pull-left：元素浮动到左边
      • .pull-right：元素浮动到右边
      • .center-block：设置元素为块级元素并居中显示
      • .clearfix : 清除浮动

1. 排版

标题部分

标题： .h1 ~ .h6 / h1 ~ h6
类h1（.h1）和类h6是为了给内联元素赋值标题样式
副标题：（small）

实例:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"> <title>Bootstrap 实例 </title><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body><h1>一级标题<small>我是小标题</small></h1><h2>二级标题<small>我是小标题</small></h2><span class="h1">内联标题一<small>我是小标题</small></span><span class="h2">内联标题二<small>我是小标题</small></span>
</body>
</html>

运行结果:

文本部分

  • bootstarp对p标签进行初始定义:

默认: 14px;
行高: 20px;
底部外边距: 10px;

实例:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"> <title>Bootstrap 实例 - 地址</title><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body><p><mark>Bootstrap，</mark>来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。</p><p>本教程将向您讲解 Bootstrap 框架的基础，<del>通过学习这些内容</del>，您将可以轻松地创建 Web 项目。教程被分为 Bootstrap 基本结构、Bootstrap CSS、Bootstrap 布局组件和 Bootstrap 插件几个部分。每个部分都包含了与该主题相关的简单有用的实例。</p>
</body>
</html>

运行结果:

标记标签 : < mark>
删除线: < del>
下划线: < ins>或< u>

对齐

.text-left ：文字左对齐

.text-center ：文字居中对齐

.text-right ：文字右对齐

.text-lowercase ：字母小写

.text-uppercase ：字母大写

.text-capitalize ：首字母大写

实例：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"> <title>Bootstrap 实例</title><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body><p class="text-left">Bootstrap</p><p class="text-center">Bootstrap</p><p class="text-right">Bootstrap</p><p class="text-lowercase">Bootstrap</p><p class="text-uppercase">Bootstrap</p><p class="text-capitalize">Bootstrap</p>
</body>
</html>

运行结果：

2. 表格

.table ：普通表格

.table-bordered ：带边框表格

.table-striped ：条纹状表格

.table-hover ：悬停变色

.table-condensed ：紧凑风格

实例：
(1) .table类

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"> <title>Bootstrap 实例 - 基本的表格</title><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body><table class="table"><caption>基本的表格布局</caption><thead><tr><th>名字</th><th>城市</th></tr></thead><tbody><tr><td>Tom</td><td>New York</td></tr><tr><td>Simmon</td><td>London</td></tr></tbody>
</table></body>
</html>

运行结果:

(2) .table-bordered+ .table 边框

<table class="table table-bordered">
<!-->  省略内容... 同上  <-->
</table>

运行结果：

(3).table-bordered+ .table + .table-striped 边框+条纹状

<table class="table table-bordered table-striped">
<!-->  省略内容... 同上  <-->
</table>

运行结果：

(4) .table-hover 鼠标悬浮行上, 行变色

<table class="table table-bordered table-striped table-hover">
...
</table>

运行结果:

如果想要修改悬浮的颜色，在css中加入如下代码：

.table-hover > tbody > tr:hover > th {background-color: #1BA0B2;}

(5).table-condensed 紧凑型表格 +.table-bordered+.table

<table class="table table-bordered table-condensed">
...
</table>

行颜色

.danger 红色

.warning 黄色

.info 蓝色

.success 绿色

.active 灰色(鼠标悬停时的颜色)

实例:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"> <title>Bootstrap 实例 - 基本的表格</title><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body><table class="table table-bordered table-condensed"><caption>基本的表格布局</caption><thead><tr><th>名字</th><th>城市</th></tr></thead><tbody><tr class="danger"><td>Tom</td><td>New York</td></tr><tr class="warning"><td>Simmon</td><td>London</td></tr><tr class="info"><td>Linda</td><td>Rome</td></tr>      <tr class="success"><td>Michael</td><td>Australia</td></tr><tr class="active"><td>Michael</td><td>Australia</td></tr> <tr><td>Jessica</td><td>Colorado</td></tr> </tbody>
</table></body>
</html>

运行结果:

3. 表单

.form-control ：默认设置宽度属性为 width：100%，input/select/textarea

.form-group：一般设置在div中，将一个div作为一个组件，包裹其他元素，获得很好的排列

.checkbox：设置复选框样式

实例：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"> <title>Bootstrap 实例 -表单</title><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body><form><div class="form-group"><label for="input1">这是一个输入框：</label><input type="text" class="form-control" id="input1"></div><div class="form-group"><label for="select1">这是一个下拉框：</label><select id="select1" class="form-control"><option>北京</option><option>上海</option><option>沈阳</option><option>深圳</option><option>广州</option></select></div><div class="form-group"><label for="textarea1">这是一个文本框：</label><textarea id="textarea1" class="form-control"></textarea></div><div class="checkbox"><label><input type="checkbox"> Check me out</label></div></form>
</body>
</html>

运行结果：

.form-inline ：使表单元素水平排列，变为内联元素

<form class="form-inline">
... 同上
</form>

运行结果：

.input-lg ： 大输入框

.input-sm： 小输入框

<div class="form-group"><label for="input2">这是一个大输入框：</label><input type="text" class="form-control input-lg" id="input2">
</div>
<div class="form-group"><label for="input1">这是一个普通输入框：</label><input type="text" class="form-control" id="input1">
</div>
<div class="form-group"><label for="input3">这是一个小输入框：</label><input type="text" class="form-control input-sm" id="input3">
</div>

运行结果：

.sr-only ：隐藏不想显示的元素

.sr-only {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0,0,0,0);border: 0;
}

实例：

<div class="form-group"><label for="input2" class="sr-only">这是一个大输入框：</label><input type="text" class="form-control input-lg " id="input2">
</div>
<div class="form-group"><label for="input1">这是一个普通输入框：</label><input type="text" class="form-control" id="input1">
</div>

运行结果： 大输入框的label消失

.control-label和.has-success ：改变label和组件的状态

<div class="form-group has-success"><label for="input2" class="control-label">这是一个大输入框：</label><input type="text" class="form-control input-lg" id="input2">
</div>

运行结果：整个组件变成sucess状态

同理还有has-error/has-warning等等…

button部分：

.btn：button普通类型，灰色

.btn-default： 默认button，白色

.btn-info：信息button，天蓝色

.btn-warning：警告button，黄色

.btn-success：成功button，绿色

.btn-primary：主要button，推荐button，深蓝色

.btn-danger：红色

.btn-lg：大button

.btn-sm：小button

.btn-xs：超级小button

.active：使按钮变成点击状态

.disabled：使按钮变成无法点击的样式（实际可以点击，禁用button可以直接设置disabled属性）

.block：使button变成块状button

.btn-link：使button变成链接样式

给a标签加入button样式变为button，但是如果a标签被作为按钮使用，并用于在当前页面触发某些功能（不是用作传统标签的链接其他页面或者当前页面的某些部分），那么需要将a表情设置role="button"属性

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"> <title>Bootstrap 实例 -button</title><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body><form><button>这是普通button</button><button class="btn">这是btn-button</button><button class="btn btn-default">这是default-button</button><button class="btn btn-info">这是info-button</button><button class="btn btn-warning">这是warning-button</button><button class="btn btn-success">这是success-button</button><button class="btn btn-primary">这是一个button</button><button class="btn btn-danger">这是一个button</button><hr><button class="btn btn-lg">这是lg-button</button><button class="btn btn-sm">这是sm-button</button><button class="btn btn-xs">这是xs-button</button><hr><button class="btn btn-active">这是active-button</button><button class="btn btn-disabled">这是disabled-button</button><button class="btn btn-block">这是block-button</button><hr><a class="btn btn-default" href="#" role="button">这是个a标签</a><button class="btn btn-link">这是个button</button></form>
</body>
</html>

运行结果：

4. 图片部分：

.img-rounded：圆角

.img-circle：圆形

.img-thumbnail：带有边框的圆角图形

实例:

<img src="/wp-content/uploads/2014/06/download.png" class="img-rounded">
<img src="/wp-content/uploads/2014/06/download.png" class="img-circle">
<img src="/wp-content/uploads/2014/06/download.png" class="img-thumbnail">

运行结果：

.img-responsive 响应式图片

实质是为图片设置：
max-width:100%;
height:auto;
display:block;

.center-block 响应式图片水平居中

5. 辅助类

文本颜色

实例：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"> <title>bootstrap 文本颜色</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body><div class="container"><p class="text-muted">通过颜色来展示意图，Bootstrap 提供了一组工具类。这些类可以应用于链接，并且在鼠标经过时颜色可以还可以加深，就像默认的链接一样。</p>    <p class="text-primary">通过颜色来展示意图，Bootstrap 提供了一组工具类。这些类可以应用于链接，并且在鼠标经过时颜色可以还可以加深，就像默认的链接一样。</p>          <p class="text-info">通过颜色来展示意图，Bootstrap 提供了一组工具类。这些类可以应用于链接，并且在鼠标经过时颜色可以还可以加深，就像默认的链接一样。</p>          <p class="text-success">通过颜色来展示意图，Bootstrap 提供了一组工具类。这些类可以应用于链接，并且在鼠标经过时颜色可以还可以加深，就像默认的链接一样。</p>          <p class="text-warning">通过颜色来展示意图，Bootstrap 提供了一组工具类。这些类可以应用于链接，并且在鼠标经过时颜色可以还可以加深，就像默认的链接一样。</p>        <p class="text-danger">通过颜色来展示意图，Bootstrap 提供了一组工具类。这些类可以应用于链接，并且在鼠标经过时颜色可以还可以加深，就像默认的链接一样。</p>
</div></body>
</html>

运行结果：

背景颜色

实例：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"> <title>Bootstrap 背景颜色</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body><div class="container"><p class="bg-primary">和情境文本颜色类一样，使用任意情境背景色类就可以设置元素的背景。链接组件在鼠标经过时颜色会加深，就像上面所讲的情境文本颜色类一样。</p><p class="bg-success">和情境文本颜色类一样，使用任意情境背景色类就可以设置元素的背景。链接组件在鼠标经过时颜色会加深，就像上面所讲的情境文本颜色类一样。</p><p class="bg-info">和情境文本颜色类一样，使用任意情境背景色类就可以设置元素的背景。链接组件在鼠标经过时颜色会加深，就像上面所讲的情境文本颜色类一样。</p><p class="bg-danger">和情境文本颜色类一样，使用任意情境背景色类就可以设置元素的背景。链接组件在鼠标经过时颜色会加深，就像上面所讲的情境文本颜色类一样。</p><p class="bg-warning">和情境文本颜色类一样，使用任意情境背景色类就可以设置元素的背景。链接组件在鼠标经过时颜色会加深，就像上面所讲的情境文本颜色类一样。</p>
</div></body>
</html>

运行结果：

关闭按钮 .close

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

通过使用一个象征关闭的图标，可以让模态框和警告框消失。
运行结果:

三角符号 .caret

<span class="caret"></span>

运行结果:

元素浮动

.pull-left：元素浮动到左边

.pull-right：元素浮动到右边

.center-block：设置元素为块级元素并居中显示

.clearfix : 清除浮动

Bootstrap ——排版、表格、表单、图片、button 学习博客（二）相关推荐

  1. bootstrap 大小 表格,表单控件大小

    前面看到的表单控件都正常的大小.可以通过设置控件的height,line-height,padding和font-size等属性来实现控件的高度设置.不过Bootstrap框架还提供了两个不同的类名, ...

  2. 定义列表的特点html,HTML的列表表格表单知识点

    无序列表格式                                                                                              ...

  3. 2017-2-15从0开始前端学习笔记（HTML）-图片-表格-表单

    2017-2-15从0开始前端学习笔记-图片-表格-表单 标签 图片 图片<img src="#" alt="文本说明 不能加载图片时显示" title= ...

  4. Bootstrap框架(基础篇)之列表,表格,表单

    继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇 除了HTML提供的三种基本列表样式: 无序列表 <ul><li>-& ...

  5. HTML、CSS、表格表单简单代码笔记

    学习更多建议菜鸟教程 Target使用 <!DOCTYPE html> <html lang="en"> <head><meta char ...

  6. button layui 点击事件_解决layui中的form表单与button的点击事件冲突问题

    解决layui中的form表单与button的点击事件冲突问题 layui的form表单位置和button标签的位置重合,会使得button的click事件得不到响应,如图: 蓝色底为form的位置, ...

  7. 【4001】通过html做一个静态页面的表格表单，嘿嘿。

    学习目标: [ 1]学习前端第一天掌握 html(主要表单表格相关)入门知识,梳理今天的学习知识点: [ 2]通过已学知识做静态页面表格表单完成效果,效果图如下: 表单不加颜色是这样的,自己看着设计: ...

  8. 通过CSS，H5，JavaScript实现表格表单的随机选择，和简单的随机点名。

    目录 一.表格表单的随机选择 效果展示(表单内容可以根据自己需要进行修改) 1.H5的布局 第一步: 第二步: 2.CSS布局 3.JS的布局 第一步: 第二步: 第三步: 二.简单的随机点名 效果展 ...

  9. js table 生成序号_el-table树形表格表单验证，js树形列表生成序号

    树形表格表单验证预览 树形列表生成序号 首先需要生成一个序号用来确定表单验证的目标row,通过广度优先遍历,以1,1.1,1.1.1的规则对树形列表生成确定唯一值的索引,因为列表自身可以做CURD,因 ...

最新文章

  1. PHP从入门到跑路(二),基础语法，数据库操作
  2. 这份思科设备命令大全火了~
  3. 使用 FlipClock.js 制作精美的时钟、定时器和倒计时功能
  4. JAVA确保垃圾回收后结束程序_Java垃圾回收机制（转）
  5. vue cli3.0创项目报错‘This may cause things to work incorrectly. Make sure to use the same version for b’
  6. Gartner：PaaS 和平台架构领域的 4 大趋势 | 技术头条
  7. pyqt label上的图片旋转_python中tkinter入门之config、Scale、Canvas和导入图片
  8. 2020年9月北京计算机等级考试考点,2020年9月北京计算机等级考试考点设置
  9. python模块--subprocess
  10. netsh命令改IP和重置winsock(可解决能上QQ不能上网的问题)
  11. 【2018百度之星程序设计大赛初赛】degree
  12. 数理统计————思维导图（上岸必备）
  13. 通达oa考勤可以代打吗_OA让考勤更方便
  14. luckysheet实现打印功能
  15. 1999年IT大盘点
  16. 代码随想录算法训练营第二十二天
  17. 技术总监的“技术提升”
  18. 百度网盘限速代理下载工具
  19. 1527编码协议_EV1527解码，我也贡献一个，抗干扰，自适应.....
  20. Linux命令--nc （测试服务器端口是否打开）

热门文章

  1. 缺失数据的Bootstrap与Jackknife方法：《Statistical Analysis with Missing Data》习题5.1 5.2
  2. C实现前序遍历二叉树
  3. IP地址，子网掩码和网关
  4. Matlab图像的灰度直方图
  5. OTA （空中下载技术）
  6. 七彩虹B660M主板 Wake On Lan（网络唤醒）
  7. 【Maven】高级应用：私服(nexus)搭建及使用、自定义项目骨架(archtype)
  8. Galahad(板子：区间不重复数字的和，树状数组/线段树)
  9. 毕业论文ppt的研究方法及过程计算机专业,计算思维原理研究与实现数据组织毕业论文4喜欢就下吧（全文完整版）...
  10. golang项目持续集成Travis-CI实践