响应式图片：

//当图片大的时候，逐渐缩小浏览器大小，图片会显示为自适应大小  ，img-responsive

<div class="container">

    <div class="row">

        <img src="../static/1.jpg" class="img-responsive" alt="">

    </div>

</div>

标题标签h

<h1>h1. Bootstrap heading</h1>

<h2>h2. Bootstrap heading</h2>

<h3>h3. Bootstrap heading</h3>

<h4>h4. Bootstrap heading</h4>

<h5>h5. Bootstrap heading</h5>

<h6>h6. Bootstrap heading</h6>
或
<span class="h1">aaaaaa</span>
<span class="h2">aaaaaa</span>
<span class="h3">aaaaaa</span>
<span class="h4">aaaaaa</span>

副标题：small

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
small标签会适应前边h标签的大小  自动显示为小一号字体

页面主体：

Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外，<p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。

body {

    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

    font-size: 14px;

    line-height: 1.42857143;

    color: #333;

    background-color: #fff

}

p {
    margin: 0 0 10px
}

中心内容：lead，强调p标签中的文本

.lead {

    margin-bottom: 20px;

    font-size: 16px;

    font-weight: 300;

    line-height: 1.4

}

@media (min-width: 768px) {

    .lead {

        font-size: 21px

    }

}

对其方式：text-right  /text-conter/  ...

缩略语：abbr

<abbr title="跟我学习Bootstrap">学习bootstrap</abbr>

地址：

<address>

  <strong>Twitter, Inc.</strong><br>

  1355 Market Street, Suite 900<br>

  San Francisco, CA 94103<br>

  <abbr title="Phone">P:</abbr> (123) 456-7890

</address>

<address>

  <strong>Full Name</strong><br>

  <a href="mailto:#">first.last@example.com</a>

</address>

列表：

//无样式列表

<ul class="list-unstyled">

        <li></li>

</ul>

//无序

<ul>

        <li></li>

</ul>

<ol>

        <li></li>

</ol>

//内联列表  一行

<ul class="list-inline">

        <li></li>

</ul>

//有无class 区别：dt、dd标签内容是否显示在同一行

<dl class="dl-horizontal">

        <dt>标题</dt>

        <dd>标题描述</dd>

</dl>

官方：https://v3.bootcss.com/css/#type

bootstrap学习（二）页面的更多相关文章

  1. BootStrap学习(二)——重写首页之topbar

    1.布局容器 帮助文档:http://v3.bootcss.com/css/#overview-container BootStrap需要为页面内容和栅栏系统包裹一个.container容器.提供的两 ...

  2. python 全栈开发，Day57(响应式页面-@media介绍,jQuery补充,移动端单位介绍,Bootstrap学习)

    昨日内容回顾 ajax //get post 两种方式 做 请求 get 主要是获取数据 post 提交数据 同一个路由地址 既可以是get请求也可以是post请求 一个路由对应一个函数 get请求 ...

  3. Bootstrap <基础二十三>页面标题（Page Header）

    页面标题(Page Header)是个不错的功能,它会在网页标题四周添加适当的间距.当一个网页中有多个标题且每个标题之间需要添加一定的间距时,页面标题这个功能就显得特别有用.如需使用页面标题(Page ...

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

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

  5. bootstrap学习笔记<二>（标题，段落样式）

    标题.样式:class="h1"~class="h6" bootstrap中重新定义了h1~h6标签,具体差别如下: 在bootstrap中其他任何标签使用cl ...

  6. Bootstrap <基础二十九>面板（Panels）

    Bootstrap 面板(Panels).面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向 <div> 元素添加 class .panel 和 class .pa ...

  7. Bootstrap <基础二十二>超大屏幕（Jumbotron）

    Bootstrap 支持的另一个特性,超大屏幕(Jumbotron).顾名思义该组件可以增加标题的大小,并为登陆页面内容添加更多的外边距(margin).使用超大屏幕(Jumbotron)的步骤如下: ...

  8. 前端框架——BootStrap学习

    BootStrap简单总结下:1.栅格系统,能够很好的同时适应手机端和PC端(及传说中的响应式布局) 2.兼容性好 接下来是对BootStrap学习的一些基础案例总结和回顾: 首先引入:bootstr ...

  9. bootstrap学习总结-js组件(四)

    这次我们来看下js组件的使用,本篇文章会有点长,希望大家可以耐心看,相信收获会有不少.不少园友加我好友,表示喜欢我写文字的风格,简单明了,这里,再次谢谢你们的支持.一方面,博主自身技术有限,写的东西都 ...

随机推荐

  1. [LOJ3014][JOI 2019 Final]独特的城市——树的直径+长链剖分

    题目链接: [JOI 2019 Final]独特的城市 对于每个点,它的答案最大就是与它距离最远的点的距离. 而如果与它距离为$x$的点有大于等于两个,那么与它距离小于等于$x$的点都不会被计入答案. ...

  2. Navicat 连接远程服务器mysql 长时间不操作会连接很久

    服务器mysql 配置 本地mysql客户端配置 √ navicat 连接配置 右键连接,编辑连接,高级,保持连接间隔勾选,把240改为30,确定

  3. Linux lvs-NAT模式配置详解

    本篇文档主要是记录NAT模式实现过程,以及各配置步骤的原理.“lvs三种模式工作原理”中描述了LVS的NAT.DR.TUN三种模式的工作原理. NAT模式是通过director将报文目标IP地址修改, ...

  4. 题解：YNOI/GZOI2019 与或和

    题目大意: 1. 求所有的子矩阵的and之和2. 求所有子矩阵的or之和 由于是位运算,那么久直接拆位,于是就变成了求全0子矩阵的个数和全1子矩阵的个数那么题目就变成了简单的单调栈问题 #includ ...

  5. python学习day16 模块(汇总)

    模块(总) 对于range py2,与py3的区别: py2:range() 在内存中立即把所有的值都创建,xrange() 不会再内存中立即创建,而是在循环时边环边创建. py3:range() 不 ...

  6. CF1129B 【Wrong Answer】

    既然 $ n \leq 2000$ 那我们就假使所有的 $n = 2000 $ 主要是为了方便.再使 \(x = \sum_{i=1} ^ {1999}\) 以及 $a_1=a_2=a_3=...=a ...

  7. Day062--django--模板,母版和继承

    1.MVC和MTV MVC C Controller : 逻辑的控制 M Model : 存取数据 V View : 信息的展示 MTV M : model ORM操作 T: Template 模板 ...

  8. About me & 留言板

    本人名字首字母gzy,就读于gryz,是高二在读生,也是一名oier. 老婆:远近渔. 爱好: 各种体育类项目,(但是不精通,不会打台球),喜欢摄影作品,喜欢听rap和摇滚,也喜欢一些描述生活英文歌曲 ...

  9. 如何快速上手Mac

    网络上关于Mac的教程很多,大部分问题通过百度和谷歌就能搞定了.对于技巧的细节,我将不再过多的重复,看了我的参考资料基本就能够全部了解,他们也比我讲得详细得很多.我这篇文章想做的,是以一个普通的win ...

  10. (七) UVC框架分析

    title: UVC框架分析 date: 2019/4/23 19:50:00 toc: true --- UVC框架分析 源码的位置在drivers\media\video\uvc,查看下Makef ...