zoukankan      html  css  js  c++  java
  • bootstrap排版基础

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>bootstrap排版基础</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>//引入css样式
    </head>
    <body>
    <div class="container">//容器
    <div class="row">//行
    <div class="col-sm-4">
        <img src="img/本人.jpg" class="img-responsive"/>//引入图片   引入定义css类,具体的类可以打开css-->.css文件-->ctrl+f-->搜索img-    然后根据需求设置
    </div>
    <div class="col-sm-8">//在小屏幕上占8格
    <h1>第一<small>小字体标签</small></h1>//<small></small>是html5新增的小字体标签,会受<h>标签的影响
    <h2>第二<small>小字体标签</small></h2>
    <h3>第三<small>小字体标签</small></h3>
    <span class="h1">第一<small>小字体标签</small></span>//<span></span>标签可以引用css中定义好的有关<h>的类
    <span class="h2">第二<small>小字体标签</small></span>
    <span class="h3">第三<small>小字体标签</small></span>
    <p class="h1">第一<small>小字体标签</small></p>//<p></P>标签可以引用css中定义好的有关<h>的类
    <p class="h2">第二<small>小字体标签</small></p>
    <p class="h3">第三<small>小字体标签</small></p>
    <p class="lead text-center">Bootstrap是Twitter推出的一个用于前端开发的开源工具包。<small>small</small>//lead类表示强调,能增大字体;text-center表示字体的对其齐式,还有其它对齐方式。
    <em>强调em</em>
    <cite>应用网址</cite>
    <b>加粗b</b>
    <hr />
    <abbr title="你还真是小狗啊?">动我你是小狗!</abbr><br />  //<abbt></abbr>在 HTML 4.0 中引入的,表示它所包含的文本是一个更长的单词或短语的缩写形式。其中title的值是鼠标放在<abbr>上才显示的
    <abbr title="你是^(* ̄(oo) ̄)^啊?"class="initialism">你敢动我?</abbr><br/>  //initialism将字体缩小了
    <blockquote class="pull-left">       //<blockquote></blockquote>表示引用标签,其class定义的的是引用内容的对齐方式
    <p>其实世界上本没有路,只是走的人多了,便成了路</p>
    <cite>来自<em>鲁迅的《故乡》</em></cite>
    </blockquote>
    </p>
    </div>
    </div>
    </div>
    </body>
    </html>

    总结:此章就是对一些标签和类的熟悉,具体的类可以查看.css类了解

  • 相关阅读:
    单片机I/O口推挽与开漏输出详解(力荐)
    wifi
    SDIO总线协议
    [hi3521] nand flash 的 boot 启动模式的区别?
    常见SOC启动流程分析
    PWM通过RC低通滤波器模拟DAC
    海思 core 电压动态调整
    USB线上/串口/I2C引脚串联电阻的作用
    几种flash存储芯片的用途和分类
    示波器分析I2C时序波形图
  • 原文地址:https://www.cnblogs.com/jinhong/p/6111254.html
Copyright © 2011-2022 走看看