English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Corso di base Bootstrap4

Bootstrap4 按鈕

I pulsanti sono parte del sito web e delle applicazioni. Vengono utilizzati per vari scopi, come inviare o ripristinare un modulo HTML, eseguire operazioni interattive, come fare clic su un pulsante per visualizzare o nascondere某些 contenuto sulla pagina web, reindirizzare gli utenti a un'altra pagina, ecc. Bootstrap fornisce un metodo rapido e semplice per creare e personalizzare i pulsanti.

Bootstrap 4 offre diversi stili di pulsanti.

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap esempio</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Stili dei pulsanti</h2>
　　<button type="button" class="btn">Pulsante di base</button>
　　<button type="button" class="btn btn-primary">主要按钮</button>
　　<button type="button" class="btn btn-secondary">Pulsante secondario</button>
　　<button type="button" class="btn btn-success">Successo</button>
　　<button type="button" class="btn btn-info">Informazione</button>
　　<button type="button" class="btn btn-warning">Avviso</button>
　　<button type="button" class="btn btn-danger">Pericolo</button>
　　<button type="button" class="btn btn-dark">Nero</button>
　　<button type="button" class="btn btn-light">Chiaro</button>
　　<button type="button" class="btn btn-link">Collegamento</button>　　　　　　
</div>
</body>
</html>
测试看看 ‹/›

La classe dei pulsanti può essere utilizzata per <a>, <button>, o Sul elemento <input>:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap esempio</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Elementi dei pulsanti</h2>
　　<a href="#" class="btn btn-info" role="button">Pulsante di collegamento</a>
　　<button type="button" class="btn btn-info">Pulsante</button>
　　<input type="button" class="btn btn-info" value="Pulsante di input">
　　<input type="submit" class="btn btn-info" value="Pulsante di invio">　
</div>
</body>
</html>
测试看看 ‹/›

Impostazione dei bordi dei pulsanti

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap esempio</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Impostazione dei bordi dei pulsanti</h2>
　　<button type="button" class="btn btn-outline-primary">Pulsante principale</button>
　　<button type="button" class="btn btn-outline-secondary">Pulsante secondario</button>
　　<button type="button" class="btn btn-outline-success">Successo</button>
　　<button type="button" class="btn btn-outline-info">Informazione</button>
　　<button type="button" class="btn btn-outline-warning">Avviso</button>
　　<button type="button" class="btn btn-outline-danger">Pericoloso</button>
　　<button type="button" class="btn btn-outline-dark">Nero</button>
　　<button type="button" class="btn btn-outline-light text-dark">Chiaro</button>
</div>
</body>
</html>
测试看看 ‹/›

Pulsanti di diverse dimensioni

Bootstrap 4 permette di impostare le dimensioni dei pulsanti:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap esempio</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Pulsanti di diverse dimensioni</h2>
　　<button type="button" class="btn btn-primary btn-lg">Pulsante grande</button>
　　<button type="button" class="btn btn-primary">Pulsante predefinito</button>
　　<button type="button" class="btn btn-primary btn-sm">Pulsante piccolo</button>
</div>
</body>
</html>
测试看看 ‹/›

Pulsante a livello di blocco

Aggiungendo la classe .btn-block è possibile impostare il pulsante a livello di blocco:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap esempio</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Pulsante a livello di blocco</h2>
　　<button type="button" class="btn btn-primary btn-block">Pulsante 1</button>
　　<button type="button" class="btn btn-default btn-block">Pulsante 2</button>
　　<h2>Grande pulsante a livello di blocco</h2>
　　<button type="button" class="btn btn-primary btn-lg btn-block">Pulsante 1</button>
　　<button type="button" class="btn btn-default btn-lg btn-block">Pulsante 2</button>
　　<h2>Pulsanti di blocco piccoli</h2>
　　<button type="button" class="btn btn-primary btn-sm btn-block">Pulsante 1</button>
　　<button type="button" class="btn btn-default btn-sm btn-block">Pulsante 2</button>
</div>
</body>
</html>
测试看看 ‹/›

Pulsanti attivati e disabilitati

Il pulsante può essere impostato in uno stato attivato o disabilitato.

La classe .active può impostare il pulsante come utilizzabile, mentre l'attributo disabled può impostare il pulsante come non cliccabile. Attenzione, l'elemento <a> non supporta disabled Proprietà, puoi disabilitare il clic sui link aggiungendo la classe .disabled.

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap esempio</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>按钮状态</h2>
　　<button type="button" class="btn btn-primary">主要按钮</button>
　　<button type="button" class="btn btn-primary active">点击后的按钮</button>
　　<button type="button" class="btn btn-primary" disabled>禁止点击的按钮</button>
　　<a href="#" class="btn btn-primary disabled">禁止点击的链接</a>
</div>
</body>
</html>
测试看看 ‹/›
Bootstrap4 按鈕組Bootstrap4 資訊提示框