Conocimientos básicos de BootStrap for JavaWeb front-end framework

Server 2021-01-14 21:46:43 views: null

typora-root-url: imágenes
typora-copy-images-to: images

Oreja

contenido principal

Conocimientos básicos de BootStrap for JavaWeb front-end framework

Instalación y uso de BootStrap

Introducción a BootStrap

Sitio web oficial: http://getbootstrap.com/

Sitio web chino: http://www.bootcss.com/

Bootstrap es un conjunto de estilos CSS listos para usar (aún muy amigables). Lo hicieron dos empleados de Twitter.

Bootstrap es el marco HTML, CSS y JS más popular para el desarrollo de proyectos WEB de diseño receptivo y dispositivos móviles.

En 2011, con el fin de mejorar sus capacidades de gestión y análisis internos, un pequeño grupo de ingenieros de Twitter utilizó su tiempo libre para crear un conjunto de herramientas de front-end fáciles de usar, elegantes, flexibles y extensibles para sus productos: BootStrap. Bootstrap fue diseñado y construido por MARK OTTO y Jacob Thornton. Después de ser de código abierto en github, rápidamente se convirtió en el proyecto más reloj y tenedor en el sitio. Una gran cantidad de ingenieros contribuyen activamente con el código al proyecto, la comunidad es sorprendentemente activa, la versión del código evoluciona muy rápido, la calidad de los documentos oficiales es extremadamente alta (se puede decir que es elegante) y han surgido muchos sitios web basados ​​en Bootstrap: la interfaz es fresca y concisa; generoso.

Bootstrap es especialmente adecuado para equipos sin diseñadores (o incluso equipos sin front-end), que pueden producir rápidamente una página web.

Funciones de BootStrap

  1. El marco de desarrollo front-end conciso, intuitivo y poderoso, html, css, conjunto de herramientas javascript, hacen que el desarrollo web sea más rápido y simple.
  2. Bootstrap basado en html5 y css3 tiene muchas características atractivas: curva de aprendizaje amigable, excelente compatibilidad, diseño receptivo, cuadrícula de 12 columnas, documento de guía de estilo.
  3. Complemento JQuery personalizado, biblioteca de clases completa, bootstrap3 basado en Less, bootstrap4 basado en la tecnología de preprocesamiento CSS de Sass
  4. El diseño de diseño receptivo de Bootstrap permite que un sitio web sea compatible con dispositivos de diferentes resoluciones. El diseño de diseño receptivo de Bootstrap brinda a los usuarios una mejor experiencia visual.
  5. Componentes ricos

Descarga y usa

  1. Descarga: http://v3.bootcss.com/getting-started/

  2. Después de que se complete la descarga

    Copie bootstrap.min.css en dist / css al proyecto css

    Copie bootstrap.min.js en dist / js al js del proyecto

  3. Descarga jquery.js

    http://jquery.com/

  4. La plantilla en html es:
<!DOCTYPE html>
<html lang="en">
  <head>
     <meta charset="utf-8">
     <!--使用X-UA-Compatible来设置IE浏览器兼容模式 最新的渲染模式-->   
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <!--
        viewport表示用户是否可以缩放页面；
        width指定视区的逻辑宽度；
        device-width指示视区宽度应为设备的屏幕宽度；
        initial-scale指令用于设置Web页面的初始缩放比例
        initial-scale=1则将显示未经缩放的Web文档
     -->
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Bootstrap的HTML标准模板</title>   
     <!-- 载入Bootstrap 的css -->
     <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <h1>Hello, world!</h1>     

    <!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
    <script src="js/jquery-3.4.1.js"></script>
    <!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
    <script src="js/bootstrap.min.js"></script> 
  </body>    
</html>

Nota:

<Font color = "red"> Actualmente, los complementos que no usan jquery no necesitan importar archivos js. Esto es para garantizar la integridad de la plantilla. </font>

Descripción:

  • La etiqueta viewport <meta> se usa para especificar si el usuario puede hacer zoom en la página web
  • Las instrucciones de ancho y alto especifican el ancho y alto lógicos de la ventana gráfica, respectivamente. Su valor es un número en píxeles o un símbolo de marca especial.
  • La instrucción de ancho usa la etiqueta de ancho del dispositivo para indicar que el ancho de la ventana gráfica debe ser el ancho de la pantalla del dispositivo.
  • La instrucción de altura usa la etiqueta de altura del dispositivo para indicar que la altura de la ventana gráfica es la altura de la pantalla del dispositivo.
  • El comando initial-scale se utiliza para establecer la escala inicial de la página web. El valor de zoom inicial predeterminado varía según el navegador del teléfono inteligente. En circunstancias normales, el dispositivo presentará la página web completa en el navegador; si se establece en 1.0, se mostrará el documento web sin escala.

  1. API de referencia

    http://v3.bootcss.com/css/

Diseño de contenedor y sistema de cuadrícula

Contenedor de diseño

1. La clase .container se usa para contenedores con ancho fijo y soporte para diseño receptivo.

`` `php + HTML
<div class =" contenedor ">
...
</div>


​   2、.container-fluid类用于100% 宽度，占据全部视口（viewport）的容器。

```html
<div class="container-fluid">
  ...
</div>

Sistema de cuadrícula

Bootstrap proporciona un sistema de cuadrícula de transmisión de transmisión que responde primero al dispositivo móvil. A medida que aumenta el tamaño de la pantalla o la ventana gráfica, el sistema se dividirá automáticamente en hasta 12 columnas. El sistema de cuadrícula se utiliza para crear diseños de página a través de una serie de combinaciones de filas y columnas, y su contenido se puede colocar en estos diseños creados.

El principio de implementación del sistema de cuadrícula es muy simple, simplemente definiendo el tamaño del contenedor, dividiéndolo en 12 (también hay 24 o 32, pero 12 es el más común), luego ajustamos los márgenes interno y externo, y finalmente combinamos la consulta de medios, Produjo un poderoso sistema de cuadrícula de respuesta. El sistema de cuadrícula en el marco Bootstrap divide el contenedor en 12 partes iguales.

Conocimientos básicos de BootStrap for JavaWeb front-end framework

Nota: el sistema de cuadrícula debe usar css

Contenedor, fila, xs (teléfonos xsmall), sm (tabletas pequeñas), md (computadoras de escritorio intermedias), lg (computadoras de escritorio más grandes) a saber: pantalla ultra pequeña (automática), pantalla pequeña (750 px), pantalla mediana (970 px) y grande Pantalla (1170 px)

La fila de datos (.row) debe estar contenida en el contenedor (.container) para darle la alineación y el relleno adecuados.

La columna (.column) se puede agregar a la fila (.row), solo la columna (columna) se puede usar como un elemento secundario directo del contenedor de filas (.row), pero la suma del número de columnas no puede exceder el número total de columnas divididas por igual, como 12 . Si es mayor que 12, cambiará automáticamente a la siguiente línea.

El contenido específico debe colocarse en el contenedor de columna (columna)

<div class="container">
    <div class="row">
      <div class="col-md-4">4列</div>
      <div class="col-md-8">8列</div>
    </div>
</div>

Conocimientos básicos de BootStrap for JavaWeb front-end framework

Combinación de columnas

La simple comprensión de la combinación de columnas es cambiar el número para fusionar las columnas (principio: el número total de columnas no puede exceder 12, más de 12, cambiará automáticamente a la siguiente fila), algo similar al atributo colspan de la tabla.

<div class="container">
    <div class="row">
        <div class="col-md-4">4列</div>
        <div class="col-md-8">8列</div>
    </div>
    <div class="row">
        <div class="col-md-2">2列</div>
        <div class="col-md-10">10列</div>
    </div>
</div>

Desplazamiento de columna

Si no queremos que dos columnas adyacentes estén juntas, pero no queremos utilizar márgenes u otros medios técnicos. En este momento, puede utilizar la función de desplazamiento de columna para lograr. Usar el desplazamiento de la columna también es muy simple, simplemente agregue el nombre de la clase "col-md-offset- *" (donde el asterisco representa el número de combinaciones de columnas que se compensarán) en el elemento de la columna, luego la columna con este nombre de clase será Desplazamiento a la derecha. Por ejemplo, si agrega "col-md-offset-8" al elemento de columna, significa que la columna se mueve hacia la derecha por el ancho de 8 columnas (asegúrese de que el número total de columnas y columnas de desplazamiento no exceda de 12; de lo contrario, la columna se romperá | ajustará monitor).

<div class="container">
    <div class="row">
        <div class="col-md-1">1列</div>
        <div class="col-md-1">2列</div>
        <div class="col-md-1 col-md-offset-8">11列</div>
        <div class="col-md-1">12列</div>
    </div>
</div>

Orden de columna

La clasificación de columnas es en realidad para cambiar la dirección de la columna, es decir, para cambiar la flotación izquierda y derecha, y establecer la distancia flotante. En el sistema de cuadrícula del marco Bootstrap, se agregan los nombres de clase col-md-push- y col-md-pull- (donde el asterisco representa el número de combinaciones de columnas movidas). Tire hacia adelante y empuje hacia atrás.

<div class="container">
    <div class="row">
        <div class="col-md-1 col-md-push-10">1列</div>
        <div class="col-md-1 col-md-pull-1">2列</div>    
    </div>
</div>

Anidación de columnas

El sistema de cuadrícula del marco Bootstrap también admite el anidamiento de columnas. Puede agregar uno o más contenedores de filas a una columna y luego insertar columnas en este contenedor de filas.

<div class="container">
    <div class="row">
        <div class="col-md-2">
            我的里面嵌套了一个网格
            <div class="row">
                <div class="col-md-9">9</div>
                <div class="col-md-3">3</div>
            </div>
        </div>
        <div class="col-md-10">我的里面嵌套了一个网格
            <div class="row">
                <div class="col-md-10">10</div>
                <div class="col-md-2">2</div>
            </div>
        </div>              
    </div>
</div>

Estilo común

tipografía

título

Bootstrap es lo mismo que una página HTML normal. La definición del título usa las etiquetas <h1> a <h6>, pero Bootstrap cubre su estilo predeterminado y lo usa para mostrar el mismo efecto en todos los navegadores. Para hacer que los elementos que no son encabezados y los encabezados usen el mismo estilo, también se definen específicamente seis nombres de clases de .h1 a .h6. Al mismo tiempo, puede ir seguido de una línea de pequeños subtítulos <small> </small> o usar .small

<h1>h1. Bootstrap heading<small>副标题</small></h1>
<div class="h1">Bootstrap标题1<span class="small">副标题</span></div>

párrafo

El párrafo es otro elemento importante en la composición tipográfica. Use .lead para enfatizar el contenido (su función es aumentar el tamaño del texto, poner el texto en negrita y también ocuparse de la altura de la línea y el margen en consecuencia. Puede usar las siguientes etiquetas para resaltar el texto:

<pequeño>: fuente pequeña

<b> <strong>: negrita

<i> <em>: 斜体

<p class="lead"><small>以后的</small><b>你</b>会<i>感谢</i>现在<em>努力</em>的<strong>你</strong></p>

Enfatizar

Define un conjunto de nombres de clase, que se denominan aquí nombres de clase enfatizados. Estas clases enfatizadas se enfatizan por color. Las instrucciones son las siguientes:

.Text-muted: pista, use gris claro (# 999)

    .text-primary：主要，使用蓝色（#428bca）

    .text-success：成功，使用浅绿色(#3c763d)

    .text-info：通知信息，使用浅蓝色（#31708f）

    .text-warning：警告，使用黄色（#8a6d3b）

    .text-danger：危险，使用褐色（#a94442）
<div class="text-muted">提示效果</div>
<div class="text-primary">主要效果</div>
<div class="text-success">成功效果</div>
<div class="text-info">信息效果</div>
<div class="text-warning">警告效果</div>
<div class="text-danger">危险效果</div>

Efecto de alineación

En CSS, la alineación de texto se usa a menudo para establecer el estilo de alineación del texto.

Hay principalmente cuatro estilos:

Alineado a la izquierda, el valor queda a la izquierda;

Alineado al centro, el valor es el centro;

Alinear a la derecha, el valor es correcto;

Justificar en ambos extremos, el valor es justificar.

Para simplificar la operación y facilitar el uso, Bootstrap controla el estilo de alineación del texto definiendo cuatro nombres de clase: .text-left: alineación izquierda. Text-center: alineación central. Text-right: alineación derecha. Text-justify: ambos extremos Alineado.

<p class="text-left">我居左</p>
<p class="text-center">我居中</p>
<p class="text-right">我居右</p>
<p class="text-justify">网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份</p>

Lista

En los documentos HTML, hay tres estructuras principales de listas:

Lista desordenada (<ul> <li>… </li> </ul>)

Lista ordenada (<ol> <li>… </li> </ol>)

定义 列表 (<dl> <dt>… </dt> <dd>… </dd> </dl>)

Ir a la lista de puntos

Class = "lista-sin estilo"

<ul class="list-unstyled">
    <li>无序项目列表一</li>
    <li>无序项目列表二</li>
</ul>
Lista en línea

Class = "list-inline", reemplace la lista vertical con una lista horizontal y elimine la viñeta (número) para mantener la visualización horizontal. También se puede decir que las listas en línea nacen para hacer navegación horizontal.

<ul class="list-inline">
    <li>首页</li>
    <li>java学院</li>
    <li>在线课堂</li>
</ul>
Lista de definiciones

Agregue algunos estilos a la base original, use el estilo class = "dl-horizontal" para hacer una lista de definición horizontal: cuando el ancho del título exceda los 160px, se mostrarán tres puntos suspensivos.

<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言</dd>
    <dt>CSS</dt>
    <dd>层叠样式表是一种样式表语言</dd>
</dl>
<dl class="dl-horizontal">
    <dt>HTML 超文本标记语言</dt>
    <dd>HTML称为超文本标记语言，是一种标识性的语言。</dd>          
    <dt>测试标题不能超过160px的宽度,否则2个点</dt>
    <dd>我在写一个水平定义列表的效果，我在写一个水平定义列表的效果。</dd>
</dl>

Código

Generalmente se usa con más frecuencia en blogs personales para mostrar el estilo del código. Hay principalmente tres estilos de codificación proporcionados en Bootstrap:

(1) Use <code> </code> para mostrar una sola línea de código en línea

(2) Utilice <pre> </pre> para mostrar varias líneas de código

Estilo: predesplazamiento (altura, la altura máxima es fija, 340 px, más de lo que hay una barra de desplazamiento)

(3) Utilice <kbd> </kbd> para mostrar los códigos de entrada del usuario, como las teclas de acceso directo

Código en línea de una línea
<code>this is a simple code</code>
tecla de acceso rápido
<p>使用<kbd>ctrl+s</kbd>保存</p>
Código de bloque multilínea
<!-- 代码会保留原本的格式，包括空格和换行 -->
<pre>
public class HelloWorld {
    public static void main(String[] args){
        System.out.println("helloworld...");
    }
}
</pre>
<!-- 
    显示html标签的代码需要适应字符实体  
    小于号（<）要使用硬编码“&lt;”来替代，大于号(>)使用“&gt;”来替代 
-->
<pre>
    &lt;ul&gt;
        &lt;li&gt;测试实体符&lt;/li&gt;
    &lt;/ul&gt;
</pre>
<!-- 当高度超过，会存在滚动条 -->
<pre class="pre-scrollable">
    <ol>
        <li>...........</li>
        <li>...........</li>
        <li>...........</li>
        <li>...........</li>
        <li>...........</li>
        <li>...........</li>
        <li>...........</li>
        <li>...........</li>
        <li>...........</li>
        <li>...........</li>
        <li>...........</li>
        <li>...........</li>
    </ol>
</pre>

formar

Estilo de mesa

Bootstrap proporciona 1 estilo básico y 4 estilos adicionales para la tabla, y una tabla que admite la capacidad de respuesta. En el proceso de usar tablas de Bootstrap, solo necesita agregar el nombre de clase correspondiente para obtener diferentes estilos de tabla:

Estilo de base

1) .table: tabla básica

Adjuntar estilo

1) .table-striped: Mesa de paso de cebra

2) .table-bordered: mesa con borde

3) .table-hover: coloca el cursor sobre la tabla resaltada

4). Table-condensed: tabla compacta, la celda no tiene margen interno o el margen interno es más pequeño que otras tablas

estilo tr, th, td

Proporciona cinco nombres de clases diferentes, cada uno de los cuales controla los diferentes colores de fondo de la fila.

clase descripción Ejemplo
.activo Aplicar el color flotante a la fila o celda <font color = "# f5f5f5"> # f5f5f5 </font>
.éxito Indica una operación exitosa <font color = "# dff0d8"> # dff0d8 </font>
.info Operaciones que indican cambios de información <font color = "# d9edf7"> # d9edf7 </font>
.advertencia Indica una acción de advertencia <font color = "# fcf8e3"> # fcf8e3 </font>
.peligro Indica una operación peligrosa <font color = "# f2dede"> # f2dede </font> 
<table class="table table-bordered table-hover">
    <tr class="active">
        <th>JavaSE</th>
        <th>数据库</th>
        <th>JavaScript</th>
    </tr>
    <tr class="danger">
        <td>面向对象</td>
        <td>oracle</td>
        <td>json</td>
    </tr>
    <tr class="success">
        <td>数组</td>
        <td>mysql</td>
        <td>ajax</td>
    </tr>
</table>

Formar

La función principal del formulario es un control web que se utiliza para comunicarse con los usuarios. Un buen diseño de formulario puede permitir que las páginas web se comuniquen mejor con los usuarios. Los elementos comunes en el formulario incluyen principalmente: cuadro de entrada de texto, cuadro de selección desplegable, botón de radio, botón de verificación, campo y botón de texto, etc.

Control de formulario

.Form-control .input-lg (más grande) .input-sm (más pequeño)

Texto del cuadro de entrada

.Form-control

<div class="col-sm-3">
    <input type="text" name="" id="" class="form-control" />
    <input type="text" name="" id="" class="form-control input-lg" />
    <input type="text" name="" id="" class="form-control input-sm" />
</div>
Cuadro de selección desplegable seleccionar

Configuración de selección de varias líneas: múltiple = "múltiple"

<div class="col-sm-3">
    <select class="form-control">
        <option>北京</option>
        <option>上海</option>
        <option>深圳</option>
    </select>
    <select class="form-control" multiple="multiple">
        <option>北京</option>
        <option>上海</option>
        <option>深圳</option>
    </select>
</div>
Textarea
<div class="col-sm-3">
    <textarea class="form-control" rows="3"></textarea>
</div>
Caja

Pantalla vertical: casilla de verificación.

Pantalla horizontal: .checkbox-inline

<!-- 垂直显示 -->
<div>
    <div class="checkbox">
        <label><input type="checkbox" >游戏</label>
    </div>
    <div class="checkbox">
        <label><input type="checkbox" >学习</label>
    </div>
</div>
<!-- 水平显示 -->
<div>
    <label class="checkbox-inline">
        <input type="checkbox" >游戏
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" >学习
    </label>
</div>
Radio

Pantalla vertical: .radio

Pantalla horizontal: .radio-inline

<!-- 垂直显示 -->
<div>
    <div class="radio">
        <label><input type="radio" >男</label>
    </div>
    <div class="radio">
        <label><input type="radio" >女</label>
    </div>
</div>
<!-- 水平显示 -->
<div>
    <label class="radio-inline">
        <input type="radio" >男
    </label>
    <label class="radio-inline">
        <input type="radio" >女
    </label>
</div>
Botón

1) Utilice el botón para lograr

Estilo básico: btn 

<button class="btn">按钮</button>

： 样式 ： btn-primary btn-info btn-success btn-warning btn-danger btn-link btn-default

<button class="btn btn-danger">按钮</button>
<button class="btn btn-primary">按钮</button>
<button class="btn btn-info">按钮</button>
<button class="btn btn-success">按钮</button>
<button class="btn btn-default">按钮</button>
<button class="btn btn-warning">按钮</button>
<button class="btn btn-link">按钮</button>

2) Soporte de etiquetas múltiples: use un div para hacer botones

<a href="##" class="btn btn-info">a标签按钮</a>
<span class="btn btn-success">span标签按钮</span>
<div class="btn btn-warning">div标签按钮</div>

3) Tamaño del botón

Utilice .btn-lg, .btn-sm o .btn-xs para obtener botones de diferentes tamaños

<button class="btn btn-primary btn-xs">超小按钮.btn-xs</button>
<button class="btn btn-primary btn-sm">小型按钮.btn-sm</button>
<button class="btn btn-primary">正常按钮</button>
<button class="btn btn-primary btn-lg">大型按钮.btn-lg</button>

4) Botón desactivado

Método 1: agregue el atributo deshabilitado a la etiqueta

<button class="btn btn-danger" disabled="disabled">禁用按钮</button>

Método 2: agregue el nombre de clase "deshabilitado" a la etiqueta del elemento

<button class="btn btn-danger disabled">禁用按钮</button>

Agregar deshabilitado al atributo de clase solo está deshabilitado en estilo, ¡no realmente deshabilita este botón!

Diseño de formulario

La estructura de formulario básica viene con Bootstrap, y los controles de formulario individuales reciben automáticamente algunos estilos globales. Los pasos para crear un formulario básico se enumeran a continuación:

  • Agregue role = "formulario" al elemento principal <form> .
  • Coloque etiquetas y controles en un <div> con la clase .form-group . Esto es necesario para obtener el espaciado óptimo.
  • Agregue class = " form-control " a todos los elementos de texto <input>, <textarea> y <select> .
Forma horizontal

Mostrar forma horizontal en la misma línea

Sistema de cuadrícula con marco Bootstrap

<form class="form-horizontal" role="form">
    <div class="form-group">
        <label for="email" class="control-label col-sm-2">邮箱</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" placeholder="请输入邮箱"/>
        </div>
    </div>
    <div class="form-group">
        <label for="pwd" class="control-label col-sm-2">密码</label>
        <div class="col-sm-10">
            <input type="pwd" class="form-control" placeholder="请输入密码" />
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2">
            <div class=" checkbox">
                <label>
                    <input type="checkbox" />记住密码
                </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button class="btn btn-default">提交</button>
        </div>
    </div>
</form>
Formulario en línea

Mostrar los controles del formulario en una línea de formulario en línea

Tenga en cuenta que la etiqueta no se mostrará El significado de existencia: Si la etiqueta no está configurada para el control de entrada, el lector de pantalla no podrá reconocerla correctamente.

<form class="form-inline">
    <div class="form-group">
        <label for="email" >邮箱</label>
        <input type="email" class="form-control" placeholder="请输入邮箱"/>
    </div>
    <div class="form-group">
        <label for="pwd" >密码</label>
            <input type="pwd" class="form-control" placeholder="请输入密码" />
    </div>
    <div class="form-group checkbox">
        <label><input type="checkbox" />记住密码</label>
    </div>
    <div class="form-group">
        <button class="btn btn-default">提交</button>
    </div>
</form>

Miniatura

Las miniaturas son muy comunes en los sitios web de comercio electrónico y el lugar más común es la página de la lista de productos. La realización de miniaturas se utilizará con el sistema de cuadrícula. Al mismo tiempo, las miniaturas se pueden combinar con títulos, descripciones, botones, etc.

<div class="container">
    <div class="row">
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="img/IMG_0131.JPG" alt="...">
                <h3>高圆圆</h3>
                <p>出生于北京市，中国内地影视女演员、模特。</p>
                <button class="btn btn-default">
                    <span class="glyphicon glyphicon-heart"></span>喜欢</button>
                <button class="btn btn-info">
                    <span class="glyphicon glyphicon-pencil"></span>评论
                </button>
            </div>
        </div>
    </div>
</div>

panel

Lo que hace el componente .panel predeterminado es simplemente establecer el borde básico y el relleno para contener el contenido.

.Panel-default: estilo predeterminado

.Panel-header: encabezado del panel

.Panel-body: contenido del cuerpo del panel

<div class="panel panel-success">
    <div class="panel-heading">
        ......
    </div>
    <div class="panel-body">
        ......
    </div>
</div>

Complemento BootStrap

navegación

Use la combinación de menú desplegable y botón para hacer la navegación

Puntos clave:

1、基本样式: .nav 与 “nav-tabs”、“nav-pills”组合制作导航
2、分类: 
    1)、标签型 (nav-tabs)导航
    2)、胶囊形(nav-pills)导航
    3)、堆栈(nav-stacked)导航
    4)、自适应(nav-justified)导航
    5)、面包屑式(breadcrumb)导航 ，单独使用样式，不与nav一起使用,直接加入到ol、ul中即可，一般用于导航，主要是起的作用是告诉用户现在所处页面的位置（当前位置）
3、状态:
    1)、选中状态 active 样式
    2)、禁用状态: disable
4、二级菜单

Navegación con pestañas

<p>标签式的导航菜单</p>
<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">SVN</a></li>
  <li><a href="#">iOS</a></li>
  <li><a href="#">VB.Net</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">PHP</a></li>
</ul>

Navegación cápsula

<p>基本的胶囊式导航菜单</p>
<ul class="nav nav-pills">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">SVN</a></li>
    <li><a href="#">iOS</a></li>
    <li><a href="#">VB.Net</a></li>
    <li><a href="#">Java</a></li>
    <li><a href="#">PHP</a></li>
</ul>

Navegación de página

La paginación se puede ver en todas partes, dividida en navegación de página y navegación de página

Navegación de página: agregue paginación [pagination-lg | pagination-sm] a la etiqueta ul

Navegación de página: agregue pager a la etiqueta ul

Paginación

<ul class="pagination">
    <li><a href="#">&laquo;</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">&raquo;</a></li>
</ul>

Pasar página

<ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
</ul>

Menú desplegable

Cuando se usa el menú desplegable del marco Bootstrap, se deben usar dos js

<!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
<script src="js/jquery-3.4.1.js"></script>
<!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
<script src="js/bootstrap.min.js"></script>

Puntos clave:

1、使用一个类名为dropdown 或btn-group的div 包裹整个下拉框: 
   <div class="dropdown"></div>
2、默认向下dropdown，向上弹起加入 . dropup 即可
3、使用button作为父菜单，使用类名: dropdown-toggle 和自定义data-toggle属性
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"></button>
4、在button中 使用font 制作下拉箭头
    <span class="caret"></span>
5、下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu
6、分组分割线: <li>添加类名“divider”来实现添加下拉分隔线的功能
7、分组标题: li 添加类名 “dropdown-header” 来实现分组的功能
8、对齐方式:
    1)、dropdown-menu-left  左对齐 默认样式
    2)、dropdown-menu-right   右对齐
9、激活状态（.active）和禁用状态（.disabled）
<!--使用一个类名为dropdown,默认向下dropdown，向上弹起加入 . dropup 即可-->
<div class="dropdown ">
    <!--使用button作为父菜单，使用类名: dropdown-toggle 和自定义data-toggle属性-->
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        喜欢频道 <span class="caret"></span><!--下拉箭头-->
    </button>
    <!--下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu-->
    <ul class="dropdown-menu">   <!--dropdown-menu-right右对齐-->
        <!--分组标题: li 添加类名 “dropdown-header” 来实现分组的功能-->
        <li class="dropdown-header">----科普----</li>
        <li>
            <a href="#">人与自然</a>
        </li>
        <!--分组分割线: <li>添加类名“divider”来实现添加下拉分隔线的功能-->
        <li class="divider"></li>
        <li class="dropdown-header">----搞笑----</li>
        <li>
            <a href="#">欢乐喜剧人</a>
        </li>
        <li>
            <a href="#">快乐大本营</a>
        </li>
        <li class="divider"></li>
        <li class="disabled">   <!--禁用状态-->
            <a href="#">生活大爆炸</a>
        </li>
    </ul>
</div>

Caja modal

El cuadro modal (modal) es un formulario secundario que cubre el formulario principal. Por lo general, el propósito es mostrar contenido de una sola fuente, lo que permite cierta interacción sin salir del formulario principal. Los subformularios pueden proporcionar información, interacción, etc.

uso

  1. A través del atributo de datos : establezca el atributo data-toggle = "modal" en el elemento controlador (como un botón o enlace) , y establezca data-target = "# identifier" o href = "# identifier" para especificar el modo específico para cambiar Cuadro de estado (con id = "identificador").
  2. A través de JavaScript : con esta técnica, el cuadro modal con id = "identifier" se puede llamar a través de JavaScript:
$('#identifier').modal(options);

Ejemplo

<h2>创建模态框（Modal）</h2>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    开始演示模态框
</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
            </div>
            <div class="modal-body">在这里添加一些文本</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

método

método descripción Ejemplo
Alternar: .modal ('alternar') Cambie el cuadro modal manualmente. $('#identifier').modal('toggle');
Mostrar: .modal ('mostrar') Abra el cuadro modal manualmente. $('#identifier').modal('show');
Ocultar: .modal ('ocultar') Oculte manualmente el cuadro modal. $('#identifier').modal('hide');

Supongo que te gusta

Origin blog.51cto.com/15064873/2591049
Recomendado
Clasificación
Diario
Más
2024-04-30(33)
2024-04-29(5)
2024-04-28(9)
2024-04-27(28)
2024-04-26(22)
2024-04-25(34)
2024-04-24(31)
2024-04-23(29)
2024-04-22(5)
2024-04-21(0)

Code World

© 2018 codetd.com