使用 Bootstrap 創建網站

這是我們第一個使用 Bootstrap 的網站

在這篇文章中,我們將從使用 Bootstrap 創建一個站點開始, 開源框架,使我們可以輕鬆地使其響應並為其提供一些交互性。 它是由我們之前推薦的開發環境插件自動生成的基本模板,我們將不得不對其進行修改。

前面的文章 您將找到安裝 VS Codium、將其用戶界面翻譯成西班牙語並安裝 Bootstrap 插件的說明。

要記住兩件事:

  1. 我們使用的命令是鍵盤快捷鍵,您必須輸入它們。 複製/粘貼不起作用。
  2. 我們的內容管理器不允許我顯示 HTML 代碼,所以我必須使用屏幕截圖。 這樣您就可以訪問我上傳的示例代碼 到 GitHub。

如何克隆 GitHub 存儲庫

偉人與我們其他人的區別在於他們對問題的反應方式。 Richard Stallman 不喜歡他的打印機驅動程序,因為他們不讓他改變它,他開始了自由軟件運動。 Linus Torvalds 不相信任何代碼共享平台並創建了自己的平台。 混帳。

與只允許用戶交互是下載的傳統軟件分發系統不同, 使用 Git,您可以隨著時間的推移跟踪項目的演變。 其他人可以克隆存儲庫,進行修改,並建議原始項目的開發人員合併它們。 如果被接受,開發人員可以輕鬆地做到這一點,而無需下載和重新上傳文件。

有幾個基於Git的服務,我選擇了GitHub 僅僅因為它與 VS Codium 集成。

為了將示例文件下載到您的計算機,您只需要按照您的發行版在終端中安裝包的說明安裝 git 包。

然後鍵入以下命令。

我更喜歡將文件保存在 Documents 文件夾中,因此我更改了目錄

cd Documentos

然後我克隆文件:

git clone https://github.com/dggonzalez1971/bootstrap.git

我將在其餘每篇文章中提醒您這些步驟,因為這樣您將在上傳示例文件時更新它們。

要查看文件,只需打開文件資源管理器並查找文件夾 引導程序。

使用 Bootstrap 創建網站

如果您更喜歡手動輸入代碼,我們首先創建一個文件夾,我們將在其中保存站點。 你可以放任何你喜歡的名字。

然後我們按照以下步驟操作:

  1. 我們去菜單 存檔。
  2. 點擊 新文本文件.
  3. 點擊 保存。
  4. 我們尋找我們創建的文件夾並輸入文件名 示例 1.html。
  5. 點擊 保存。

有時文件資源管理器窗口可能會被 VSCodium 隱藏。

讓我們讓擴展程序為我們創建基本模板。 為此,我們鍵入 !b5-$

這將生成您將在示例文件夾中找到的代碼 example1.html

我們將看到以下內容:

基本引導模板

這是 Bootstrap 擴展生成的代碼。

我們將對這個文件進行一些更改。 您將在名稱 example2.html 下找到修改

  • 在第 2 行,我們通過將 eng 替換為 es 來更改語言。 這向搜索引擎表明該站點的語言是西班牙語。
  • 在第 6 行中,我們更改了標籤下的文本 標題。 我們把 我的第一個 Bootstrap 網站。
  • 在第 12 行,我們更改標籤之間的內容 h1 這是一個使用 Bootstrap 製作的網站。

接下來,我們將進行一些重要的修改。 這些修改與:

  1. 插件開發人員無法跟上 Bootstrap 版本,並且有更多最新版本。
  2. 引導組件有很多選項,我對另一個感興趣。
  3. 根據官方文檔,對 Javascript 庫的調用必須在 body 標記內。

比如2我們修改了第7行的內容,刪除了第8行和第9行並上傳了剩餘的內容,以保持編號的兼容性。 然後我們單擊第 10 行的末尾以創建一個新的第 11 行並放置指向 Javascript 庫的鏈接。

如果您不理解代碼,請不要擔心。 我將在下一篇文章中解釋每一行的功能。


發表您的評論

您的電子郵件地址將不會被發表。 必填字段標有 *

*

*

  1. 負責資料:AB Internet Networks 2008 SL
  2. 數據用途:控制垃圾郵件,註釋管理。
  3. 合法性:您的同意
  4. 數據通訊:除非有法律義務,否則不會將數據傳達給第三方。
  5. 數據存儲:Occentus Networks(EU)託管的數據庫
  6. 權利:您可以隨時限制,恢復和刪除您的信息。