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

  1. Ubicación
  2. Página principal
  3. Notas de experiencia
  4. Texto principal

Tutorial de inicio de Bootstrap (parte 1): visualización de diseño

Dirección de descarga:http://v3.bootcss.com/getting-started/#download

Plantilla HTML:

!DOCTYPE html>
<html>
<head>
<title>Bootstrap plantilla</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Introducir Bootstrap -->
<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim y Respond.js se utilizan para que IE8 Soporta HTML5elementos y consultas de medios -->
<!-- Nota: Si se pasa a través de file:// La introducción del archivo Respond.js no tiene efecto -->
<!--[if lt IE 9>]
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></<script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></<script>
<![endif]-->
</<head>
<body>
<h1>¡Hola, mundo!</h1>
<!-- jQuery (se necesita introducir jQuery para los complementos JavaScript de Bootstrap) -->
<script src="https://code.jquery.com/jquery.js"></<script>
<!-- Incluye todos los complementos compilados -->
<script src="js/bootstrap.min.js"></<script>
</body>
</html>

　　Aquí, puede ver que se incluyen los archivos jquery.js, bootstrap.min.js y bootstrap.min.css, que se utilizan para convertir un archivo HTML común en un modelo que utiliza Bootstrap.

Recomendación CDN de Bootstrap

　　El servicio CDN de la biblioteca de recursos estáticos de Baidu, el código de introducción es el siguiente:

<!-- El archivo CSS central más reciente de Bootstrap --><link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- El archivo de tema opcional de Bootstrap (generalmente no se utiliza) --><script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap-theme.min.css"></<script>
<!-- El archivo jQuery. Asegúrese de que se introduzca antes de bootstrap.min.js --><script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></<script>
<!-- El archivo JavaScript central más reciente de Bootstrap --><script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></<script>

Diseño visual:

El código es el siguiente:

!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstraptest</title>
<!-- El archivo CSS central más reciente de Bootstrap --><link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- El archivo de tema opcional de Bootstrap (generalmente no se utiliza) --><script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap-theme.min.css"></<script>
<!-- El archivo jQuery. Asegúrese de que se introduzca antes de bootstrap.min.js --><script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></<script>
<!-- El archivo JavaScript central más reciente de Bootstrap --><script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></<script>
</<head>
<body>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img alt="[#0#]" src="img/ad.jpg" class="img-responsive" />
<div class="caption">
<h3>
Etiqueta de miniatura
</h3>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
<p>
<a class="btn btn-primary" href="#">Acción</a> <a class="btn" href="#">Acción</a>
</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img alt="[#0#]" src="v3/default5.jpg" />
<div class="caption">
<h3>
Etiqueta de miniatura
</h3>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
<p>
<a class="btn btn-primary" href="#">Acción</a> <a class="btn" href="#">Acción</a>
</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img alt="[#0#]" src="v3/default6.jpg" />
<div class="caption">
<h3>
Etiqueta de miniatura
</h3>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
<p>
<a class="btn btn-primary" href="#">Acción</a> <a class="btn" href="#">Acción</a>
</p>
</div>
</div>
</div>
</div> <a id="modal-989545" href="#modal-container-989545" role="button" class="btn" data-toggle="modal">Activar ventana emergente</a>
<div class="modal fade" id="modal-container-989545" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">
Título
</h4>
</div>
<div class="modal-body">
contenido...asdfasdf
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button> <button type="button" class="btn btn-primary">Guardar</button>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Título del panel
</h3>
</div>
<div class="panel-body">
Contenido del panel
</div>
<div class="panel-footer">
Panel pie de página
</div>
</div>
<div class="page-header">
<h1>
Encabezado de página de ejemplo <small>Subtexto para el encabezado</small>
</h1>
</div>
<div class="btn-group">
<button class="btn btn-<em class="glyphicon glyphicon">-align-left"></em> Izquierda</<button class="btn btn-<em class="glyphicon glyphicon">-align-center"></em> Central</<button class="btn btn-<em class="glyphicon glyphicon">-align-right"></em> Derecha</<button class="btn btn-<em class="glyphicon glyphicon">-align-justify"></em> Todo</button>
</div>
<div class="row clearfix">
<div class="col-md-12 column">
<div class="jumbotron">
<h1>
¡Hola, mundo!
</h1>
<p>
Este es un plantilla para un sitio web de marketing o informativo simple. Incluye una gran llamada llamada unidad héroe y tres piezas de contenido de apoyo. Úsalo como punto de partida para crear algo más único.
</p>
<p>
<a class="btn btn-primary btn-large" href="#">Aprende más</a>
</p>
</div>
</div>
</div>
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-ejemplo-navbar-collapse-1"> <span class="sr-only">Cambiar navegación</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> <a class="navbar-brand" href="#">Marca</a>
</div>
<div class="collapse navbar-collapse" id="bs-ejemplo-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">Enlace</a>
</li>
<li>
<a href="#">Enlace</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Desplegable<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li>
<a href="#">Acción</a>
</li>
<li>
<a href="#">Otra acción</a>
</li>
<li>
<a href="#">Aquí algo más</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">Enlace separado</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">Enlace separado adicional</a>
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input class="form-control" type="text" />
</div> <button type="submit" class="btn btn-default">Enviar</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#">Enlace</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Desplegable<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li>
<a href="#">Acción</a>
</li>
<li>
<a href="#">Otra acción</a>
</li>
<li>
<a href="#">Aquí algo más</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">Enlace separado</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
<h2>
Encabezado
</h2>
<p>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
</p>
<p>
<a class="btn" href="#">Ver detalles »</a>/a>
</p>
<div class="jumbotron">
<h1>
¡Hola, mundo!
</h1>
<p>
Este es un plantilla para un sitio web de marketing o informativo simple. Incluye una gran llamada llamada unidad héroe y tres piezas de contenido de apoyo. Úsalo como punto de partida para crear algo más único.
</p>
<p>
<a class="btn btn-primary btn-large" href="#">Aprende más</a>
</p>
</div> <address> <strong>Twitter, Inc.</strong><br /> 795 Folsom Ave, Suite 600<br /> San Francisco, CA 94107<br /> <abbr title="[#2P:</abbr> (123) 456-7890</address>
<div class="btn-group">
<button class="btn btn-<em class="glyphicon glyphicon">-align-left"></em> Izquierda</<button class="btn btn-<em class="glyphicon glyphicon">-align-center"></em> Central</<button class="btn btn-<em class="glyphicon glyphicon">-align-right"></em> Derecha</<button class="btn btn-<em class="glyphicon glyphicon">-align-justify"></em> Todo</button>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-md-4 column">
</div>
<div class="col-md-4 column">
<h2>
Encabezado
</h2>
<p>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
</p>
<p>
<a class="btn" href="#">Ver detalles »</a>/a>
</p>
</div>
<div class="col-md-4 column">
<h2>
Encabezado
</h2>
<p>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
</p>
<p>
<a class="btn" href="#">Ver detalles »</a>/a>
</p>
</div>
</div>
</div>
</body>
</html>

El efecto es el siguiente:

Referencias relacionadas:

http://www.runoob.com/bootstrap/bootstrap-entorno-setup.html

http://www.runoob.com/intentar/bootstrap/layoutit/

Lo que se menciona anteriormente es el tutorial de inicio de Bootstrap (parte 1) que el editor le presenta a ustedes, espero que les sea útil. Si tienen alguna pregunta, déjenme un mensaje y el editor responderá a tiempo. También agradezco mucho el apoyo de todos a la página web de tutorial de grito!

Declaración: El contenido de este artículo se obtiene de la red, pertenece al autor original, el contenido se contribuye y carga espontáneamente por los usuarios de Internet, este sitio no posee los derechos de propiedad, no ha sido editado por humanos y no asume ninguna responsabilidad legal relacionada. Si encuentra contenido sospechoso de infracción de derechos de autor, por favor envíe un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, reemplace # con @ para denunciar y proporcione evidencia relevante. Una vez verificada, este sitio eliminará de inmediato el contenido sospechoso de infracción de derechos de autor.)

教程基础
Te gustará