Bootstarp的安裝以及簡單的使用方法(pycharm中)

来源:https://www.cnblogs.com/98WDJ/archive/2019/04/10/10685403.html
-Advertisement-
Play Games

一.安裝 首先打開Bootstarp的官網:https://v3.bootcss.com 下載完成後,解壓壓縮包,把解壓後的文件導入pycham中 在HTML頁面中的style中導入bootstrap的css文件和js文件,建議導入min.css,體積更小 以我的文件路徑為例: 安裝完成 二.更改p ...


一.安裝

首先打開Bootstarp的官網:https://v3.bootcss.com

下載完成後,解壓壓縮包,把解壓後的文件導入pycham中

在HTML頁面中的style中導入bootstrap的css文件和js文件,建議導入min.css,體積更小

以我的文件路徑為例:

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="bootstrap/js/bootstrap.js"></script>

安裝完成

二.更改pycharm的預設HTML頁面(可跳過)

在pycharm中創建一個新的HTML頁面,如果還想使用Bootstarp,只能重新導入上述路徑

為了避免重覆的工作,可以更改預設的HTML模板

1.打開setting,找到下麵選項

 

2.找到HTML文件

3.更改右邊的代碼

更改模板完成

三.Bootstarp的使用:

1.柵格系統

Bootstarp的重要特性:柵格系統

官方的解釋可以看官網:https://v3.bootcss.com/css/#grid

個人理解就是:在一個container的容器內,被行分隔,每一行分為12個單位的長度

//簡單的模型
<div class='container'>
      <div class='row'> </div>
      <div class='row'> </div>
      <div class='row'> </div>
</div>

簡單的測試一下:

//c1中沒有設置寬度,只設置了div的高度
<div class="container">
    <div class="row">
        <div class="c1 col-lg-1 ">1</div>
        <div class="c1 col-lg-1 ">2</div>
        <div class="c1 col-lg-1 ">3</div>
        <div class="c1 col-lg-1 ">4</div>
        <div class="c1 col-lg-1 ">5</div>
        <div class="c1 col-lg-1 ">6</div>
        <div class="c1 col-lg-1 ">7</div>
        <div class="c1 col-lg-1 ">8</div>
        <div class="c1 col-lg-1 ">9</div>
        <div class="c1 col-lg-1 ">10</div>
        <div class="c1 col-lg-1 ">11</div>
        <div class="c1 col-lg-1 ">12</div>
        <div class="c1 col-lg-1 ">13</div>
    </div>
</div>
 .c1{
            height: 50px;
            background-color: red;
            border: 1px black solid
        }
c1的樣式

 

可以看到一個container容器被分為12份,這是因為設置了col-lg-1的原因,該類可以從col-lg-1設置到col-lg-12,

<div class="container">
    <div class="row">
        <div class="c1 col-lg-3 ">1</div>
        <div class="c1 col-lg-3 ">2</div>
        <div class="c1 col-lg-3 ">3</div>
        <div class="c1 col-lg-3 ">4</div>

    </div>
</div>

效果如下:

還有重要的一點:

每一行的每一個列還可以繼續切分

效果如下:

做的比較醜,勿怪。。

代碼:

<div class="container">
    <div class="row">
       //在這個div裡面進行切分
        <div class="c1 col-lg-3  row">
            <div class="c1 col-lg-4 "></div>
            <div class="c1 col-lg-4 "></div>
             <div class="c1 col-lg-4 "></div>
        </div>
       //結束
        <div class="c1 col-lg-3 ">2</div>
        <div class="c1 col-lg-3 ">3</div>
        <div class="c1 col-lg-3 ">4</div>

    </div>
</div>

 

 2.組件和各種控制項的獲取:

1.通過官網的複製粘貼獲取:( ・´ω`・ )

直接複製代碼,粘貼到你需要的地方

2.開發者模式:

F12進入開發者模式(每個瀏覽器可能不一樣)

 

 看中什麼,選中什麼,在右面的界面中,滑鼠右鍵copy->copy outHtml,導入HTML文件中

好了,這個組件是你的了

四.多看官網。。。。

Bootstarp很多組件,在官網上有詳細的介紹,請多多瀏覽官網


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 前言- 上幾篇文章,我們一個一個的研究了Cubism官方提供的Android使用Live2D的簡單例子,但是依舊和大家平時見到的還是有很大差距的。在研究了代碼差不多一周以後,我決定還是用文字的形式記錄一下比較好。 下麵就是我們的主角:SampleApp1 下載及運行 編譯運行後的結果- 先來粗略看看 ...
  • 文章大綱 一、多渠道打包與數據統計介紹二、友盟實現多渠道打包實戰三、友盟數據統計實戰四、項目源碼下載五、參考文章 一、多渠道打包與數據統計介紹 多渠道打包,相信很多同學都知道。在Android Studio中只要經過配置,就能打出對應市場的渠道包。打過包的同學可能都會有這樣的感受:散熱器瘋狂地轉、打 ...
  • 前端項目打包部署,以前都是手工運行打包命令,打包結束後壓縮,然後上傳到伺服器上解壓部署。這種重覆性的工作,確實有點讓人煩,而且效率也不高。 本文基於 vue 的前端項目、 GitHub 的代碼倉庫,簡述在 CentOS7 上利用 jenkins 實現自動部署。 一、安裝插件 NodeJS Jenki ...
  • 1.CSS的水平居中, 1.1 父元素是塊狀元素,子元素為行內元素的居中,直接設置text-aglin: center ,常見的文本,span 標簽,button,img等行內元素都是可以使其水平居中的 1.2 父元素為塊狀元素,子元素也為塊狀元素 1.2.1 子元素寬度已知,則可以設置子元素 ma ...
  • “塊級元素”和“display為block的元素”不是一個概念,因為<li>元素預設的display值是list-item,<table>元素預設的display值是table,它們都是塊級元素。 正是由於“塊級元素”具有換行特性,因此理論上它們都可以配合clear屬性來清除浮動帶來的影響。例如: ...
  • jQuery設置了很多為標簽進行屬性的操作,比如添加、刪除。 一 、屬性 1 attr(name | properties | [key, value | fn]) 設置或返回被選擇的屬性值。 參數: (1) name :屬性名,返回該屬性值。 (2) properties:該參數為'名 : 值' ...
  • 一、事件流 事件是js與HTML交互的基礎,事件流描述的是頁面接受事件的順序,而事件流又分為三個階段:捕獲階段、目標階段和冒泡階段。 如果單純的事件處理,事件捕獲和事件冒泡二選一即可,導致兩者並存的原因是當年微軟和網景的瀏覽器大戰,微軟提出了事件冒泡,而網景提出了事件捕獲。 1、事件冒泡 事件開始由 ...
  • HTML代碼: 在一個div容器內,設置3個span CSS代碼: 在css中,light在後面,所以後面變換顏色通過的是 classList.toggle('light') 此時的效果 scipt代碼: <script> function l() { r_l()//紅燈亮 setTimeout(y ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...