Continué escribiendo el diseño del artículo anterior. En el artículo anterior, he completado el diseño de la barra de navegación y el anuncio.
Empiece a colocar:
Creo que la representación final es como esta, como sigue: me dividí en capturas de pantalla de tres páginas, que son demasiado grandes:
Entonces, el último inacabado continuará:
Paso 5: Agregar el sistema de cuadrícula, elegí el diseño de tres columnas Col-MD-4; La cuadrícula completa es 12 y 4 es un tercio de 12. También puede diseñar y establecer múltiples cuadrículas:
<div id = "tag_container"> <div> <div> <img src = "image/3.jpg"> <h2> animal1 </h2> <p> hotel Linka acaba de decir que Fenghan vio una gran institución de souvenir enviado a la espalda </p> <p> <a href = "#"> click me </a> </p> </iv> <iv> <iv> <IMG IMG src = "imagen/3.jpg"> <h2> animal1 </h2> <p> hotel Linka acaba de decir que Fenghan vio una gran institución de recuerdos enviado a la parte posterior </p> <p> <a href = "#"> haga clic en mí </a> </p> </div> <div> <img src = "image/3.jpg"> <h2> animal <h2> Fenghan vio una gran institución de búsqueda de casas enviada por mí </p> <p> <a href = "#"> Haga clic en mí </a> </p> </div> </div> </div> </div> </div>
1) La cuadrícula debe estar en un contenedor o DIV fluible de contenedores, de modo que se pueda asignar automáticamente la alineación y el relleno apropiados.
2) Haga la ID "tag_container" y la parte con la clase Col-MD-4 está centrada y alineada:
#tag_container .col-md-4 {text-align: center; }Paso 6: Establezca un espacio de línea y divida las partes superior e inferior
<hr> </hr>
CSS es
hr .divider {margen: 40px; }Paso 7: La creación de la página de pestañas. La siguiente imagen son las representaciones de las tres páginas de pestañas:
1) Principio de la página de pestaña:
<ul role = "Tablist"> <li> <a href = "#an1" role = "tab" data-toggle = "tab"> animal1 </a> </li> <li> <a href = "#an2" rol = "tab" toggle = "tab"> animal2 </a> </li> <li> <a href = "#an3" rol = "tab" Tab "" Tab "" Tab " data-toggle = "tab"> animal3 </a> </li> </ul> <div> <div id = "an1"> </div> <div id = "an2"> </div> <div id = "an3"> </div> </div>
La estructura de la página de la etiqueta es: UL List declara la etiqueta y las etiquetas class = "Nav-Tabs" rol = "Tablist"
El enlace en la etiqueta Li está marcado rol = "pestaña" data-toggle = "pestaña" para que se pueda lograr la función de abrir la página de la página de pestaña. El href = "#an1" de cada página de pestaña está vinculado al siguiente diseño de visualización.
Estructura de diseño expandido: en <Viv>, cada página de pestaña tiene un panel. Tenga en cuenta que la ID se asigna a la página de la pestaña anterior, para que la página pueda abrirse. <div id = "an3">
2) Agregue el diseño en la página de la etiqueta
<ul role = "Tablist"> <li> <a href = "#an1" role = "tab" data-toggle = "tab"> animal1 </a> </li> <li> <a href = "#an2" rol = "tab" toggle = "tab"> animal2 </a> </li> <li> <a href = "#an3" rol = "tab" Tab "" Tab "" Tab " data-toggle = "tab"> animal3 </a> </li> </ul> <div> <div id = "an1"> <div> <div> <h2> animal1 <span> zootopia </span> </h2> <p> ajdkgjfd ve el precio de la tecnología de tiempo de la aeronave desarrollada por la aeronave de tecnología de tiempo. Si los resultados del Día de la Policía de la Embajada de Shiguo cuestan, el precio del duelo artificial de la canción Ka irjeigrugitaJdokgjiJrgi </p> </div> <div> <img src = "imagen/1.jpg"> </div> </div> </div> <div> <div> <h2> animal2 <span> Zootopia </span> </h2> <p> AJDKGJFD ve el precio del tiempo de la tecnología desarrollada por el avión de tecnología del tiempo. Si el costo de los resultados del Día de la Policía de la Embajada de Shiguo, el precio del duelo artificial de la canción Ka irjeigrugitajdokgjiJrgi </p> </div> <div> <img src = "image/2.jpg"> </div> </div> <iv> <d id = "an3"> <div> <iv> <h2> animal3333 <span> Zootopia </span> </h2> <p> Ajdkgjfd ve el precio del avión de tecnología de tiempo. Si se produce el Día de la Policía de la Embajada de Shiguo, el precio del duelo artificial de la canción Ka irjeigrugitajdokgjijrgi </p> </div> <div> <img src = "imagen/3.jpg"> </div> </div> </div> </div> </div> </div>
1) Establezca el margen superior de la página de pestaña
.Feature {Padding: 30px 0}2) Establezca las fuentes de título de la página de pestañas, etc.
.Feature-Heading {Font-Size: 50px; Color:#2A6496; margen-top: 120px; }3) Establezca el formato de subtítulo de la página de pestaña:
.Feature-Heading .Text-MUuted {Font-Size: 28px; Color: #999; }Paso 8: Agregue el aviso inferior de derechos de autor, las representaciones son las siguientes:
<Tooter> <p> <a href = "#top"> volver a la parte superior </a> </p> <p>@2016 Rongyu System </p> </pie>
Nota: Class = "Pull-Right" puede tirar del elemento a la derecha, que es una característica del CSS de Bootstrap.
Paso 9: Agregue el botón emergente sobre:
<Div id = "Acerca de"> <div> <div> <div> <botón type = "botón" data-dismiss = "modal" aria-label = "close"> <span aria-hidden = "true"> × </span> </boton> <h4> sobre </h4> </div> <div> <p> zootopia "es producido por disney, co-diirigido por Rich Moore, byerald y Guardy, byerald y byard y con la voz de Ginnifer Goodwin, Jason Bateman, Shakira, Allen Tuddick, Idris Elba, J.K. y otros [1]. /..modal-content-> </div> <!-/.modal-dialog-> </div> <!-/.modal-dialog-> </div> <!-/.modal->
1) La ventana emergente estática se divide en tres partes, título, forma y botón; entre los cuales, solo necesitamos un botón y el otro comentó. Y agregar id = a punto de facilitar el posicionamiento a continuación;
2) En la barra de menú sobre la barra de navegación, agregue el enlace de alternar, data-toggle = "modal" y el id correspondía a data-target = "#sobre":
<li> <a href = "#" data-toggle = "modal" data-target = "#sobre"> sobre </a> </li>
Paso 10, posicionamiento del menú
Haga clic en la columna de características de la barra de navegación y se abrirá la página de pestaña correspondiente; Se requiere una pieza de código JS para implementarlo
<script> $ (documento) .Ready (function () {$ ("#Demo-Navbar .Dropdown-Menu a"). Click (function () {var href = $ (this) .attr ('href'); // alerta (href); $ ("#tab-list a [href = '" + href + "])). Tab (" show ");});});});}); </script>1) Navegue a través del posicionamiento de identificación $ ("#demo-navbar .dropdown-menu a") y configure el evento de clic;
2) pestaña ("'show") para abrir la página de pestaña de $ ("#tab-list a [href ='" + href + "']").
De esta manera, Bootstrap Learning acaba de comenzar.
Si aún desea estudiar en profundidad, puede hacer clic aquí para aprender y adjuntarle un tema maravilloso: Tutorial de aprendizaje de Bootstrap
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.