首頁技術(shù)文章正文

DTD怎樣進(jìn)行元素類型定義？【語法格式】

更新時間:2023-04-13 來源:傳智教育 瀏覽量:

IT培訓(xùn)班

Bootstrap常用組件包括按鈕、導(dǎo)航、菜單和表單等。使用Bootstrap不需要編寫復(fù)雜的樣式代碼，只需要使用Bootstrap組件就可以實現(xiàn)復(fù)雜的頁面架構(gòu)。下面將對Boolstrap按鈕組件進(jìn)行詳細(xì)講解。

Bootstrap提供了多種樣式的按鈕，每個樣式的按鈕都有自己的語義用途，并附帶了一些額外的功能，以便進(jìn)行更多的控制。下面通過一個案例演示Bootstrap中按鈕的實現(xiàn)方式。在chapter01文件夾中創(chuàng)建名稱為bootstrap1的HTML文件。

<!DOOTYEE htnl>
<html>
<head>
  <title>bootatrap0l</title>
  <link rel="stylesheet"href="bootstrap.min.css">
</head>
<body>
  <button type-"button"class="btn btn-primary">主按鈕</button>
</body>
</html>
第5行代碼引人boostrap.min,css核心文件;第8行代碼定義按鈕結(jié)構(gòu)，設(shè)置按鈕的type屬性值為button，表示按鈕;設(shè)置按鈕的類名為bn和btn-primary，表示在bm類名的基礎(chǔ)上添加bt-primary類名，btn-primary 主要用于實現(xiàn)主按鈕的結(jié)構(gòu)樣式。

使用瀏覽器打開bootstrap01.html文件，運(yùn)行結(jié)果如圖所示。

1681378889018_主按鈕.png

需要注意的是，除了btn-primary外，Bootstrap還包括btn-secondary、bn-success和btn-danger等類，分別用于實現(xiàn)不同的按鈕樣式效果。

在定義按鈕時，除了提供按鈕的基本樣式外，Bootstrap框架還提供了一些特定的類，通過類名可以設(shè)置按鈕的大小、狀態(tài)等。下面分別介紹按鈕狀態(tài)和按鈕大小的設(shè)置。

1.設(shè)置按鈕狀態(tài)

在實現(xiàn)按鈕時，如果按鈕中的文本內(nèi)容超出了按鈕的寬度，在默認(rèn)情況下按鈕中的內(nèi)容會自動換行排列，如果不希望按鈕文本換行，可以在按鈕中添加text-nowrap類。下面修改bootstrap0l.html代碼，設(shè)置按鈕狀態(tài)為禁止文本換行。修改后的代碼如文件所示。

<!DOCTYPE html>
<html>
<head>
  <style>
    button {
      width: 100px;
    }
  </style>
  <title>bootstrap0l</title>
  <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<button type="button" class="btn btn-primary text-nowrap">
    主按鈕主按鈕主按鈕
  </button>
</body>
</html>

第6行代碼定義按鈕的寬度為100ps;第13~15行代碼定義按鈕內(nèi)容，并且為按鈕添加了texl-nowrap類名，表示禁止文本換行。運(yùn)行結(jié)果如圖所示。

2.設(shè)置按鈕大小

在Bootstrap中，除了可以直接設(shè)置按鈕狀態(tài)外，還可以通過類名調(diào)節(jié)按鈕的大小，修改bootstrapl.html代碼實現(xiàn)調(diào)用不同類名來調(diào)節(jié)按鈕的大小。使用下面代碼替換文件中第13~15行代碼。

<button type="button" class=" btn btn-prinary btn-Ig ">主按鈕</button>
<button type="button" class="btn btn-pri_ary btn-sa">主按鈕</button>
在上述代碼中，分別為按鈕添加bin-lg和btn-sm類名，其中ben-lg表示大按鈕，bin-sm表示小按鈕。
1681380765811_主按鈕2.png
分享到：
在線咨詢 我要報名
和我們在線交談！