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"><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小時內與您取得聯系。

整合營銷服務商