引入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. php-redis的配置与使用

    从此处下载 https://codeload.github.com/phpredis/phpredis/zip/develop 也就php-redis的安装包,在zip格式,在windows下解压,将 ...

  2. html常见标签及用法整理

    <!DOCTYPE html> <!--#浏览器的兼容模式--> <html lang="en"> <head> <!--he ...

  3. python面向对象--类的装饰器

    # def deco(obj): # print("=====",obj) # obj.x=1 # return obj # @deco#===> test = deco(t ...

  4. 【转】/etc/inittab文件详解

    转自:https://www.cnblogs.com/ricks/p/10020886.html Linux在完成核内引导(已经被载入内存,开始运行,并已初始化所有的设备驱动程序和数据结构等)之后,就 ...

  5. Qt应用程序的发布

    1 Windows平台上的应用程序发布 Windows发布工具 windeployqt.exe是Qt自带的Windows平台发布工具.windeployqt.exe文件在Qt的bin目录下,Qt的每一 ...

  6. JS 图片转blob 转base64

    //转换为blob有跨域限制 var loadImageToBlob = function (url, callback) { if (!url || !callback) return false; ...

  7. Python---进阶---多线程---threading

    一. 使用多线程去播放两个播放列表,一个是movie,一个是music _thread threading ------------------------------------------ imp ...

  8. 在浏览器下载pdf,或者txt文档是会直接打开

    window.location.href = url会直接打开,解释大概是因为浏览器自身可以解析.pdf或者txt.解决方法如下: 本来就要用a标签里面加上download属性的,结果发现不行,就算了 ...

  9. Spring Cloud（2）主要组件应用实例

    SpringCloud SpringCloud 为开发人员提供了快速构建分布式系统的一些工具,包括配置管理.服务发现.断路器.路由.负载均衡.微代理.事件总线.全局锁.决策竞选.分布式会话等等.它运行 ...

  10. 交互输入与for语句

    交互输入与for语句 1.   交互输入 read命令可以同时定义多个变量值:输入的内容默认以空格为分隔符,将值输入到对应的变量中:read尽量避免交互 如果默认值过多,最后所有的值会被赋予给最有一个 ...