Bootstrap4表格—图像形状—Jumbotro

Bootstrap4表格—图像形状—Jumbotron—信息提示框文档（一）章

ootstrap4 教程

Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。

Bootstrap4 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。

谁适合阅读本教程？

只要您具备 HTML 和 CSS 的基础知识，您就可以阅读本教程，进而开发出自己的网站。在您学习完本教程后，您即可达到使用 Bootstrap 开发 Web 项目的中等水平。

阅读本教程前，您需要了解的知识：

在您开始阅读本教程之前，您必须具备 HTML 、 CSS 和 JavaScript 的基础知识。如果您还不了解这些概念，那么建议您先阅读我们的这些教程:

HTML 教程
CSS 教程
JavaScript 教程

Bootstrap4 实例

Boostrap4 与 Bootstrap3

Boostrap4 是 Bootstrap 的最新版本，与 Bootstrap3 相比拥有了更多的具体的类以及把一些有关的部分变成了相关的组件。同时 Bootstrap.min.css 的体积减少了40%以上。

Boostrap4 放弃了对 IE8 以及 iOS 6 的支持，现在仅仅支持 IE9 以上以及 iOS 7 以上版本的浏览器。如果对于其中需要用到以前的浏览器，那么请使用 Bootstrap3。

Bootstrap4 安装使用

我们可以通过以下两种方式来安装 Bootstrap4：

使用 Bootstrap 4 CDN。
从官网 getbootstrap.com 下载 Bootstrap 4。

Bootstrap 4 CDN

国内推荐使用 BootCDN 上的库：

Bootstrap4 CDN

<linkrel="stylesheet"href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"><scriptsrc="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script><scriptsrc="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script><scriptsrc="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

此外，你还可以使用以下的 CDN 服务：

国内推荐使用 : https://www.staticfile.org/
国际推荐使用：https://cdnjs.com/

下载 Bootstrap 4

你可以去官网 https://getbootstrap.com/ 下载 Bootstrap4 资源库。

注：此外你还可以通过包的管理工具 npm、 gem、 composer 等来安装：
npm install bootstrap@4.0.0-beta.2gem 'bootstrap', '~> 4.0.0.beta2'composer require twbs/bootstrap:4.0.0-beta.2

创建第一个 Bootstrap 4 页面

1、添加 HTML5 doctype

Bootstrap 要求使用 HTML5 文件类型，所以需要添加 HTML5 doctype 声明。

HTML5 doctype 在文档头部声明，并设置对应编码:

<!DOCTYPEhtml><html><head><metacharset="utf-8"></head></html>

移动设备优先

为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如下所示：

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

width=device-width 表示宽度是设备屏幕的宽度。

initial-scale=1 表示初始的缩放比例。

shrink-to-fit=no 自动适应手机屏幕的宽度。

容器类

Bootstrap 4 需要一个容器元素来包裹网站的内容。

我们可以使用以下两个容器类：

.container 类用于固定宽度并支持响应式布局的容器。
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

两个 Bootstrap 4 页面

Bootstrap4 .container 实例

<divclass="container"><h1>我的第一个 Bootstrap 页面</h1><p>这是一些文本。</p></div>

尝试一下 ?

图是一至六级标题.HTML代码是怎么样的？（自学示例1）

一级标题至六级标题

标题标签表示一段文字的标题或主题，并支持多层的内容结构。例如一级标题采用<h1>，二级标题采用<h2>，其他级别标题以此类推。HTML共提供了六级标题 <h1>~<h6>.并赋予了标题一定的外观，所有标题字体加粗，<h1>最大<h6>最小。

通过使用WebStorm工具，代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>不同等级的标题标签对比</title>
</head>
<body>
<h1>头条号</h1>
<h2>头条号</h2>
<h3>头条号</h3>
<h4>头条号</h4>
<h5>头条号</h5>
<h6>头条号</h6>
</body>
</html>

是不是很简单，自己操作试一下吧。

这里的<html lang="en">可以理解为我编辑的这个页面是英文的。Chrome之类的浏览器会提示是否需要翻译。

elenium的定位元素方式是基于html语言构建的，所以学习web自动化是很有必要去学习html

HTML

HTML 全名 HyperText Markup Language(超文本标记语言),是一种用于创建网页的标准标记语言。常常和css js一起使用来构建漂亮的页面。

HTML构成

HTML的元素的以标签、属性、text、内嵌标签构成

下面以百度为例

在我们看到的页面上展示的内容都在内嵌标签有（head 头部信息、body 体信息）

在web自动化测试中重要的是body里内嵌标签中，因为展示的页面操作都是在body 中完成的

html脑图结构

常见HTML标签

p : 段落文本，代表进行换行

h1-h6:标题从H1（最大）到H6（最小） ,标题大小

div：对html页面进行布局，填充数据，容器，也有换行作用

span：对html页面进行布局，填充数据，容器，在一行独立设置样式

ul: 将 <ul> 标签与 <li> 标签一起使用，创建无序列表组合：<ul><li></li></ul>

web自动化测试的重点

a：超链接跳转到页面，需要配合 href，一般都是<a href='www.baidu.com'> </a>使用

img： 图片的超链接，组合<img src="#图片链接#">

iframe：

在html页面里面嵌套html页面，src 页面链接 width 宽度 height 长度

组合 <iframe src="http://www.toutiao.com" width="400" height="500"></iframe>

select标签：组合<form><selevct></select> </form>

select的作用下拉选择框

form标签：

form的作用form表单是前端和后端进行用户数据交互的一种方式，前端编写的数据可以通过form表单传递给后端

action:接口地址，根据需求更改请求的接口地址 method：请求方法

input： input:通常有name和value属性

格式：<input type="" name="" value="">

代表输入，基本web自动化测试都必须要测的内容

<input name> ：默认属性输入框

组合：name 属性 <input name="123" value=“number”>

input name属性的作用：

当我们选择（输入）的数据传递给后端时会进行接收

input value值的作用：

后端接收的数据如果是json格式的话就会以接收{"name（123）"="value（number）"}

input type 的作用：

设定输入格式，不设置格式，默认是text 文本输入

<input name='password' type='password'>：

type='password'：代表输入内容带*号，用于设置密码框

type="text"：默认是text 文本输入

type="checkbox"：代表多选

type="radio"：代表单选框

type="file"：选择文件

type="submit" 提交按钮（配合form表单使用，将form内的数据提交到后端）

input placeholder的作用：输入框提示

input disable 的作用：

禁用输入框，输入框置灰，如果想输入在F12找到该元素并且去除

input readonly 的作用：只读输入框

样式代码与演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>web自动化</title>
</head>
<form action="http://httpbin.org/post" method="post">
<div>div也是个容器，对html页面进行布局
    <h4>标题h4<span>对html页面进行布局，这是个容器</span></h4>
    <a href="http://www.toutiao.com">点击我，跳转头条<img
            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANgAAAA2CAMAAACSsKctAAAANlBMVEVHcEzuQEDwRETyRUX3TEzvQkLuQEDuQUHuQUHvQEDuQUHuQEDvQkLuQEDuQUHwQUHxQkLtQEDKaksGAAAAEXRSTlMAxiweDlyo49Nri/F5+bhLOapXaIgAAATMSURBVGje7ZrpsqQqDIAb2VEE3/9lx263AAmu3XVv1cn8mFOtIh+JIQuvFyFSzdK8/jsSrbg7BG+HSdjPZi3iJPTchR7a7iYam7mGNvwKTM5vlOQd6n3Z37IhN6zSNhW1TsJqMt/TwQk6G3gxmt0DC5/LfpxS9U38wOJ9RJN38uG4KGBR0wRNxrcHtn4dlPjpv4pCYzqEEffBfAG2XDC9sxyCUbbfH3wVDdbkS2P4FzQGRR4As8NdsEYXy01Y4xMa28C6KljT3gUDXNtYOn5fY3UwNtwEA9+XA397+zONxR03fQ1MerjG0Is4QYK5riLzEMDdC4+CuQoY99sKoW9R20z5zsKwN0gAczDFUohdPzSKRpw4j9Yp0+Jg2GgCrHBf3sAVuIytC8u4RjIwYmGOh8AMvTutfLtgydR8ZjzCgeV32M7eFlyZj2T8GY3lfHwNmChTGmcP5tECNNFBf4m4AqEGhGt8rYEj2i+AwUhwFCocgOs+ok383MFfMecdoGYUHFwkW76Jz5kiHlmQ4TtPY48+iNAnfqgX1a+vtNMueXyjvqox5WTkJFgthq3t0i2ydhY+4MsbYhKMtEu6dxFseqw1Gd+s2raasylPRgCluoJJgnnU3SYaHbS8Y4rJBv3h42AFdN1gGzwWZtgcMHD3Xk5BfYOz67qlsWKDnq3G1DP74DTCZVwQVbA1X57WpWWqk40od4svgInKBrtUPJSpfGPGyYYC6zma/OjJm0RzBcwcBONltAzKIVYxfyBObJlbFAHAtKSyOla4x+c1FiuhAxvOiDcpWBKo4GDbp3sLDA2CJR07EGCaUZYJwUys5OGgBhdYCRYFIWQQHKzrjU/AXCUdQ8C0e0+Y295XwbSsFhiS4qLUC9hePsZ2QqqVT4I3NvtgvrfbXQLxkwsYUoWsgI37uX4GbOXj231+J332DPHsXKb+cknCkC2gkZ1iLQE2RtRPgiVJq6mAadVtUKL5CAea69v9qGxxs/KTMLFrVaozYLLi7UcwrVxWY3XYtjfu32q07cOF/Ob7YKpWLm0Emewj+7m43Ud5EGzdAvjJKnz/jTbCg2B2OBIpXgBzZl9a/xFdhBChwYWXYIEYe1GYzn6fHlPIE3rJDhBBTPxIPHYng5bDObEXQqrEK34PTP+B/c/A/kzxD+wUWLB1AXVJd8cUm3Jkv1W/SpmGlsiVOUw32GxPbMVbZtA9WwneGjo+Xun/34s8hEGLqQ+AgUaVff0cDHCpJ7stSZvKTVW//vNPoXVuNV3rVQ7WVR+juRjRfLqtMeuzkWOtG2SxdtrnuehrSc9utyBpwjwB5sp23eqdI33Og5Wm6IZan3eXKz/wcc8UYdl87ZOsrUtDZmzz6xIwoU9nB2CHKw5FLGBWVkQXzrTsu4Fvw1K+JGRWmjoPiTjto6eqysMeF08NFA0chRVu8jNRyzpogXpF6rF9LuSw2MVzHtnphMxRNLgj6IasdpCBNef8B+CKj53zyI5tWOqdATsP0VP7GPoYJd1QDQuuagw2f30xj9URaFF6MM8pMPSxfa7w4FmqxtTb4YgjCOVPReQRanvgKa5TGuvQ7j9+rq5QD6aNMqRa/LffKb9JvQoR6Al9XCQyrCZCIL5eX5Z4+QEscJfekj/2D7KhSDEKe9jHAAAAAElFTkSuQmCC">
    </a>
    <!--    下面是html页面中嵌套另一个html页面-->
</div>
<div></div>
<iframe src="http://www.toutiao.com" width="400" height="500"></iframe>
<!-- 段落-->
<p>这是第一行段落</p>
<p>这是第二行段落</p>
<p>菜单标题</p>
<ul>无序列表
    <li>菜单1</li>
    <li>菜单2</li>
    <li>菜单3</li>
</ul>
<!--    用户输入-->
username:<input name="username" placeholder="输入账号" >
<p></p>
password:<input type="password" name="password" placeholder="输入密码">
    <p></p>
    禁用框 <input name="text"  disabled>
    <p></p>
    只读框 <input name="text" placeholder="只能复制框内文字" readonly>
<p>choice you like color</p>
<div>

    <!--        radio代表的意思是单选-->
    <input type="radio" name="like_color" value="红色">red
    <input type="radio" name="like_color" value="蓝色">blue
    <input type="radio" name="like_color" value="绿色">green

</div>
<p>choice you not like color</p>
<div>
    <!--        checkbox代表的意思是多选-->
    <input type="checkbox" name="not_like_color">yellow
    <input type="radio" name="not_like_color">white
    <input type="radio" name="not_like_color">black
    <p>选择文件</p>
    <input type="file" name="file" >
</div>
<p>choice you not like animal</p>

<select name="dog">
    <option>dog</option>
    <option>cat</option>
    <option>fish</option>
</select>
    <p></p>
    <input type="submit" width="50" height="20" value="点击提交">
</form>
</html>

作为web自动化测试，了解具体是什么意思，以及如何进行元素的定位调用即可，当然全能弄懂那当然是更好的

在线咨询

上一篇：华为云PB级数据库GaussDB(for Redis
下一篇：2019年最接地气的PHP面试题（一）

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商