Portal Con Bootstrap

PORTAL CON BOOTSTRAP
PORTAL.HTML
SECCION HEAD
DEBE AGREGAR LAS SIGUIENTES ETIQUETAS LINK
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="./css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<form>
Titulo centrado
<div class="jumbotron text-center">
<h1>Mi Primera Pagina con Bootstrap</h1>
<p>con efecto responsive</p>
</div>
Ejemplo personalizo 2 columnas
1
Agregar Columnas en otra fila
2
2. Slider
https://www.w3schools.com/howto/howto_js_slideshow.asp
demoslider.html
<!DOCTYPE html>
<html>
<head>
<style>
* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;}
.mySlides {display:none}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */

.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
3
/* The dots/bullets/indicators */
.dot {
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */

@media only screen and (max-width: 300px) {
.text {font-size: 11px}
}
</style>
</head>
4
<body>
<h2>muestra Slider automaticamente</h2>

<p>cambia de imagen cada 2 segundos</p>
<div class="slideshow-container">
<div class="mySlides fade">

<div class="numbertext">1 / 3</div>
<img src="img1.jpg" style="width:100%">
<div class="text">titulo 1</div>
</div>

<div class="text">titulo de la imagen 2</div>
</div>

</div>
</div>
<br>
<div style="text-align:center">
<span class="dot"></span>
</div>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
5
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex> slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
</script>
</body>
</html>
6
3. Portal completo
Portalconslider.html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;}
.mySlides {display:none}
/* Slideshow container */
.slideshow-container {
max-width: 1900px; <!puede cambiar ancho imagen>
position: relative;
margin: auto;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
7
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */

.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */

@media only screen and (max-width: 300px) {
8
.text {font-size: 11px}
}
</style>


<title>Bootstrap Theme Simply Me</title>
<meta charset="utf-8">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.bg-1 {
background-color: #1abc9c;
color: #ffffff;
}
.bg-2 {
background-color: #474e5d;
color: #ffffff;
}
.bg-3 {
background-color: #ffffff;
color: #555555;
}
.container-fluid {
padding-top: 70px;
padding-bottom: 70px;
}
</style>
</head>
<body>
<form>
encabezado slider inicio
<div class="slideshow-container">

</div>

<div class="text">titulo de la imagen 2</div>
9
</div>

</div>
</div>
<br>
<div style="text-align:center">
</div>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex> slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
</script>
slider final
columnas inicio
<div class="container-fluid bg-3 text-center">
<h3>carreras a elegir</h3><br>
<div class="row">
<div class="col-sm-4">
<p><h2>Computación e Informática.<h2></p>
<img src="compu.jpg" alt="Image" width="350" height="300">
</div>
10
<p><h2> Contabilidad<h2></p>
<img src="conta.jpg" alt="Image" width="350" height="300">
</div>
<p><h2>Carrera de Administración</h2></p>
<img src="admin.jpg" alt="Image" width="350" height="300">
</div>
</div>
</div>
columna final

<div class="container-fluid bg-2 text-center">
<h3Derechos Reservado</h3>
<p>lLima Mayo del 2017 @Copyright. </p>
<a href="#" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-search"></span> buscar
</a>
</div>

</form>
</body>
</html>
11
4.controles personalizados en el formularioi
12
BIBLIOGRAFIA
URL
https://www.w3schools.com/bootstrap/
13

Portal Con Bootstrap

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Portal Con Bootstrap

Uploaded by

Copyright:

Available Formats

PORTAL CON BOOTSTRAP

DEBE AGREGAR LAS SIGUIENTES ETIQUETAS LINK

<meta http-equiv="X-UA-Compatible" content="IE=edge">

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

<link href="./css/bootstrap.min.css" rel="stylesheet">

<div class="jumbotron text-center">

<h1>Mi Primera Pagina con Bootstrap</h1>

<p>con efecto responsive</p>

Ejemplo personalizo 2 columnas

/* Number text (1/3 etc) */

/* On smaller screens, decrease text size */

<h2>muestra Slider automaticamente</h2>

<div class="mySlides fade">

<div class="mySlides fade">

<div class="mySlides fade">

/* Number text (1/3 etc) */

/* On smaller screens, decrease text size */

encabezado slider inicio

<div class="mySlides fade">

<div class="mySlides fade">

<div class="mySlides fade">

You might also like