引入bootstrap和jquery

标题

对齐

正文强调

引言

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap布局</title>
    <!--网页源数据跨平台兼容做一些说明-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--跨屏自适应说明-->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h1>bootstrap排版</h1>

<!--标题-->

<div class="container">
    <div class="row">
        <!--标题-->
        <div class="page-header">
            <h1>这是bootstrap标题</h1>
        </div>
    </div>
    <div class="row">
        <!--small：二级标题-->
        <h1>原本的h1标题<small>加了small标签的h1标题</small></h1>
        <h2>原本的h2标题<small>加了small标签的h2标题</small></h2>
        <h3>原本的h3标题<small>加了small标签的h3标题</small></h3>
        <h4>原本的h4标题<small>加了small标签的h4标题</small></h4>
        <h5>原本的h5标题<small>加了small标签的h5标题</small></h5>
        <h6>原本的h6标题<small>加了small标签的h6标题</small></h6>
    </div>
    <div class="row">
        <!--正文突出显示：字号变大，加粗-->
        <p>这是普通段落</p>
        <p class="lead">这是class=lead的段落</p>
    </div>
</div>

<!--对齐-->
<div class="container">
    <div class="row">
        <p class="text-left">左对齐</p>
        <p class="text-justify">两边对齐  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, adipisci amet blanditiis
            consequuntur deleniti dolore eum fugit in inventore molestias non, odit placeat quaerat qui reiciendis
            repellat rerum saepe temporibus.</p>
        <p class="text-right">右对齐</p>
        <p class="text-center">中间对齐</p>

    </div>
</div>

<!--正文强调-->
<div class="container">
    <div class="row">
        <p class="text-muted">次要：text-muted</p>
        <p class="text-primary">主要：text-primary</p>
        <p class="text-success">成功：text-success</p>
        <p class="text-info">信息：ext-info</p>
        <p class="text-warning">警告：text-warning</p>
        <p class="text-danger">危险：text-danger</p>
    </div>
</div>

<!--引言：blockquote-->
<div class="container">
    <div class="row">
        <blockquote>
            <p>内容XXXXX</p>
            <small>--摘自XXX</small>
        </blockquote>
    </div>
</div>
</body>
</html>

测开之路一百零七：bootstrap排版的更多相关文章

  1. 测开之路一百零九：bootstrap列表

    bootstrap列表 引入bootstrap标签 原本的效果 水平显示 bootstrap列表 列表组合框 在组合框后面加备注 突出显示 a标签列表 <!DOCTYPE html>< ...

  2. 测开之路一百零六：bootstrap布局

    可以在html的head里面加一些说明 <meta http-equiv="X-UA-Compatible" content="IE=edge">& ...

  3. 测开之路一百零五：bootstrap的两种引用方式

    一:下载到本地引用: 3.3.7版本:https://getbootstrap.com/docs/3.3/getting-started/#download 下载后解压到本地项目中引用 第二种,cdn ...

  4. 测开之路一百零四：jquery操作样式

    jquery操作样式 添加样式.删除样式 切换样式 css("属性","值") css("属性","值"), 修改多个 ...

  5. 测开之路一百零三：jquery元素和标签的插入与删除

    标签内插入 标签外插入 给标签加标签 !DOCTYPE html><html lang="en"><head> <meta charset=&q ...

  6. 测开之路一百零二：jquery元素操作

    jquery对元素操作,获取/替换文本(.text()).html(.html()).属性(.attr()).值(.val()) html代码 text() 根据标签获取文本值 同一个标签下筛选明细 ...

  7. 测开之路一百零一：jquery文字特效、动画、方法链

    文字特效 html内容 1.卷起/展开 2.隐藏/显示 3.淡入淡出 <!DOCTYPE html><html lang="en"><head> ...

  8. 测开之路一百五十五：jquery-validation前台数据验证

    前面做的wtform验证是服务器端的验证,需要把数据传输到服务器,服务器验证后再吧结果传输到前端,网络慢的时候,用户体验不好,所以需要前端验证,且后端验证不能少 传统的js或者jquery如果要验证信 ...

  9. 测开之路一百三十八：会话管理之session

    session管理和使用,需要用到flask的session模块和设置安全码:app.secret_key 比如列表页和编辑功能只能给admin用 列表页 编辑页 添加session 登录成功时,把u ...

随机推荐

  1. asp.net Excel导入和导出

    1.Excel数据导入到数据库中: //该方法实现从Excel中导出数据到DataSet中,其中filepath为Excel文件的绝对路径,sheetname为表示那个Excel表:        p ...

  2. OD消息断点

    [文章作者]: icefisher[作者邮箱]: 181712814@qq.com[软件下载]: [软件名称]: echap518.exe(只是供学习的crackme)[加壳方式]: 里面直接有个un ...

  3. AFNetworking2.0源码解析<四>

    结构 AFURLResponseSerialization负责解析网络返回数据,检查数据是否合法,把NSData数据转成相应的对象,内置的转换器有json,xml,plist,image,用户可以很方 ...

  4. poj3494Largest Submatrix of All 1’s(最大全1子矩阵)

    题目链接:http://poj.org/problem?id=3494 题目大意: 出1个M*N的矩阵M1,里面的元素只有0或1,找出M1的一个子矩阵M2,M2中的元素只有1,并且M2的面积是最大的. ...

  5. QKeyEvent

    #include<QKeyEvent>键盘事件由两个重载函数,实现即可:  void keyReleaseEvent(QKeyEvent *event);  void keyPressEv ...

  6. react 详细解析学习笔记

    React的介绍: React来自于Facebook公司的开源项目 React 可以开发单页面应用       spa(单页面应用) react 组件化模块化  开发模式 React通过对DOM的模拟 ...

  7. Facebook再现丑闻，约100位应用程序开发人员偷看用户数据

    Facebook今天披露了另一起安全事件,承认大约100名应用程序开发人员可能不正确地访问了某些Facebook组中的用户数据,包括他们的姓名和个人资料图片. 在周二发布的博客文章中,Facebook ...

  8. ==和is的区别 以及编码和解码

    is和==的区别 1. id() id是python的一个内置函数,通过id()可以查看变量表的值在内存中的地址. s1 = 2 print(id(s1)) # 1514368064 s2 = 2 p ...

  9. day04记

    useGeneratedKeys useGeneratedKeys这个只在insert语句中有效,正常情况下useGeneratedKeys默认为false 当useGeneratedKeys为tru ...

  10. layui js动态添加的面板不能折叠

    layui 动态添加dom后一般调用 layer.form.render()更新dom就可以了,但是我动态添加一个面板后form.render()就没有效果,要用layui.element.rende ...