响应式图片：

//当图片大的时候，逐渐缩小浏览器大小，图片会显示为自适应大小  ，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. CF 543C Remembering Strings

    https://cn.vjudge.net/problem/CodeForces-543C 题目 You have multiset of n strings of the same length, ...

  2. mysql-SELECT子句的顺序

  3. [搬运] 将 Visual Studio 的代码片段导出到 VS Code

    原文 : A Visual Studio to Visual Studio Code Snippet Converter 作者 : Rick Strahl 译者 : 张蘅水 导语 和原文作者一样,水弟 ...

  4. java回调函数，看完就懂

    java回调函数在网上了看了些例子,比较绕,不够清晰,自己写的一个例子比较通俗,java回调其实很简单. 举个例子我是类B,我有个方法叫b(),现在我要调用类A中的方法a(),写个代码就是: publ ...

  5. bean属性复制到另外一个bean

    import org.springframework.beans.BeanUtils; BeanUtils.copyProperties(maker.getBaseInfo(), newBasInfo ...

  6. Linux keepalived工作原理

    keepalived简介与工作原理 Keepalived的作用是检测服务器的状态,如果有一台web服务器宕机,或工作出现故障,Keepalived将检测到,并将有故障的服务器从系统中剔除,同时使用其他 ...

  7. 浅谈Kubernetes生产架构

    注意本文,只是笔者针对Kubernetes生产环境运行的一些关于架构设计和实现方案的总结,内容很粗糙,同时也会不断完善. 首先,我们来梳理下Kubernetes生产架构,其设计适用于绝大多数环境.如下 ...

  8. 适用于单片机的数据加密算法：xxtea

    转:https://www.cnblogs.com/LittleTiger/p/4384741.html 各位大侠在做数据传输时,有没有考虑过把数据加密起来进行传输,若在串口或者无线中把所要传的数据加 ...

  9. python之路（10）类的内置函数

    目录 isinstance()和issubclass() __setitem__.__getitem__和__delitem__ __str__和__reper__ __format__ __slot ...

  10. Java虚拟机—Java8内存模型（整理版）

    1.概述 对于Java程序员来说,在虚拟机自动内存管理机制的帮助下,不再需要手动释放内存,不容易出现内存泄露和内存溢出问题.一旦出现内存泄露和溢出方面的问题,如果不了解虚拟机是怎样使用内存的,排查错误 ...