Bootstrap4 教程基本

Bootstrap4 carrusel Bootstrap4 grupo cuadro de entrada

Bootstrap4 Formulario personalizado

　　 Bootstrap4 Se puede personalizar algunos estilos de formulario para reemplazar los estilos predeterminados del navegador.

Cuadro de verificación personalizado

Si desea personalizar un cuadro de verificación, puede configurar <div> como elemento principal, con la clase .custom-control y .custom-checkbox, el cuadro de verificación como elemento secundario se coloca dentro de este <div>, luego el cuadro de verificación se configura como type="checkbox", clase .custom-control-input.

El texto de la casilla de selección se utiliza etiqueta etiqueta, la etiqueta utiliza .custom-control-clase　etiqueta,etiqueta de for el valor del atributo debe coincidir con el id de la casilla de selección.

Bootstrap4 ejemplo

<!DOCTYPE　html>
<html>
<head>
　　<title>Example　Bootstrap</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="ancho=device-ancho,　inicial-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　mt-3">
　　<h2>casilla de selección personalizada</h2>
　　<p>Si desea personalizar una casilla de selección, puede establecer el <div> como elemento padre, clase .custom-control y .custom-checkbox, la casilla de selección se coloca como elemento secundario dentro de este <div>, luego se establece la casilla de selección como type="checkbox", clase .custom-control-input.</p>
　　<p>El texto de la casilla de selección se utiliza con la etiqueta etiqueta, la etiqueta utiliza .custom-control-etiqueta clase, el valor del atributo para de la etiqueta debe coincidir con el id de la casilla de selección.</p>
　　<form　action="/action_page.php">
　　　　<div class="custom-control custom-checkbox mb-3">
　　　　　　<input tipo="checkbox" clase="custom-control-input" id="customCheck" name="example1">
　　　　　　<label class="custom-control-etiqueta" para="customCheck">casilla de selección personalizada</label>
　　　　</div>
　　　　<input tipo="checkbox" id="defaultCheck" name="example2">
　　　　<label para="defaultCheck">casilla de selección de defecto</label>
　　　　<br>
　　　　<button type="submit" class="btn btn-primary">enviar</button>
　　</form>
</div>
</body>
</html>

prueba y observa ‹/›

el efecto después de ejecutar es el siguiente:

casilla de selección personalizada

Si desea personalizar una casilla de selección, puede establecer <div> como elemento padre, clase .custom-control y .custom-radio, la casilla de selección se coloca como elemento secundario dentro de <div> dentro de, luego se establece la casilla de selección como type="radio", clase .custom-control-input.

Bootstrap4 ejemplo

<!DOCTYPE　html>
<html>
<head>
　　<title>Example　Bootstrap</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="ancho=device-ancho,　inicial-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　mt-3">
　　<h2>casilla de selección personalizada</h2>
　　<p>Si desea personalizar una casilla de selección, puede establecer el div como elemento padre, clase .custom-control y .custom-radio, la casilla de selección se coloca como elemento secundario dentro de este div, luego se establece la casilla de selección como type="radio", clase .custom-control-input.</p>
　　<p>El texto de la casilla de selección se utiliza con la etiqueta etiqueta, la etiqueta utiliza .custom-control-etiqueta clase, el valor del atributo para de la etiqueta debe coincidir con el id de la casilla de selección.</p>
　　<form　action="/action_page.php">
　　　　<div class="custom-control custom-radio">
　　　　　　<input type="radio" class="custom-control-input" id="customRadio" name="example1">
　　　　　　<label class="custom-control-etiqueta" para="customRadio">casilla de selección personalizada</label>
　　　　</div>　　　　
　　　　<input tipo="radio" id="defaultRadio" name="example2">
　　　　<label for="defaultRadio">Casilla de selección predeterminada</label>
　　　　<br>
　　　　<button type="submit" class="btn btn-primary">enviar</button>
　　</form>
</div>
</body>
</html>

prueba y observa ‹/›

el efecto después de ejecutar es el siguiente:

Controladores personalizados en la misma línea

Podemos usar .custom en elementos externos-control-usar la clase inline para envolver los controles de formulario personalizados, de esta manera los controles de formulario personalizados se mostrarán en la misma línea：

Bootstrap4 ejemplo

<!DOCTYPE　html>
<html>
<head>
　　<title>Example　Bootstrap</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="ancho=device-ancho,　inicial-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　mt-3">
　　<h2>Controladores personalizados en la misma línea</h2>
　　<p>Podemos usar .custom en elementos externos-control-usar la clase inline para envolver los controles de formulario personalizados, de esta manera los controles de formulario personalizados se mostrarán en la misma línea：</p>
　　<form　action="/action_page.php">
　　　　<div class="custom-control custom-radio custom-control-inline">
　　　　　　<input type="radio" class="custom-control-input" id="customRadio1" name="example1">
　　　　　　<label class="custom-control-label" for="customRadio1">Casilla de selección personalizada　1</label>
　　　　</div>
　　　　<div class="custom-control custom-radio custom-control-inline">
　　　　　　<input type="radio" class="custom-control-input" id="customRadio2" name="example2">
　　　　　　<label class="custom-control-label" for="customRadio2">Casilla de selección personalizada　2</label>
　　　　</div>
　　　　<button type="submit" class="btn btn-primary">enviar</button>
　　</form>
</div>
</body>
</html>

prueba y observa ‹/›

el efecto después de ejecutar es el siguiente:

Menú de selección personalizado

Para crear un menú de selección personalizado, podemos agregar .custom <select> Agregar .custom al elemento-clase select:

Bootstrap4 ejemplo

<!DOCTYPE　html>
<html>
<head>
　　<title>Example　Bootstrap</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="ancho=device-ancho,　inicial-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　mt-3">
　　<h2>Menú de selección personalizado</h2>
　　<p>Para crear un menú de selección personalizado, podemos agregar .custom al elemento select-select clase:/p>
　　<form>
　　<select name="cars" class="custom-select-sm">
　　　　<option selected>Menú de selección personalizado</option>
　　　　<option value="Google">Google</option>
　　　　<option value="w3codebox">w3codebox</option>
　　　　<option value="Taobao">Taobao</option>
　　</select>
　</form>
</div>
</body>
</html>

prueba y observa ‹/›

el efecto después de ejecutar es el siguiente:

Si queremos configurar el tamaño del menú de selección personalizado, podemos usar .custom-select-sm, .custom-select-lg para configurar su tamaño:

Bootstrap4 ejemplo

<!DOCTYPE　html>
<html>
<head>
　　<title>Example　Bootstrap</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="ancho=device-ancho,　inicial-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　mt-3">
　　<h2>Tamaño del menú de selección personalizado</h2>
　　<p>Si queremos configurar el tamaño del menú de selección personalizado, podemos usar .custom-select-sm, .custom-select-Para configurar el tamaño, usar lg:/p>
　　<form>
　　　　<!--　pequeño　-->
　　　　<select name="cars" class="custom-select-sm">
　　　　　　<option selected>Menú de selección personalizado más pequeño</option>
　　　　　　<option value="Google">Google</option>
　　　　　　<option value="w3codebox">w3codebox</option>
　　　　　　<option value="Taobao">Taobao</option>
　　　　</select>
　　　
　　　　<!--　grande　-->
　　　　<select name="cars" class="custom-select-lg">
　　　　　　<option selected>Menú de selección personalizado más grande</option>
　　　　　　<option value="Google">Google</option>
　　　　　　<option value="w3codebox">w3codebox</option>
　　　　　　<option value="Taobao">Taobao</option>
　　　　</select>
　　</form>
</div>
</body>
</html>

prueba y observa ‹/›

el efecto después de ejecutar es el siguiente:

Control deslizante personalizado

Podemos agregar input 　Para type="range" Agregar .custom en el cuadro de entrada-La clase range para configurar el control deslizante personalizado:

Bootstrap4 ejemplo

<!DOCTYPE　html>
<html>
<head>
　　<title>Example　Bootstrap</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="ancho=device-ancho,　inicial-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　mt-3">
　　<h2>Control deslizante personalizado</h2>
　　<p>Podemos agregar .custom en el cuadro de entrada con type="range"-type="range"　clase　para configurar el control de deslizamiento personalizado:</p>
　　<form　action="/action_page.php">
　　　　<label　for="customRange">Control de deslizamiento personalizado</label>
　　　　<input　type="range"　class="custom-type="range"　id="customRange"　name="points1">
　　　　<label　for="defaultRange">Control de deslizamiento predeterminado</label>
　　　　<input　type="range"　id="defaultRange"　name="points2">
　　　　<p><button　type="submit"　class="btn　btn-primary">enviar</button></p>
　　</form>
</div>
</body>
</html>

prueba y observa ‹/›

el efecto después de ejecutar es el siguiente:

Control de carga de archivos personalizado

Puedemos agregar　.custom　al elemento padre .custom-file clase, luego 　input establece type="file" y luego agrega　.custom-file-input:

el texto del control de carga de archivos se utiliza etiqueta etiqueta, la etiqueta utiliza .custom-file-clase　etiqueta,etiqueta de for el valor del atributo debe coincidir con el control de carga de archivos id。

Bootstrap4 ejemplo

<!DOCTYPE　html>
<html>
<head>
　　<title>Example　Bootstrap</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="ancho=device-ancho,　inicial-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　mt-3">
　　<h2>Control de carga de archivos personalizado</h2>
　　<p>Puedemos agregar　.custom　al elemento padre-clase　file　y luego establece　input　como　type="file"　y agrega　.custom-control-etiqueta:</p>
　　<form　action="/action_page.php">
　　　　<p>estilo personalizado de carga de archivo:<//p>
　　　　<div class="custom-file mb-3">
　　　　　　<input type="file" class="custom-file-input" id="customFile" name="filename">
　　　　　　<label class="custom-file-label" for="customFile">seleccionar archivo</label>
　　　　</div>
　　　　
　　　　<p>estilo predeterminado de carga de archivo:<//p>
　　　　<input type="file" id="myFile" name="filename2">
　　
　　　　<div class="mt-3">
　　　　　　<button type="submit" class="btn btn-primary">enviar</button>
　　　　</div>
　　</form>
</div>
</body>
</html>

prueba y observa ‹/›

el efecto después de ejecutar es el siguiente:

Bootstrap4 carrusel Bootstrap4 grupo cuadro de entrada