Bootstrap basico

espero les sirvaDescripción completa...
Author:  JolvienTorres
4 downloads 180 Views 4MB Size
Report
DOWNLOAD .PDF

Recommend Documents

bootstrapDeskripsi lengkap
Todo sobre BootstrapDescripción completa
Códigos de exemplo: http://livrosdomaujor.com.br/bootstrap3/codigos.htmlDescrição completa
Bootstrap Tutorial
ebook bootstrap indonesia
curso bootstrap
bootstrap
Belajar bootstrapFull description
Tugas mata kuliah pemograman internetFull description
Ciclo Bootstrap
Programming
Programming
Prenez en Main BootstrapDescription complète
Ejercicio de práctica de bootstrapDescripción completa
Introduccion a BootstrapDescripción completa
Bootstrap document
Twitter Bootstrap
Descripción completa
Bootstrap Quick Guide
ootstrap 4Descripción completa
Descrição: Prenez en Main Bootstrap
Full description
< /div> < /div> < /div>
...
Primero; crear una fila (
). A continuación, añadir el número deseado de columnas (etiquetas apropiadas con .col-*-*clases). Tenga en cuenta que los números de .col-*-*siempre deben agregar hasta 12 para cada fila.

ALDO OMAR MORALES CARLOS

UNIVERSIDAD NACIONAL SANTIAGO ANTUNEZ DE MAYOLO A continuación hemos recopilado algunos ejemplos de diseños básicos de la red Bootstrap.

Tres columnas iguales El siguiente ejemplo muestra cómo obtener unas tres columnas de igual anchura a partir de tabletas y escalada a las grandes computadoras de escritorio. En los teléfonos móviles, las columnas se apilan automáticamente:

Ejemplo .col-sm-4
.col-sm-4
.col-sm-4


Dos columnas desiguales

El siguiente ejemplo muestra cómo obtener dos columnas diferentes de ancho a partir de las tabletas y escalar a grandes equipos de sobremesa:

ALDO OMAR MORALES CARLOS

UNIVERSIDAD NACIONAL SANTIAGO ANTUNEZ DE MAYOLO Ejemplo .col-sm-4 .col-sm-8

Bootstrap Texto / Tipografía Ajustes por defecto de Bootstrap predeterminado de tamaño de fuente mundial de arranque es 14px, con una línea de altura de 1.428. Esto se aplica a los y todos los párrafos. Además, todos los

elementos tienen un margen inferior que es igual a la mitad de su line-height computarizada (10px por defecto).

Bootstrap valores predeterminados del navegador vs. En este capítulo, vamos a ver algunos elementos HTML que ser de estilo un poco diferente por Bootstrap que por defecto del navegador.

-

De forma predeterminada, Bootstrap estilo de los títulos HTML (

a

) de la siguiente manera:

ALDO OMAR MORALES CARLOS

UNIVERSIDAD NACIONAL SANTIAGO ANTUNEZ DE MAYOLO Ejemplo

h1 Bootstrap heading (36px) h2 Bootstrap heading (30px) h3 Bootstrap heading (24px) h4 Bootstrap heading (18px)

h5 Bootstrap heading (14px) h6 Bootstrap heading (12px)

En el código HTML Bootstrap elemento se utiliza para crear un texto secundario del cigarrillo en cualquier partida:

ALDO OMAR MORALES CARLOS

UNIVERSIDAD NACIONAL SANTIAGO ANTUNEZ DE MAYOLO Ejemplo

h1 heading secondary text h2 heading secondary text h3 heading secondary text h4 heading secondary text 

h5 heading secondary text h6 heading secondary text

Bootstrap estilo al HTML elemento de la siguiente manera: Bootstrap estilo al HTML elemento de la siguiente manera:

Ejemplo Use the mark element to highlight text.

ALDO OMAR MORALES CARLOS

UNIVERSIDAD NACIONAL SANTIAGO ANTUNEZ DE MAYOLO

Bootstrap estilo al HTML elemento de la siguiente manera:

Ejemplo The WHO was founded in 1948.

Bootstrap estilo al HTML
elemento de la siguiente manera:

Ejemplo For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally. From WWF's website Para mostrar la cotización a la derecha, utilice la .blockquote-reverseclase:

 jemplo For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally. From WWF's website

ALDO OMAR MORALES CARLOS

UNIVERSIDAD NACIONAL SANTIAGO ANTUNEZ DE MAYOLO

Bootstrap estilo al HTML
elemento de la siguiente manera:

Ejemplo Coffee

- black hot drink Milk

- white cold drink

Bootstrap estilo al HTML elemento de la siguiente manera:

Ejemplo The following HTML elements: span, section, and div defines a section in a document.

Bootstrap estilo al HTML elemento de la siguiente manera:

Ejemplo Use

ctrl + p to

open the Print dialog box.

ALDO OMAR MORALES CARLOS

UNIVERSIDAD NACIONAL SANTIAGO ANTUNEZ DE MAYOLO

 Bootstrap estilo al HTML 
 elemento de la siguiente manera:



Ejemplo Text in a pre element is displayed in a fixed-width font, and it preserves both



spaces and



line breaks.



Colores contextuales y Fondos Bootstrap también tiene algunas clases contextuales que pueden ser utilizados para proporcionar ", es decir a través de colores". Las clases para los colores de texto son: .text-muted, .text-primary, .text-success, .text-info, .text-warning, y .text-danger:



Ejemplo This text is muted. This text is important.



ALDO OMAR MORALES CARLOS



 UNIVERSIDAD NACIONAL SANTIAGO ANTUNEZ DE MAYOLO This text indicates success. This text represents some information. This text represents a warning. This text represents danger. Las clases para los colores de fondo son: .bg-primary, .bg-success, bg-info, bg-warning, y .bg-danger:



Ejemplo This text is important. This text indicates success. This text represents some information. This text represents a warning. This text represents danger.



Más clases de tipografía Las clases Bootstrap a continuación se pueden añadir a los elementos HTML estilo adicionales:



Class



Description



Example



.lead



Makes a paragraph stand out



Try it



ALDO OMAR MORALES CARLOS



 UNIVERSIDAD NACIONAL SANTIAGO ANTUNEZ DE MAYOLO .small



Indicates smaller text (set to 85% of the size of the parent)



Try it



.text-left



Indicates left-aligned text



Try it



.text-center



Indicates center-aligned text



Try it



.text-right



Indicates right-aligned text



Try it



.textjustify



Indicates justified text



Try it



.text-nowrap



Indicates no wrap text



Try it



.textlowercase



Indicates lowercased text



Try it



ALDO OMAR MORALES CARLOS



 UNIVERSIDAD NACIONAL SANTIAGO ANTUNEZ DE MAYOLO .textuppercase



Indicates uppercased text



Try it



.textcapitalize



Indicates capitalized text



Try it



.initialism



Displays the text inside an  element in a slightly smaller font size



Try it



.listunstyled



Removes the default list-style and left margin on list items (works on both 
    and 
      ). This class only applies to immediate children list items (to remove the default list-style from any nested lists, apply this class to any nested lists as well)
      

      
Try it
      

      
.list-inline
      

      
Places all list items on a single line
      

      
Try it
      

      
.dlhorizontal
      

      
Lines up the terms ( 
      ) and descriptions ( 
      ) in 
       elements side-by-side. Starts off like default 
      s, but when the browser window expands, it will line up side-by-side
      

      
Try it
      

      
ALDO OMAR MORALES CARLOS
      

      
 UNIVERSIDAD NACIONAL SANTIAGO ANTUNEZ DE MAYOLO .prescrollable
      

      
Makes a 
       element scrollable
      

      
bootstrap Tablas Bootstrap tabla básico Una tabla Bootstrap básica tiene un acolchado ligero y sólo divisores horizontales. La .tableclase añade un estilo básico a una tabla:
      

      
Ejemplo
      

      
ALDO OMAR MORALES CARLOS
      

      
 UNIVERSIDAD NACIONAL SANTIAGO ANTUNEZ DE MAYOLO
      

      
Las filas de rayas La .table-striped clase añade cebra-raya a una tabla:
      

      
Ejemplo
      

      
Tabla bordeado La .table-borderedclase añade fronteras en todos los lados de la mesa y las células:
      

      
Ejemplo
      

      
ALDO OMAR MORALES CARLOS
      

      
 UNIVERSIDAD NACIONAL SANTIAGO ANTUNEZ DE MAYOLO
      

      
Las filas de la libración La .table-hoverclase permite a un estado estacionario en filas de la tabla:
      

      
Ejemplo
      

      
Tabla condensada La .table-condensedclase hace una tabla más compacta cortando el relleno de celda a la mitad:
      

      
Ejemplo
      

      
ALDO OMAR MORALES CARLOS
      

      
 UNIVERSIDAD NACIONAL SANTIAGO ANTUNEZ DE MAYOLO
      

      
Las clases contextuales Clases contextuales pueden ser usados para colorear filas de la tabla ( ) o celdas de la tabla ( ):
      

      
Ejemplo
      

      
Las clases contextuales que se pueden utilizar son:
      

      
ALDO OMAR MORALES CARLOS
      

      
 UNIVERSIDAD NACIONAL SANTIAGO ANTUNEZ DE MAYOLO
      

      
Tablas de respuesta La .table-responsiveclase crea una tabla de respuesta. La tabla a continuación, desplazarse horizontalmente en dispositivos pequeños (menos de 768px). Al ver en algo más grande que 768px de ancho, no hay diferencia:
      

      
Ejemplo   ...  
      

      
bootstrap Imágenes Esquinas redondeadas La .img-rounded clase añade esquinas redondeadas para una imagen (IE8 no es compatible con esquinas redondeadas):
      

      
ALDO OMAR MORALES CARLOS
      

      
 UNIVERSIDAD NACIONAL SANTIAGO ANTUNEZ DE MAYOLO
      

      
Ejemplo 
      

      
Circulo La .img-circle clase da forma a la imagen de un círculo (IE8 no es compatible con las esquinas redondeadas):
      

      
Ejemplo 
      

      
Miniatura La .img-thumbnailclase da forma a la imagen para una versión en miniatura:
      

      
Ejemplo 
      

      
ALDO OMAR MORALES CARLOS
      

      
 UNIVERSIDAD NACIONAL SANTIAGO ANTUNEZ DE MAYOLO
      

      
Imágenes de respuesta Imágenes vienen en todos los tamaños. Lo mismo ocurre con las pantallas. Responsive imágenes se ajustan automáticamente para adaptarse al tamaño de la pantalla. Crear imágenes que responden mediante la adición de una .img-responsive clase a la  etiqueta. La imagen será entonces escalar muy bien al elemento padre. La .img-responsive clase se aplica display: block; y max-width: 100%; y height: auto; de la imagen:
      

      
Ejemplo 
      

      
Galería de imágenes También puede utilizar el sistema de rejilla de Bootstrap en conjunto con la .thumbnailclase para crear una galería de imágenes:
      

      
Ejemplo    
      Pulpit Rock: A famous tourist attraction in Forsand, Ryfylke, Norway. 
         
      

      
ALDO OMAR MORALES CARLOS
      

      
 UNIVERSIDAD NACIONAL SANTIAGO ANTUNEZ DE MAYOLO   
      Moustiers-Sainte-Marie: Considered as one of the "most beautiful villages of France". 
            
      The Cinque Terre: A rugged portion of coast in the Liguria region of Italy. 
          
      

      
Incrusta Responsive También permiten vídeos o presentaciones de diapositivas escala correctamente en cualquier dispositivo. Las clases pueden ser aplicados directamente a <iframe>, ,