Tutoriales de BootStrap de entrada (II): estilos internos fijos

lecturas relacionadas:

Tutoriales de BootStrap de entrada (I): diseño visual

HTML5tipo de documento (Doctype)

Bootstrap utiliza algunos elementos HTML5elementos y atributos CSS, por lo que se necesita usar HTML5tipo de documento.

<!DOCTYPE html>
<html>
....
</html>

primero dispositivo móvil

<meta name="viewport" content="width=device-width, initial-scale=1.0”>

　　　Configura el ancho en-width para asegurar que se muestre correctamente en diferentes dispositivos.

　initial-scale=1.0 asegúrate de que la página se cargue en1:1presentación en proporción.

　　Se puede agregar el atributo user a la etiqueta meta viewport-scalable=no para deshabilitar su función de escalado.

<meta name="viewport" content="width=device-width,
initial-scale=1.0,
maximum-scale=1.0,
user-scalable=no">

Imagen responsive

<img src="..." class="img-responsive" alt="[#0#]"> 
　　bootstrap.css estableció img-Atributos responsivos:
.img-responsive {
display: inline-block;
height: auto;
max-ancho: 100%;
}

visualización global básica

body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: #ffffff;
}
body {margin:0}

Estilo de enlace

a:hover,
a:focus {
color: #2a6496;
text-decoration: underline;
}
a:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-enfoque-anillo-color;
contorno-desplazamiento: -2px;
}

　　Las configuraciones predeterminadas tienen sus pros y contras, es inevitable.

　　Si no desea subrayar, puede agregar una clase llamada btn al enlace a, y la configuración predeterminada de esta clase es la siguiente:

a:hover,
a:focus {
color: #2a6496;
text-decoration: underline;}
a:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-enfoque-anillo-color;
contorno-desplazamiento: -2px;}

Evitar incompatibilidades entre navegadores

　　Normalize.css proporciona una mayor consistencia entre navegadores.

Contenedor (Container)

<div class="container">
..
</div>

　　Estilos de .container:

.container {
rejilla-derecha: 15px;
rejilla-izquierda: 15px;
margen-derecha: automática;
margen-izquierda: automática;
}

　　Los márgenes laterales están determinados por el navegador.

　　Debido a que el relleno es de ancho fijo, el contenedor no es anidado por defecto.

.container:before,.container:after {
display: table;
content: " ";
}

　　Establecer display en table crea una tabla anónima-célula y un nuevo contexto de formato de bloque. El pseudo-elemento :before previene el colapso del margen superior, el pseudo-elemento :after limpia la flotación. content: " " arregla algunos errores de Opera.

.container:after {
limpiar: ambos;
}

　　Además, hay que solicitar la media query correspondiente:

@media (min-ancho: 768px) {
.container {
ancho: 750px;
　　}
}

Navegadores Bootstrap/Soporte de dispositivos

* Bootstrap admite Internet Explorer 8 y versiones de IE más recientes.

Referencia:http://www.runoob.com/bootstrap/bootstrap-css-overview.html

Lo mencionado anteriormente es el tutorial de inicio de Bootstrap (dos) que presenta estilos integrados fijos, espero que sea útil para todos. Si tienen alguna pregunta, déjenme un mensaje y responderé a tiempo. También agradezco muchísimo el apoyo a la página web de呐喊教程！

Tutoriales básicos

Te gustará