响应式图片：

//当图片大的时候，逐渐缩小浏览器大小，图片会显示为自适应大小  ，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. 用标准3层神经网络实现MNIST识别

    一.MINIST数据集下载 1.https://pjreddie.com/projects/mnist-in-csv/      此网站提供了mnist_train.csv和mnist_test.cs ...

  2. nginx--default_server定义规则及配置

    nginx 的 default_server 指令可以定义默认的 server 出处理一些没有成功匹配 server_name 的请求,如果没有显式定义,则会选取第一个定义的 server 作为 de ...

  3. 【翻译】A simple stone game

    题目描述 在学会了如何玩尼姆游戏之后,迈克开始尝试另一种看起来很多的石头游戏. 简单点. 游戏是这样的:两个玩家用一堆n块石头开始游戏.他们轮流从堆里取石头,每次至少取一块石头 一堆又一堆,每次他们至 ...

  4. Linux-ftp虚拟用户配置

    云服务器ESC 部署vsftpd 虚拟用户 说明:云服务器部署和本地服务器部署一样,都需要开通指定的相应端口,只不过云服务器需要在安全组规则中打开相应的端口允许通过. 环境说明: 对应的用户对应不同的 ...

  5. Scrum【转】

    转载自:https://www.cnblogs.com/l2rf/p/5783726.html 灵感来自于一段冷笑话: 一天,一头猪和一只鸡在路上散步,鸡看了一下猪说,“嗨,我们合伙开一家餐馆怎么样? ...

  6. 关于gcd的四道题

    T1:bzoj2705 题目描述: 给定一个n求\(\sum\limits_{i=1}^ngcd(i,n)\) 因为n太大,所以O(n)的做法肯定不行,然后就去想根号的方法. \[\sum\limit ...

  7. 通用的C#导出Excel 支持2003及2007以上版本

    将数据导出到Excel,供用户下载是经常要使用到的一个功能,我这里进行了一些封装,目前已满足项目中导出的需求,使用DataReader导出Excel,支持自定义多表头,使用委托处理字段格式化及字段值的 ...

  8. 【莫烦Pytorch】【P1】人工神经网络VS. 生物神经网络

    滴:转载引用请注明哦[握爪] https://www.cnblogs.com/zyrb/p/9700343.html 莫烦教程是一个免费的机器学习(不限于)的学习教程,幽默风俗的语言让我们这些刚刚起步 ...

  9. SpringBoot注册Windows服务和启动报错的原因

    SpringBoot注册Windows服务和启动报错的原因 Windows系统启动Java程序会弹出黑窗口.黑窗口有几点不好.首先它不美观:其次容易误点导致程序关闭:但最让我匪夷所思的是:将鼠标光标选 ...

  10. spring的事件驱动模型

    在工作中会遇到这样的业务,生成一个订单后需要给指定的用户发送短信或者邮件,但是短信或者邮件发送失败又不会影响正常的业务: 这里介绍通过ApplicationContext和spring的@EventL ...