2. 程式人生 > 其它 >HTML 10.20

HTML 10.20

阿新 • • 發佈：2021-10-20

HTML第四天

一 Bootstrap

1.1 框架

框架就是專案的基礎構建的設定。 我們在做專案的時候，會有一些相同的操作，如果每個專案在開始的時候 都需要這些基礎操作，但是如果每個專案都去在基礎操作上浪費時間此時是得不償失。所以 就有一幫大牛 將基礎操作給我們寫好了。我們就可以在他們寫好的內容基礎之上做二次開發。 所以我們就將其寫好的內容（程式碼）稱之為 框架。

簡單的說 框架就是大牛寫好的我們能直接使用的程式碼。 開發部 用框架研發部 寫框架 開源框架

1.2官網

https://www.bootcss.com/

簡潔、直觀、強悍的前端開發框架，讓web開發更迅速、簡單。

找到 BOOT3 選擇入門
入門的第一件事情 是讓我們下載 原因是 框架就是大牛寫好的程式碼 所以我們要使用的時候 首先要把大牛的程式碼下載下來
下載的方式 A 下載原始碼到我們的電腦 B BootstrapCDN遠端引用

首先我們建立一個工程 link遠端引入bootstrap

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 最新版本的 Bootstrap 核心 CSS 檔案 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>


</body>
</html>

1.3 table 元件


 此時 bootstrap給我們寫好了一個table 讓我們使用
​
​
<table class="table  table-striped table-bordered table-hover">
            <tr>
                <td>編號</td>
                <td>姓名</td>
                <td>年齡</td>
                <td>性別</td>
                <td>地址</td>
                <td>操作</td>
            </tr>
            <tr>
                <td>1</td>
                <td class="danger">張三</td>
                <td>18</td>
                <td>男</td>
                <td>北京</td>
                <td>操作</td>
            </tr>
            <tr>
                <td>1</td>
                <td class="warning">張三</td>
                <td>18</td>
                <td>男</td>
                <td>北京</td>
                <td>操作</td>
            </tr>
​
​

1.4 button


<button type="button" class="btn btn-danger">登入</button>
<button type="button" class="btn btn-primary">修改</button>
​
<button type="button" class="btn btn-primary btn-lg">修改</button>
<button type="button" class="btn btn-primary btn-xs">修改</button>
​
<button type="button" class="btn btn-primary btn-lg btn-block">修改</button>
​
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>

1.5 icon


1 找到自己喜歡的圖示
2 複製碼
3 在合適的位置 建立一個span標籤 並且新增class屬性 將碼賦值給class
​
​
         <td>
                    <button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-trash"></span>刪除</button>
                    <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-send"></span>修改</button>
                </td>
​
​

1.6 巨幕


​
        <div class="jumbotron"  style="text-align: center;background: linear-gradient(45deg,#020031,#6d3353);color: white;">
         <h1>歡迎來到學生管理系統</h1>
         <p>本系統QY146專屬</p>
         <p><a class="btn btn-primary btn-lg" href="#" role="button">瞭解更多</a></p>
        </div>

1.7 柵格系統


1 柵格系統簡介
Bootstrap 提供了一套響應式、移動裝置優先的流式柵格系統，隨著螢幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。它包含了易於使用的預定義類，還有強大的mixin 用於生成更具語義的佈局。
​
就是當前流式佈局的一個功能 讓我們可以快速完成頁面佈局的搭建 將一行分成12列 我們根本實際需求 搭建合適的列 再填入相應內容即可
​
2 柵格系統基本搭建
​
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!-- 最新版本的 Bootstrap 核心 CSS 檔案 -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
      <style type="text/css">
            div{border: 1px solid red;}
      </style>
    </head>
    <body>
        
        
        <div class="row">
            <div class="col-md-5">11111</div>
            <div class="col-md-6">22222</div>
            <div class="col-md-1">33333</div>
        </div>
        
        <div class="row">
            <div class="col-md-6">11111111</div>
            <div class="col-md-6">22222222</div>
        </div>
        
        <div class="row">
            <div class="col-md-2"><img src="" ></div>
            <div class="col-md-8"><input type="" name="" id="" value="" /><button></button></div>
            <div class="col-md-2"><img src="" ></div>
        </div>
        
    </body>
</html>
​
​
3 響應式佈局
​
​
 <div class="row">
            <div class="col-md-5  col-sm-1">11111</div>
            <div class="col-md-6  col-sm-1">22222</div>
            <div class="col-md-1  col-sm-10">33333</div>
        </div>
代表的含義就是 三個div 在電腦上面的比例是 5 6 1  如果在平臺顯示 就是 1 1 10
​
​
​
4 列偏移
​
    
        <div class="row">
            <div class="col-md-2  col-md-offset-2 ">11111</div>
            <div class="col-md-3  col-md-offset-4 ">22222</div>
        </div>
        
​
5 巢狀列
​
<div class="row">
            <div class="col-md-4  col-md-offset-4">
                <div class="row">
                    <div class="col-md-2">
                        <a href="">立即註冊</a>
                    </div>
                    <div class="col-md-4 col-md-offset-6">
                        <a href="">修改密碼</a>
                        <a href="">忘記密碼</a>
                    </div>
                </div>
            </div>
        </div>

​

練習


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
        <style type="text/css">
            div{border: 0px solid red;}
        </style>
    </head>
    <body>
        <div class="row" style=" line-height: 50px; height: 50px;">
            <div class="col-md-2 col-md-offset-1">
                <img src="https://uniportal.huawei.com/uniportal/images/huawei_logo.png?version=2.0" width="150px" />
            </div>
            <div class="col-md-3 col-md-offset-6">
                <div class="row">
                <div class="col-md-3 col-md-offset-2"><a href="" style="color: white;">聯絡我們</a></div>
                <div class="col-md-2 col-md-offset-1"><a href="" style="color: white;">幫助</a></div>
                <div class="col-md-4"><a href="" style="color: white;">簡體中文(中國)</a></div>
                
                </div>
            </div>
        </div>
        <h1 style="text-align: center; margin-top: 75px; font-weight: bold;">Uniportal帳號登入</h1>
        <div class="row">
            <div class="col-md-4 col-md-offset-4">
                <div class="row" style="text-align: center; line-height: 50px; height: 50px;">
                <div class="col-md-4" style="border-bottom: 2px solid red;">
                    <a href="" style="color: black;">賬號/郵箱登入</a>
                </div>
                <div class="col-md-4" style="border-bottom: 2px solid  #808080;">
                    <a href="" style="color: #808080;">手機號碼登入</a>
                </div>
                <div class="col-md-4" style="border-bottom: 2px solid  #808080;">
                    <a href="" style="color: #808080;">簡訊登入</a>
                </div>
                </div>
            </div>
        </div>
        
        
                <div class="row" style="margin-top: 50px;">
                    <div class="col-md-4 col-md-offset-4">
                        <div class="row" style="text-align: center;height: 50px;line-height: 50px;">
                            <form>
                             <div class="form-group">
                              <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Uniportal帳號/郵箱/W3帳號" style="height: 50px;">
                             </div>
                             <div class="form-group">
                              <input type="password" class="form-control" id="exampleInputPassword1" placeholder="密碼" style="height: 50px;">
     </div>
     <button type="submit" class="btn btn-danger btn-block btn-lg" >登入</button>
</form>
</div>
</div>
</div>

<div class="row" style="margin-top: 150px;">
<div class="col-md-4 col-md-offset-4">
<div class="row">
<div class="col-md-2"><a href="" style="color: #9fceff;">立即註冊</a></div>
<div class="col-md-4 col-md-offset-6"><a href="" style="color: #9fceff;">忘記密碼</a> <a href="" style="color: #9fceff;">修改密碼</a></div>
</div>
</div>
</div>
</body>
</html>
​

相關推薦

HTML 10.20

HTML第四天 一 Bootstrap 1.1 框架 框架就是專案的基礎構建的設定。 我們在做專案的時候，會有一些相同的操作，如果每個專案在開始的時候 都需要這些基礎操作，但是如果每個專案都去在基礎操作上浪費時間此時是得不

uva 246 10-20-30遊戲

對於每個手牌，直接用雙向佇列去維護，然後用vactor去維護所有小牌堆，對於vactor儲存的全部狀態，用set去重來保證不達到重複狀態。其他的步驟直接模擬完成即可。

最近更改的部分功能——部落格運營日誌10.20

<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />正所謂是“木秀於林，風必摧之”呀，小廢物不過是由於自身勤奮好學樂觀積極向上的人生態度得到了很多fans

10.20

day09作業: 必做題:========================================第一題:1.定義一個Animal類,包含如下行為:eat() 列印\"要吃飯\"run() 列印\"會跑步\"sleep() 列印\"要睡覺\"2.定義一個Dog類,繼承Animal類,重寫eat(),ru

2020-10-20

資料探勘報告 本週對於網路結構還有訓練過程進行了改進，但是實際上並沒有什麼用，並且分數還有所下降，使用matlab整合的神經網路功能還是太弱了，並且訓練速度很慢，這周計劃使用以下python的pytorch來進行

AIPL實驗記錄-神經網路視覺化（2020.10.20）

AIPL實驗記錄-神經網路視覺化 神經網路視覺化一、ConvNetDraw二、NN-SVG 神經網路視覺化

2020.10.20--PS--測試條的製作、曝光效果、黃金效果

測試條的製作 1.開啟一張人物圖片，新建一個黑白調整圖層 2.用切片工具把圖片選住圖片點右鍵“劃分切片”，水平劃分為五塊 3.用矩形選框工具選中第一個切片，進行曝光值設定 4.分別選中第二、三、四塊進行曝

網路系統原理實驗（2）：網路的擷取實驗報告2020.10.20

一、實驗名稱 SignalTap II Logic Analyzer使用入門 二、實驗內容 1.啟動quartus，在工具tool中啟動Signaltap II Logic Analyzer

2020-10-20 Matlab 想儲存jpg

最近因為需要，想把一個3D的nii 影象，另存成jpg 影象後。 Matlab 本身儲存影象很簡單。

2020.10.20讀 PointNet++： Deep Hierarchical Feature Learning on Point Sets in a Metric Space

PointNet++： Deep Hierarchical Feature Learning on Point Sets in a Metric Space 1. 背景資訊2.方法2.1 回顧PointNet2.2 層級點集特徵學習2.3 在非均勻點取樣密度下的魯棒特徵學習2.4 點雲分割中的點

10-20 Spring框架（二）—— IoC核心

一、概念 　　IOC（控制反轉）就是應用本身不負責依賴物件的建立及維護，依賴物件的建立及維護是由外部的容器負責，這樣控制權就由應用轉移到外部容器，控制權的轉移就是所謂的反轉。

10-20 Spring框架（三）—— AOP核心

一、概念 　　AOP（Aspect Oriented Programming）的縮寫，翻譯為面向切面程式設計或面向方面程式設計，通過預編譯方式和執行期動態代理實現程式功能的統一維護的一種技術。　

幣圈楚河：10.20早間比特幣行情分析 暴漲後橫盤空頭何時到來

交易市場瞬息萬變，沒有哪個分析師百分百的分析都是正確的，很多交易者也具備分析師的素質，有那樣的能力，同意也會做分析，因為現貨合約等等都是一種單一的交易，分析起來也不難。分析師比交易者看的準就

CSDN部落格徹底去廣告，自動展開，去彈窗 2020.10.20 親測有效

CSDN 部落格由於優秀的SEO,開發者雲集。然而由於廣告多、各種與博文無關的彈窗、進入部落格還需點選閱讀全文......等原因廣受詬病。

10.20-PHP基礎和運算子

PHP PHP語法入門 PHP是編譯型語言 編譯語言和解釋語言的區別在於是否儲存最終的可執行程式

2020-10-20 activiz報錯（System.Exception: error: could not get registered type.）

報錯原因 自定義了一些滑鼠事件，由於vtkInteractorStyleTrackballCamera沒有定義成全域性變數。在呼叫其他函式之後，c#對觸發事件的物件的引用超出範圍。 補充 應該vtkRenderWindowInteractor相關的均應定

LeetCode 56-64 until 10-20

56. 合併區間 class Solution { public static int[][] mySort(int[][] array){ Arrays.sort(array, (arr1, arr2) -> arr1[0] == arr2[0] ? arr1[1] - arr2[1] : arr1[0] - arr2[0]);

10-20彙編

技術標籤：王爽組合語言學習筆記 title: 10.20彙編 tags: [] id: ‘273’ categories: 學習

html 10-HTML基礎回顧

10-HTML基礎回顧 #本文主要內容 html 的常見元素 html 元素的分類 html 元素的巢狀關係

作業：分析以下需求，並用程式碼實現 1.已知日期字串:“2015-10-20“,將該日期字串轉換為日期物件 2.將(1)中的日期物件轉換為日曆類的物件 3.根據日期物件獲取改日期是

技術標籤：calendarsimplesimpleDate 分析以下需求，並用程式碼實現 1.已知日期字串:“2015-10-20”,將該日期字串轉換為日期物件2.將(1)中的日期物件轉換為日曆類的物件3.根據日期物件獲取改日期是星期幾,以及這