响应式图片：

//当图片大的时候，逐渐缩小浏览器大小，图片会显示为自适应大小  ，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. 代理与hook

    参考:Java 动态代理 代理是什么 为什么需要代理呢?其实这个代理与日常生活中的“代理”,“中介”差不多:比如你想海淘买东西,总不可能亲自飞到国外去购物吧,这时候我们使用第三方海淘服务比如惠惠购物助 ...

  2. [unix]commvault在unix系统上本地安装报“NFS directory cannot be used”

    远程安装持续的pending: 本地安装报“NFS directory cannot be used” 修改安装包 安装目录 的权限, 从777改回775. 就可以解决这个报错.

  3. ADRC-active disturbance rejection control-自抗扰控制器

    ADRC自抗扰控制基本思想要点: 1.标准型与总扰动,扩张状态与扰动整体辨识,微分信号生成与安排过渡过程以及扰动的消减与控制量产生. ADRC主要构成: 1)跟踪微分器(TD)---the track ...

  4. （转）Java结束线程的三种方法

    背景:面试过程中问到结束线程的方法和线程池shutdown shutdownnow区别以及底层的实现,当时答的并不好. Java结束线程的三种方法 线程属于一次性消耗品,在执行完run()方法之后线程 ...

  5. Java基础 -- Collection和Iterator接口的实现

    Collection是描述所有序列容器(集合)共性的根接口,它可能被认为是一个“附属接口”,即因为要表示其他若干个接口的共性而出现的接口.另外,java.util.AbstractCollection ...

  6. mysql 严格模式 Strict Mode说明（text 字段不能加默认或者 不能加null值得修改方法）

    mysql 严格模式 Strict Mode说明 1.开启与关闭Strict Mode方法找到mysql安装目录下的my.cnf(windows系统则是my.ini)文件 在sql_mode中加入ST ...

  7. mac 连接linux服务器，用scp命令实现本地文件与服务器文件之间的互相传输

    mac连接linux服务器 打开终端,切换到root权限下,切换root权限命令:sudo -i 通过ssh命令连接linux服务器:ssh root@ip地址(root是账户名) 然后根据提示输入密 ...

  8. 关于JVM加载class文件和类的初始化

    关于JVM加载class文件和类的初始化 1.JVM加载Class文件的原理机制 1.1.装载 查找并加载类的二进制数据 1.2.链接 验证:确保被加载类的正确性.(安全性考虑) 准备:为类的静态变量 ...

  9. 关于Python常见功能使用的博客收藏

    Python绘制曲面和曲面对应的等高线图: https://blog.csdn.net/weixin_40198632/article/details/78570679 python实现三维拟合 ht ...

  10. Redis实战（十）Redis常见问题及解决方案

    序言