2. 程式人生 > >【JavaWeb_學習筆記】Bootstrap框架練習

【JavaWeb_學習筆記】Bootstrap框架練習

阿新 • • 發佈：2019-01-06

運用Bootstrap框架復現Bootstrap中文網首頁

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>仿bootstrap中文網</title
 
>
        <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" />
        <script type="text/javascript" src="bootstrap-3.3.7-dist/js/jquery.min.js" ></script>
        <script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js" ></script>
    </head
 
>
    <style>
        .center-vertical {
            position:relative;
            top:50%;
            transform:translateY(-50%);
        }
        .thumbnail{
            height: 350px;
        }
    </style>
    <body>
        <!--導航欄-->
        <nav class="navbar navbar-inverse navbar-fixed-top"
 
>
            <!--navbar-inverse黑底白字   navbar-fixed-top固定到頂部-->
            <div class="container">
                <div class="navbar-header"> 
                    <button type="button" class="navbar-toggle collapse" data-toggle="collapse" data-target="#menu">
                        <!--data-toggle，用於告訴 JavaScript 需要對按鈕做什麼; data-target，指示要切換到哪一個元素-->
                        <span class="sr-only">Toggle navigation</span>
                        <!--三個帶有 class .icon-bar 的 <span> 建立所謂的漢堡按鈕。這些會切換為 .nav-collapse <div> 中的元素-->
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">Bootstrap中文網</a>
                </div>
                <div class="collapse navbar-collapse" id="menu">
                    <ul class="nav navbar-nav">
                        <li><a href="#">Bootstrap2中文文件</a></li>
                        <li><a href="#">Bootstrap3中文文件</a></li>
                        <li><a href="#">Bootstrap4中文文件</a></li>
                        <li><a href="#">Less教程</a></li>
                        <li><a href="#">jQuary API</a></li>
                        <li><a href="#">網站例項</a></li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">關於</li>
                    </ul></a>
                </div>
            </div>
        </nav>
        <!--超大螢幕-->
        <div class="jumbotron " style="background: #482147;color: wheat;height: 500px;">
            <div class="container center-vertical">
                <center>
                    <h1>Bootstrap</h1>  
                    <h2>簡潔、直觀、強悍的前端開發框架，讓web開發更迅速、簡單。</h2>
                    <p>
                        <a class="btn btn-lg btn-shadow btn-primary" href="#" target="_blank">Bootstrap3中文文件(v3.3.7)</a>
                    </p>
                    <ul>
                        <li><a href="#" target="_blank">Bootstrap2中文文件(v2.3.2)</a></li>
                    </ul>
                </center>
            </div>  
        </div>
        <!--微博和問答社群-->
        <center>
            <div class="container">
              <ul class="list-inline list-unstyled">
                <li>
                  <a style="text-decoration: none;" href="http://wenda.bootcss.com" title="Bootstrap問答社群" target="_blank" >
                     Bootstrap問答社群
                  </a>
                </li>|
                <li>
                  <a style="text-decoration: none;" href="http://weibo.com/bootcss" title="Bootstrap中文網官方微博" >
                    新浪微博：@Bootstrap中文網</a>
                </li>
              </ul>
            </div>
        </center>

        <div class="container">
            <center>
                <h2 >Bootstrap相關優質專案推薦</h2>
                <p >這些專案或者是對Bootstrap進行了有益的補充，或者是基於Bootstrap開發的</p>
            </center>
            <hr style=" height:2px;border:none;border-top:2px solid #6B3454;width:1200px" />
            <!--第一行-->
            <div class="row">
                <div class="col-md-3">
                    <!--thumbnail成縮圖構成-->
                    <div class="thumbnail">
                        <a href="#" title="Bootstrap 編碼規範" ><img src="img/codeguide.png"></a>
                        <div class="caption text-center">
                            <h3><a href="#" title="Bootstrap 編碼規範" style="text-decoration:none">Bootstrap 編碼規範<br/><small>by @mdo</small></a></h3>
                            <p>Bootstrap 編碼規範：編寫靈活、穩定、高質量的 HTML 和 CSS 程式碼的規範。</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <!--thumbnail成縮圖構成-->
                    <div class="thumbnail">
                        <a href="#" title="TypeScript 中文手冊"><img src="img/typescript.png"></a>
                        <div class="caption text-center">
                            <h3><a href="#" title="TypeScript 中文手冊"style="text-decoration:none">TypeScript<br/><small>中文手冊</small></a></h3>
                            <p>TypeScript 是由微軟開源的程式語言。它是 JavaScript 的一個超集，而且本質上向這個語言添加了可選的靜態型別和基於類的面向物件程式設計。</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <!--thumbnail成縮圖構成-->
                    <div class="thumbnail">
                        <a href="#" title="Python 全棧開發教程 by 路飛學城"><img src="img/luffycity.jpg"></a>
                        <div class="caption text-center">
                            <h3><a href="#" title="Python 全棧開發教程 "style="text-decoration:none">Python 全棧開發教程 <br/><small>免費書籍+視訊教程</small></a></h3>
                            <p>使用Python + Bootstrap快速構建在各種Web專案，快速進入人工智慧、資料分析、爬蟲。雲端計算、自動化運維等領域的必備語言。</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <!--thumbnail成縮圖構成-->
                    <div class="thumbnail">
                        <a href="#" title="React - 用於構建使用者介面的 JavaScript 框架"><img src="img/react.png"></a>
                        <div class="caption text-center">
                            <h3><a href="#" title="React - 用於構建使用者介面的 JavaScript 框架 "style="text-decoration:none">React <br/><small>用於構建使用者介面的 JavaScript 框架</small></a></h3>
                            <p>React 起源於 Facebook 的內部專案，是一個用於構建使用者介面的 JavaScript 庫。</p>
                        </div>
                    </div>
                </div>
            </div>

            <!--第二行-->
            <div class="row">
                <div class="col-md-3">
                    <!--thumbnail成縮圖構成-->
                    <div class="thumbnail">
                        <a href="#" title="Webpack 是前端資源模組化管理和打包工具" ><img src="img/webpack.png"></a>
                        <div class="caption text-center">
                            <h3><a href="#" title="Webpack 是前端資源模組化管理和打包工具" style="text-decoration:none">Webpack<br/><small>是前端資源模組化管理和打包工具</small></a></h3>
                            <p>Webpack 是當下最熱門的前端資源模組化管理和打包工具。它可以將許多鬆散的模組按照依賴和規則打包成符合生產環境部署的前端資源。</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <!--thumbnail成縮圖構成-->
                    <div class="thumbnail">
                        <a href="#" title="jQuery API 中文文件/手冊"><img src="img/jqueryapi.png"></a>
                        <div class="caption text-center">
                            <h3><a href="#" title="jQuery API 中文文件/手冊"style="text-decoration:none">jQuery API<br/><small>中文手冊</small></a></h3>
                            <p>根據最新的 jQuery 1.11.x 和 2.1.x 版本翻譯的 jQuery API 中文文件/手冊。</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <!--thumbnail成縮圖構成-->
                    <div class="thumbnail">
                        <a href="#" title="w3schools 原版國內映象"><img src="img/w3schools.png"></a>
                        <div class="caption text-center">
                            <h3><a href="#" title="w3schools 原版國內映象 "style="text-decoration:none">w3schools <br/><small>原版國內映象</small></a></h3>
                            <p>w3schools.com 是最受歡迎的前端技術教程網站，但是國內使用者一直不能訪問，並且國內的中文翻譯版本十分陳舊。因此做了個映象，希望英文好的同學直接去看原版教程吧！</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <!--thumbnail成縮圖構成-->
                    <div class="thumbnail">
                        <a href="#" title="Preact - 一個只有 3kB 大小的 React 替代品，擁有與 React 相同的 API、元件和虛擬 DOM。"><img src="img/preact.png"></a>
                        <div class="caption text-center">
                            <h3><a href="#" title="Preact - 一個只有 3kB 大小的 React 替代品，擁有與 React 相同的 API、元件和虛擬 DOM。"style="text-decoration:none">Preact<br/><small>React 輕量替代方案。</small></a></h3>
                            <p>Preact - 一個只有 3kB 大小的 React 替代品，擁有與 React 相同的 API、元件和虛擬 DOM。</p>
                        </div>
                    </div>
                </div>
            </div>

            <!--第三行-->
            <div class="row">
                <div class="col-md-3">
                    <!--thumbnail成縮圖構成-->
                    <div class="thumbnail">
                        <a href="#" title="Node.js 是一個基於 Chrome V8 引擎的 JavaScript 執行環境。Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型，使其輕量又高效。" ><img src="img/nodejs.png"></a>
                        <div class="caption text-center">
                            <h3><a href="#" title="Node.js 是一個基於 Chrome V8 引擎的 JavaScript 執行環境。Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型，使其輕量又高效。" style="text-decoration:none">Node.js<br/><small>中文文件 / 手冊</small></a></h3>
                            <p>Node.js 是一個基於 Chrome V8 引擎的 JavaScript 執行環境。Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型，使其輕量又高效。</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <!--thumbnail成縮圖構成-->
                    <div class="thumbnail">
                        <a href="#" title="Yarn 是一個快速、可靠、安全的依賴管理工具。是 NPM 的替代品。"><img src="img/yarn.png"></a>
                        <div class="caption text-center">
                            <h3><a href="#" title="Yarn 是一個快速、可靠、安全的依賴管理工具。是 NPM 的替代品。"style="text-decoration:none">Yarn<br/><small>中文手冊</small></a></h3>
                            <p>Yarn 是一個快速、可靠、安全的依賴管理工具。是 NPM 的替代品。</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <!--thumbnail成縮圖構成-->
                    <div class="thumbnail">
                        <a href="#" title="NPM 中文文件"><img src="img/npm.png"></a>
                        <div class="caption text-center">
                            <h3><a href="#" title="NPM 中文文件 "style="text-decoration:none">NPM<br/><small>中文文件 </small></a></h3>
                            <p>NPM（node package manager）是 Node.js 世界的包管理器。NPM 可以讓 JavaScript 開發者在共享程式碼、複用程式碼以及更新共享的程式碼上更加方便。</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <!--thumbnail成縮圖構成-->
                    <div class="thumbnail">
                        <a href="#" title="Vue.js - 漸進式 JavaScript 框架"><img src="img/vuejs.png"></a>
                        <div class="caption text-center">
                            <h3><a href="#" title="Vue.js - 漸進式 JavaScript 框架"style="text-decoration:none">Vue.js<br/><small>中文文件</small></a></h3>
                            <p>Vue.js - 是一套構建使用者介面的漸進式框架。</p>
                        </div>
                    </div>
                </div>
            </div>

            <!--第四行-->
            <div class="row">
                <div class="col-md-3">
                    <!--thumbnail成縮圖構成-->
                    <div class="thumbnail">
                        <a href="#" title="Parcel - 極速、零配置的 web 應用打包工具。" ><img src="img/parcel.png"></a>
                        <div class="caption text-center">
                            <h3><a href="#" title="Parcel - 極速、零配置的 web 應用打包工具。" style="text-decoration:none">Parcel<br/><small>中文文件</small></a></h3>
                            <p>Parcel - 極速、零配置的 web 應用打包工具。</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <!--thumbnail成縮圖構成-->
                    <div class="thumbnail">
                        <a href="#" title="Lodash 是最流行的 JavaScript 工具庫。"><img src="img/lodash.png"></a>
                        <div class="caption text-center">
                            <h3><a href="#" title="Lodash 是最流行的 JavaScript 工具庫。"style="text-decoration:none">Lodash<br/><small>JavaScript 工具庫</small></a></h3>
                            <p>Lodash 是一個具有一致介面、模組化、高效能等特性的 JavaScript 工具庫。比相同功能的 Underscore.js 使用更廣泛。</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <!--thumbnail成縮圖構成-->
                    <div class="thumbnail">
                        <a href="#" title="Pro Git 中文版（第二版）讓你從 Git 初學者成為 Git 專家"><img src="img/progit.png"></a>
                        <div class="caption text-center">
                            <h3><a href="#" title="Pro Git 中文版（第二版）讓你從 Git 初學者成為 Git 專家 "style="text-decoration:none">Pro Git <br/><small>Git 入門到專家指南 </small></a></h3>
                            <p>Pro Git 中文版（第二版）是一本詳細的 Git 指南，主要介紹了 Git 的使用基礎和原理，讓你從 Git 初學者成為 Git 專家。</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <!--thumbnail成縮圖構成-->
                    <div class="thumbnail">
                        <a href="#" title="Bootstrap 優站精選"><img src="img/expo.png"></a>
                        <div class="caption text-center">
                            <h3><a href="#" title="Bootstrap 優站精選"style="text-decoration:none">優站精選<br/><small>Bootstrap 網站例項</small></a></h3>
                            <p>Bootstrap 優站精選頻道收集了眾多基於 Bootstrap 構建、設計精美的、有創意的網站。</p>
                        </div>
                    </div>
                </div>
            </div>

            <!--第五行-->
            <div class="row">
                <div class="col-md-3">
                    <!--thumbnail成縮圖構成-->
                    <div class="thumbnail">
                        <a href="#" title="rollup.js 是新一代的 JavaScript 模組打包工具。" ><img src="img/rollup.png"></a>
                        <div class="caption text-center">
                            <h3><a href="#" title="rollup.js 是新一代的 JavaScript 模組打包工具。" style="text-decoration:none">Rollup <br/><small>新一代的 JavaScript 模組打包工具</small></a></h3>
                            <p>Rollup 是一個 JavaScript 模組打包工具，可以將小塊程式碼編譯成大塊複雜的程式碼。Rollup 對 JavaScript 程式碼模組使用新的 ES6 標準化格式，如 CommonJS 和 AMD。</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <!--thumbnail成縮圖構成-->
                    <div class="thumbnail">
                        <a href="#" title="Babel 是一個 JavaScript 編譯器。"><img src="img/babeljs.png"></a>
                        <div class="caption text-center">
                            <h3><a href="#" title="Babel 是一個 JavaScript 編譯器。"style="text-decoration:none">Babel <br/><small>是一個 JavaScript 編譯器。</small></a></h3>
                            <p>Babel 是一個 JavaScript 編譯器。Babel 通過語法轉換器支援最新版本的 JavaScript 語法。</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                     
 

            
  

           

              
              

            

            
相關推薦

			   
            
            
            
 

    


    
    
【JavaWeb_學習筆記】Bootstrap框架練習

     
 
							
							
							運用Bootstrap框架復現Bootstrap中文網首頁



<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        



  
 

    


    
    
【Java學習筆記】<集合框架>對字串進行長度排序

     
 
 1 import java.util.Iterator;
 2 import java.util.TreeSet;
 3 
 4 public class TreeSetTest {
 5 
 6     public static void main(String[] args) {
 7 



  
 

    


    
    
【JAVAEE學習筆記】hibernate03：多表操作，級聯練習:添加聯系人

     
 row   tac   默認值   rac   user   except   pro   intra   com   一、一對多|多對一
1、關系表達
　表中的表達
　　
　　實體中的表達
　　
　　orm元數據中表達
　　　　一對多

        <!-- 集合,一對多關系,在配置文件中配置 - 



  
 

    


    
    
【JAVAEE學習筆記】hibernate04：查詢種類、HQL、Criteria、查詢優化和練習為客戶列表增加查詢條件

     
 沒有   arrays   getpara   tex   response   寫法   sum   exceptio   提高   一、查詢種類
1.oid查詢-get
2.對象屬性導航查詢
3.HQL
4.Criteria
5.原生SQL
 
二、查詢-HQL語法


//學習HQL語法
public  



  
 

    


    
    
【jwt學習筆記】--demo練習

     
  
 
  
  
 第一步、匯入maven座標 
 <dependency>
   <groupId>io.jsonwebtoken</groupId>
   <artifactId>jjwt</artifactId>
   <version 



  
 

    


    
    
【學習筆記】分類程式設計練習

     
 
                由於沒有對特徵進行處理(處理方法前面寫過，懶得再寫了，而且原文也沒寫)，所以模型訓練結果並不好。

我們這裡只是簡單的講解下，框架的搭建。文章線性迴歸的部分不再提及了，因為也就是改一兩行程式碼的事。

我們先將資料分為訓練集 和驗證集 並且建立一個新的column叫 medi 



  
 

    


    
    
【Python3 爬蟲學習筆記】pyspider框架的使用 3

     
 
							
							
							啟動爬蟲
返回爬蟲的主頁面，將爬蟲的status設定成DEBUG或RUNNING，點選右側的Run按鈕即可開始爬取。

在最左側我們可以定義專案的分組，以方便管理。rate/burst代表當前的爬取速率，rate代表1秒發出多少個請求，burst相當於流量控制中 



  
 

    


    
    
【Python3 爬蟲學習筆記】pyspider框架的使用 4

     
 
							
							
							pyspider用法詳解
命令列
前面例項通過如下命令啟動pyspider：
pyspider all

命令列還有很多可配置引數，完整的命令列結構如下所示：
pyspider [OPTIONS] COMMAND [ARGS]

其中，OPTIONS為可選引數， 



  
 

    


    
    
【Python3 爬蟲學習筆記】Scrapy框架的使用 1

     
 
							
							
							Scrapy功能非常強大，爬取效率高，相關擴充套件元件多，可配置和可擴充套件程度非常高，它幾乎可以應對所有發爬網站，是目前Python中使用最廣泛的爬蟲框架。
Scrapy框架介紹
Scrapy是一個基於Twisted的非同步處理框架，是純Python實現的爬蟲 



  
 

    


    
    
【Java學習筆記】程式碼塊執行順序 2-8程式設計練習

     
 
                Android零基礎入門——慕課就業班

Java面向物件——Java封裝 2-8程式設計練習

題目：



請根據效果圖以及任務要求完成程式碼。

程式參考執行效果圖如下：



任務要求：


	建立類Code，類中編寫構造塊、靜態程式碼塊以及構造方法
	
	
	建立C 



  
 

    


    
    
【Java學習筆記】Java封裝 3-8程式設計練習

     
 
                Android零基礎入門——慕課就業班

Java面向物件——Java封裝 2-8程式設計練習

3-8 作業

題目要求：

      某公司要開發內部的 “辦公資訊化管理系統”，請使用面向物件的思想描述以下員工資訊。



      程式執行參考效果圖如下：



任 



  
 

    


    
    
【Java學習筆記】14.集合框架和泛型

     
 
								
								            
							
							
							1.Java中的集合框架體系 
1.集合框架體系圖如圖所示： 


2.Conllection介面： 
Collection 是最基本的集合介面，一個 Collection 代表一組 Object，Ja 



  
 

    


    
    
【學習筆記】Bootstrap外掛 滾動監聽+彈出框+選項卡

     
 
                
--滾動監聽
依賴導航元件步驟：1.寫一個導航元件2.data-target="#test"執行滾動監聽的目標   data-spy="scroll" 向想要監聽的元素 新增滾動監聽

 <nav id="test" class="navbar navbar-defa 



  
 

    


    
    
【Python學習筆記】for迴圈連續建立物件_練習demo～

     
 
                前言：

在獲取CSDN訪問量的小專案中，需要獲取我所有部落格，建立了一個Blog類，所以需要建立n多個物件。

所以就需要用一個for迴圈建立。

然後普通的操作，好像並不能讓字串變成變數名！

因此我百度了一下，找到了下面的方法，這個就不加連結了，因為太多了



程式碼 



  
 

    


    
    
【JAVAWEB學習筆記】12_Http&Tomcat

     
 請求重定向   san   res   tor   tomcat啟動   zha   rac   pac   b-    
一、Http協議
1．什麽是Http協議
HTTP，超文本傳輸協議（HyperText Transfer Protocol)是互聯網上應用最為廣泛的     一種網絡協議。所有的WWW文 



  
 

    


    
    
【extjs6學習筆記】1.1 初始：創建項目

     
 workspace   學習   分享   pps   cnblogs   log   -i   學習筆記   apps      
   
創建工作空間 
sencha generate workspace /path/to/workspace 
   
使用sencha創建應用 
sencha 



  
 

    


    
    
【extjs6學習筆記】1.2 初始：MVC MVVM

     
 控制   進行   nbsp   例如   ges   如果   image   初始   互動   
   
模型 
這表示數據層。該模型可以包含數據驗證和邏輯來保持數據。在 ext js 中, 大多數模型都與一個數據存儲一起使用。 
   
視圖 
這表示用戶界面。 
是用戶在屏幕上看到的組 



  
 

    


    
    
【JAVAWEB學習筆記】13_servlet

     
 eight   生命周期   sys   blog   source   con   相對   對象創建   功能   JavaWeb核心之Servlet
  教學導航
 
學習目標：
案例一、完成用戶登錄功能
案例二、記錄成功登錄系統的人次
一、Servlet簡介
1．什麽是Servlet
Servlet  



  
 

    


    
    
【JAVAWEB學習筆記】16_session&cookie

     
 發送   學習筆記   獲得   tab   esp   http   應用   區分   pac   會話技術Cookie&Session





學習目標


案例一、記錄用戶的上次訪問時間---cookie
案例二、實現驗證碼的校驗----session





一、會話技術簡介
1．存儲客 



  
 

    


    
    
【JAVAWEB學習筆記】23_Listener和郵箱服務器

     
 添加   .get   接收   監聽   lin   感知   一個   rate   包括   監聽器Listener





學習目標


案例-使用監聽器完成定時生日祝福





 
一、監聽器Listener
javaEE包括13門規範 在課程中主要學習 servlet技術 和 jsp技術
其中