响应式图片：

//当图片大的时候，逐渐缩小浏览器大小，图片会显示为自适应大小  ，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. vue stylus 格式化问题

    IDE是vscode 安装了.vetur插件 由于stylus可以仅用缩进不用写大括号之类的,所以十分方便, 但有个问题,按alt shift F 格式化时,vetur这个插件会默认添加上正常css的 ...

  2. MySQL单表查询

    MySQL之单表查询 创建表 # 创建表 mysql> create table company.employee5( id int primary key AUTO_INCREMENT not ...

  3. [GXOI/GZOI2019]旧词（树上差分+树剖）

    前置芝士:[LNOI2014]LCA 要是这题放HNOI就好了 原题:\(\sum_{l≤i≤r}dep[LCA(i,z)]\) 这题:\(\sum_{i≤r}dep[LCA(i,z)]^k\) 对于 ...

  4. postgresql某个字段值按照指定规则排序

    select id,serial_group_id,state from ap_model order by serial_group_id asc, ( case when state=1 then ...

  5. DNS Tunnel隧道隐蔽通信实验 && 尝试复现特征向量化思维方式检测

    1. DNS隧道简介 DNS隧道技术是指利用 DNS协议建立隐蔽信 道,实现隐蔽数据传输.最早是在2004年 DanKaminsky 在 Defcon大会上发布的基于 NSTX 的 DNS隐蔽 隧道工 ...

  6. Java 集合系列之二：List基本操作

    1. Java List 1. Java List重要观点 Java List接口是Java Collections Framework的成员. List允许您添加重复元素. List允许您拥有'nu ...

  7. 移动开发day4_京东移动页面

    复习 父项身上有哪些属性 可以设置 主轴方向 fd flex-direction : row; column; 主轴子项的排列方式 j justify-content: flex-start;flex ...

  8. DirectX11--实现一个3D魔方(2)

    前言 上一章我们主要讲述了魔方的构造和初始化.纹理的准备工作.目前我还没有打算讲Direct3D 11关于底层绘图的实现,因此接下来这一章的重点是魔方的旋转.因为我们要的是能玩的魔方游戏,而不是一个观 ...

  9. JavaScript 修改 CSS 伪类属性

    背景 有时候我们希望通过JS代码控制伪类属性, 确苦于对策 实际上可通过向document.head中添加style子元素来实现 演示 function css(style_text) { var s ...

  10. EF提交插入数据catch捕获具体异常方法

    try { db.SaveChanges(); } catch (DbEntityValidationException ex) { StringBuilder errors = new String ...