Bootstrap的使用

目錄

js的引入:

1.行內式

2.嵌入式

3.外鏈式

Bootstrap:的引入

注意事項:

條件注釋語句:

柵格系統:

列嵌套:

列偏移:

列排序:

響應式工具:

Bootstrap的字體圖標的使用:

Bootstrap的標題格式:


js的引入:

1.行內式

行內式是將JavaScript代碼作為HTML標簽的屬性值使用。例如,在單擊超鏈接“test”時,彈出一個警告框提示“Hello”,示例代碼如下:

<a href="javascript:alert('Hello');">test</a>

需要說明的是,行內式只有在臨時測試或者特殊情況下使用,一般情況下不推薦使用行內式,因為行內式有如下缺點。

(1)行內式可讀性較差,尤其是在HTML文件中編寫大量JavaScript代碼時,不方便閱讀。

(2)行內式在遇到多層引號嵌套的情況時,引號非常容易混淆,導致代碼出錯。

2.嵌入式

嵌入式(或稱內嵌式)使用<scrip>標簽包裹JavaScript代碼,直接編寫到HTML文件中,通常將其放到<head>標簽<body>或標簽中。<scrip>標簽的type屬性用于告知瀏覽器腳本類型,HTML.5中該屬性的默認值為“text/javascript”,因此在使用HTML5時可以省略ype屬性。嵌入式的示例代碼如下:

<script>JavaScript代碼
</script>

3.外鏈式

外鏈式(或稱外部式)是將JavaScript 代碼寫在一個單獨的文件中,一般使用“js”作為文件的擴展名,在HTML頁面中使用<script>標簽的src屬性引人“js”文件。外鏈式適合javascript代碼量較多的情況。在html頁面中引入“js”文件,示例代碼如下:

<script src="test.js"></script>

上述代碼表示引入當前目錄下的test.js文件。需要注意的是,外鏈式的標簽內不可以編寫JavaScript 代碼。

為了幫助初學者更好地理解外鏈式,下面利用外鏈式實現瀏覽網頁時在頁面中自動彈出警告框。創建Example02.html文件,引入Example02.js文件,具體代碼如例1-2所示。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><script src="Example02.js"></script>
</body>
</html>

標簽的src屬性設置了要引入的文件為Example02.js。

Bootstrap:的引入

創建是為了區分,方便使用。

但需注意在這之后,需要引入bootsrap的格式文檔(css)

導入之后:

bootsrap是通過使用類名,之后css來進行固定類型的變化的。所以只需要知道類對應的就可以隨意使用。但也可以直接復制文檔。

也可以修改bootsrap文檔來實現自我需要的修改。

或者新加一個標簽自己進行設置:但這種使用的條件有限。


注意事項:

需要注意的是Bootstrap的CSS樣式已經定義了該容器的類名。

他是按照一類一類的有多種格式,也就是說container有類似的類名,不同的格式。

條件注釋語句:

柵格系統:

注意·他是將內容盒子劃分為幾等份的

- 后面是需要寫占多少份

如果有的盒子需要不同則后綴的數字之和要等于12

如果份數大于12 則會繼續向下一行顯示。


注意柵格系統在不同屏幕大小下是直接為我們提供了一份用不同類名下的不同效果,所以說,我們可以直接使用不同的類名份數即可。


列嵌套:

主要是用于下列間距的實現。原因:在使用框架給的標簽時,是通過浮動使得小盒子在一行中進行顯示的,所以為了避免不能一行顯示,一般會嵌套小盒子分配份數實現間距。

由于盒子有邊框,為了實現內容小盒子能夠頂著左邊顯示。先放一個div row清除邊框。


列偏移:

偏移后,會給右邊的盒子增加了一個外邊距。

當只有一個盒子時。會給左邊加一個外邊距

也可以實現盒子的居中:

如:

一共12份,之后按照剩余份數處理。


列排序:

push向右 pull向左


響應式工具:

Bootstrap的字體圖標的使用:

只要使用在所需要的地方加一個所需圖標的類名(手冊中)即可

Bootstrap的標題格式:

在CSS的排版模塊里

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/715621.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/715621.shtml
英文地址,請注明出處:http://en.pswp.cn/news/715621.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

2024最新算法:河馬優化算法(Hippopotamus optimization algorithm,HO)求解23個基準函數,提供MATLAB代碼

一、河馬優化算法 河馬優化算法&#xff08;Hippopotamus optimization algorithm&#xff0c;HO&#xff09;由Amiri等人于2024年提出&#xff0c;該算法模擬了河馬在河流或池塘中的位置更新、針對捕食者的防御策略以及規避方法。河馬優化算法的靈感來自河馬生活中觀察到的三…

【金三銀四】Mysgl優化了解?什么情況下會導致SQL索引失效?如何寫出高效SQL與優化慢SQL

Mysgl優化 MySQL 優化是指對 MySQL 數據庫的配置、表設計、查詢語句等進行針對性的優化&#xff0c;以提高數據庫的性能和效率。這包括但不限于合理設計數據庫表結構、編寫高效的 SQL 查詢語句、創建合適的索引以及調整數據庫服務器的參數等。 當MySQL單表記錄數過大時&#xf…

【測試工具】Fiddler

1.Fiddler簡介 Fiddler是位于客戶端和服務器端的HTTP代理&#xff0c;能夠記錄客戶端和服務器之間的所有 HTTP請求&#xff0c;是web調試的利器。既然是代理&#xff0c;也就是說&#xff1a;客戶端的所有請求都要先經過Fiddler&#xff0c;然后轉發到相應的服務器&#xff0c…

【應用多元統計分析】--數據矩陣及R語言表示

在多元分析中&#xff0c;數據通常以矩陣的形式出現&#xff0c;下面結合R語言介紹基本的矩陣運算。主要包括&#xff1a;創建矩陣向量&#xff0c;矩陣加減、乘積&#xff0c;矩陣的逆&#xff0c;行列式的值&#xff0c;特征值與特征向量&#xff0c;QR分解&#xff0c;奇異值…

微前端-乾坤《》

微前端 一個應用&#xff0c;當不斷迭代的時候&#xff0c;功能會越來越多&#xff0c;代碼量隨著也會變得越來越大。進而代碼之間的耦合性會變高&#xff0c;這樣導致開發和維護很糟心&#xff0c;動一發而牽全身。于是有了微前端來解這個問題&#xff0c;按功能可以將這個應…

day02-JavaScript-Vue

文章目錄 1 JavaScript1.1 介紹 1.2 引入方式1.3 基礎語法1.3.1 書寫語法1.3.2 變量1.3.3 數據類型和運算符 1.4 函數1.4.1 第一種定義格式1.4.2 第二種定義格式 1.5 JavaScript對象1.5.1 基本對象1.5.1.1 Array對象語法格式特點屬性和方法 1.5.1.2 String對象語法格式屬性和方…

17.來自Sora的奪舍妄想——享元模式詳解

OpenAI 的 Sora 模型面世之后&#xff0c;可以說人類抵御AI的最后陣地也淪陷了。 在此之前&#xff0c;人們面對AI交互式對話&#xff0c;AI制圖&#xff0c;AI建模之類的奇跡時&#xff0c;還可以略微放肆的說&#xff1a;“的確很神奇&#xff0c;這畢竟還是比人類世界低了一…

Redis基本知識

一、什么是Redis Redis是一種基于內存的數據庫&#xff0c;對數據的讀寫操作都是在內存中完成&#xff0c;因此讀寫速度非常快&#xff0c;用于存儲鍵值對、緩存、消息隊列、分布式鎖等。 二、Redis和mencached的區別 相同&#xff1a;都是基于內存的數據庫&#xff0c;讀寫都…

2024年騰訊云部署幻獸帕魯服務器,如何選擇合適的服務器配置套餐暢玩游戲?

選擇合適的服務器配置套餐以暢玩《幻獸帕魯》游戲&#xff0c;首先需要考慮的是玩家數量和對服務器性能的需求。根據騰訊云提供的配置推薦&#xff0c;對于4到8人的玩家&#xff0c;推薦配置為4核16G12M&#xff1b;而10到20人的玩家則建議選擇8核32G22M配置。這是因為《幻獸帕…

小程序頁面指定區域局部滾動,做上拉和觸底刷新

業務需求&#xff1a;在頁面某個固定區域滑動 思路&#xff1a;滑動高度 頁面高度 - 自定義導航高度&#xff08;不是自己自定義的導航可以省略&#xff09;- 按鈕高度 - 單詞數高度 實現 &#xff1a; 1.數據展示區內使用scroll-view&#xff0c;設置y軸滾動&#xff08;…

swoole

php是單線程。php是靠多進程來處理任務&#xff0c;任何后端語言都可以采用多進程處理方式。如我們常用的php-fpm進程管理器。線程與協程,大小的關系是進程>線程>協程,而我們所說的swoole讓php實現了多線程,其實在這里來說,就是好比讓php創建了多個進程,每個進程執行一條…

初階數據結構:二叉樹

目錄 1. 樹的相關概念1.1 簡述&#xff1a;樹1.2 樹的概念補充 2. 二叉樹2.1 二叉樹的概念2.2 二叉樹的性質2.3 二叉樹的存儲結構與堆2.3.1 存儲結構2.3.2 堆的概念2.3.3 堆的實現2.3.3.1 堆的向上調整法2.3.3.2 堆的向下調整算法2.3.3.3 堆的實現 1. 樹的相關概念 1.1 簡述&a…

域名及地址正確外,若依后臺無法正常加載頁面和退出報404問題

寫小程序退出的時候&#xff0c;另外寫了一個自定義退出處理類&#xff0c;里面的響應瀏覽器的代碼每次都走。因為原來也有個退出處理類&#xff0c;所以先后走了2次&#xff0c;因為就出現了問題。 LogoutSuccessHandlerImpl類里的&#xff1a; ServletUtils.renderString(r…

【C++ AVL樹】

文章目錄 AVL樹AVL樹的概念AVL樹節點的定義AVL樹的插入AVL樹的旋轉右單旋左單旋左右雙旋右左雙旋 代碼實現 總結 AVL樹 AVL樹的概念 二叉搜索樹在順序有序或接近有序的情況下&#xff0c;而插入搜索樹將退化為單叉樹&#xff0c;此時查找的時間復雜度為O(n)&#xff0c;效率低…

鴻蒙Harmony應用開發—ArkTS聲明式開發(通用屬性:顏色漸變)

設置組件的顏色漸變效果。 說明&#xff1a; 從API Version 7開始支持。后續版本如有新增內容&#xff0c;則采用上角標單獨標記該內容的起始版本。 linearGradient linearGradient(value: { angle?: number | string; direction?: GradientDirection; colors: Array; repea…

mamba-ssm安裝building wheel卡著不動后error...避坑解決方法

文章目錄 方法1、下載whl文件到本地后pip install安裝成功后驗證&#xff1a; 方法2、拉取Docker鏡像 對于項目中用到MambaIR的小伙伴&#xff0c;需要pip安裝 causal_conv1d和 mamba-ssm兩個包及其依賴&#xff1a; torch packing transformersMambaIR-Github主頁&#xff0…

【C++】vector的使用及其模擬實現

這里寫目錄標題 一、vector的介紹及使用1. vector的介紹2. 構造函數3. 遍歷方式4. 容量操作及空間增長問題5. 增刪查改6. vector二維數組 二、vector的模擬實現1. 構造函數2. 迭代器和基本接口3. reserve和resize4. push_back和pop_back5. insert和erase5. 迭代器失效問題5. 淺…

【Java】基礎算法練習題

個人簡介&#xff1a;Java領域新星創作者&#xff1b;阿里云技術博主、星級博主、專家博主&#xff1b;正在Java學習的路上摸爬滾打&#xff0c;記錄學習的過程~ 個人主頁&#xff1a;.29.的博客 學習社區&#xff1a;進去逛一逛~ 目錄 基礎算法練習題&#x1f680;1. 兩數之和…

Django 管網項目 三

Django 官網文檔 ??Writing your first Django app, part 2 | Django documentation | Django 本文內容涉及創建視圖 View&#xff0c;路由&#xff0c;和模版。并對內容進行渲染。 創建視圖 在我們的投票應用中&#xff0c;我們需要下列幾個視圖&#xff1a; 問題索引頁—…

ChatGPT支持下的PyTorch機器學習與深度學習技術應用

近年來&#xff0c;隨著AlphaGo、無人駕駛汽車、醫學影像智慧輔助診療、ImageNet競賽等熱點事件的發生&#xff0c;人工智能迎來了新一輪的發展浪潮。尤其是深度學習技術&#xff0c;在許多行業都取得了顛覆性的成果。另外&#xff0c;近年來&#xff0c;Pytorch深度學習框架受…