El aprendizaje de Bootstrap es muy simple, y el estilo que proporciona es muy hermoso. Solo un pequeño estudio simple puede crear páginas hermosas.
Bootstrap Sitio web chino: http://v3.bootcss.com/
Bootstrap proporciona tres tipos de descargas:
Bootstrap para entornos de producción
Compile y comprimidos CSS, JavaScript y archivos de fuentes. No contienen documentos y archivos de origen.
Código fuente de arranque
Menos, JavaScript y Font Archivos de archivo fuente y con documentación. Requiere el menos compilador y algún trabajo de configuración.
Hablar con descaro a
Este es un proyecto de portada de origen de menos a SASS para una rápida introducción en rieles, brújulas o proyectos solo SASS.
De hecho, podemos usarlo sin descargar bootstrap:
El sitio web chino de Bootstrap ha creado especialmente su propio servicio de aceleración CDN gratuito para Bootstrap. Basado en el servicio CDN de los fabricantes de nubes nacionales, la velocidad de acceso es más rápida, el efecto de aceleración es más obvio, no hay velocidad y limitación de ancho de banda, y es permanentemente gratuito.
base.html
<! DocType html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua compatible" content = "ie = edge"> <meta name = "viewport" content = "width = dispositivo-width, inicial-scale = 1" <<r!-el 3 meta * Mets * viewport "debe colocar primero * * cualquier otro contenido * debe * seguirlos! -> <title> Bootstrap 101 Template </title> <!-Bootstrap-> <Link rel = "Stylesheet" href = "http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css"> </head> <hody> <heh> ¡Hola, bootstrap! </h1> <!-jQuery (necesario para los complementos Javascript de Bootstrap)-> <script src = "http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"> </script> <!-Incluya todos los complementos (a continuación), o incluyen archivos individuales según lo necesario-> <script src = "http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script> </body> </html>
Bootstrap se ha introducido en Base.html. Guárdelo y podemos usar los estilos proporcionados por Bootstrap.
Icono de fuente
Bootstrap proporciona más de 200 iconos por defecto. Podemos usar estos iconos a través de la etiqueta del tramo:
<h3> icon </h3> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <pan> </span>
Botón
La etiqueta <botton> </boton> se usa para crear botones, y Bootstrap proporciona estilos de botón ricos. <h3> botón </h3> <button type = "botón"> botón </botón> <botón type = "botón"> primario </botón> <button type = "botón de botón> éxito </botón> <botón type =" botón "> info </botón> <botón type =" botón "> Advertencia </botón> <button type =" botón "> advertencia </botón <botón <button type =" botón> dangerm. type = "botón"> botón </botón> <botón type = "botón"> primario </botón> <botón type = "botón"> éxito </botón> <botón type = "botón"> info </botón> <h3> Mostrar el icono en el botón </h3> <botón type = "botón"> </span> button </botón>
Además del tamaño predeterminado del botón, Bootstrap también proporciona tres parámetros para ajustar el tamaño del botón, a saber: BTN-LG, BTN-SM y BTN-XS.
Menú desplegable
El menú desplegable es una de las interacciones más comunes, y Bootstrap proporciona hermosos estilos.
<h3> menú desplegable </h3> <div> <button type = "button" id = "desplegable" "data-toggle =" desplegable "aria-expanded =" true "> desplegable <span> </span> </boton> <ul rol =" menú "menia-labeledby =" desplegmenu1 "> <li role =" presente "> <a roliMuiteMeMitem" Menuitem "Tabelled"-1 1 "-1 1" 1 "1" 1 "1" 1 "1" 1 "" 1 ". href = "#"> Action </a> </li> <li role = "presentación"> <a role = "menuitem" tabindex = "-1" href = "#"> otra acción </a> </li> <li rol = "presentación"> <a role = "menuitem" tabindex = "-1" href = "#"> algo aquí </a> </li> role = "menuitem" tabindex = "-1" href = "#"> enlace separado </a> </li> </ul> </div>
Caja de entrada
Use la etiqueta <Poning> </input> para crear un cuadro de entrada.
<h3> cuadro de entrada </h3> <div> <span> </span> <input type = "text" placeHolder = "username"> </div> <div> <span> </span> <input type = "contraseña" placeholder = "contraseña"> </div>
Barra de navegación
La barra de navegación es esencial como guía de todo el sitio web.
<h3> barra de navegación </h3> <am> <div id = "Navbar"> <ul> <li> <a href = "#"> Home </a> </li> <li> <a href = "#sobre"> Acerca de </a> </li> <li> <a href = "#contactar"> contacto </a> </li> <li> <a href = "#"#"#" role="button" aria-expanded="false">Dropdown <span></span></a> <ul role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li></li> <li>Nav header</li> <li><a href="#">Separated Enlace </a> </li> </li> </li> </ul> </div> <!-/. Nav-Collapse-> </div> </ar Nav>
Forma
La transferencia de datos entre personas y sistemas debe completarse mediante formularios. Por ejemplo, el envío de la información de registro/inicio de sesión, el envío de condiciones de consulta, etc. Use la etiqueta <Form> </orm> para crear un formulario.
<h3> formal </h3> <form> <div> <span> </span> <input type = "correo electrónico" id = "EjemploInputEmail1" PlaceHolder = "Ingrese el correo electrónico"> </div> <div> <span> </span> <input type = "contraseña" id = "Ejemplo de Ejemper type = "file" id = "ejemploinputFile"> <p> El texto de ayuda de nivel de bloque de ejemplo aquí. </p> </div> <div> <belse> <input type = "checkbox"> Compruébeme </label> </div> <button type = "enviar"> enviar </button> </form>
Caja de advertencia
Los cuadros de advertencia son un medio importante para que el sistema transmitiera información y brinde orientación a los usuarios. No hay una etiqueta para las cajas de advertencia, y el estilo proporcionado por Bootstrap puede crear instantáneamente hermosas cajas de advertencia.
<h3> Buzón de advertencia </h3> <div role = "alerta"> <botón type = "botón" data-dismiss = "alert" aria-label = "cierre"> <span aria-hidden = "true"> × </span> </boton> <strong> advertencia! </strong> mejor comprobar usted mismo, no te ves bien. </div> <div role = "alerta"> <a href = "#"> éxito! </a> </div> <div role = "alerta"> <a href = "#"> Info! </a> </div> <div role = "alerta"> <a href = "#"> advertencia! </a> </div> <divy = "alerta"> <a href = "#" "#"
Barra de progreso
El proceso de procesamiento del sistema a menudo requiere que los usuarios esperen, y la barra de progreso permite a los usuarios percibir el proceso de procesamiento del sistema, aumentando así la tolerancia.
<h3> Progress Bar </h3> <iv> <div role = "Progressbar" aria-valuenw = "70" aria-valuemin = "0" aria-valuemax = "100"> 70% </div> </div>
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.
Si aún desea aprender en profundidad, puede hacer clic aquí para aprender y adjuntar dos temas emocionantes a usted: Tutorial de aprendizaje Bootstrap Bootstrap Tutorial práctico