1. Análisis de navegación (NAV)
Archivo del código fuente:
_navs.scss: módulo de navegación
Mixins/_nav-divider.scss: línea divisor
Mixins/_nav-verical-align.scss: alineación vertical
1. Está solo con CSS y no tiene dependencia de JS.
2. El módulo de navegación puede incluir un módulo desplegable
3. Realización de distribución horizontal, vertical, igual horizontal (implementación de células de mesa, extracción 4.0), pestañas, cápsulas y otros estilos
4. NAV-Divider: hay una altura de píxeles para realizar la línea de divisor
5. NAV-Stacked: implementación de alineación vertical
6. Proporciona la clase de contenido de pestaña para envolver pestañas, y luego el panel de pestaña se usa como área de contenido para la extensión de la página de pestaña
7. El menú desplegable debajo de las tablas de navegación se ha procesado para encoger un píxel hacia arriba, porque las tablas de navegación tendrán un resultado final y no encogerán un píxel hacia arriba, y habrá huecos en blanco.
// desplegable específico.nav-tabs .dropdown-menu {// Haga que el borde de depósito se superponga al margen del borde del borde: -1px; // Retire las esquinas redondeadas aquí, ya que hay un borde duro sobre el menú @include border-top-radius (0);}2. Efecto de colapso
Archivo del código fuente:
Mixins/_Component-Animations.SCSS: implementación de colapso para lograr el efecto plegable
JavaScripts/Bootstrap/Collapse.js: implementación del efecto de colapso
1. $ This.data () recopila todos los datos-* Datos
2. Propiedad principal: Especifica que el colapso actual está controlado por el padre, lo que realiza principalmente el efecto de un control y muchos. El siguiente es el código de ocultar todas las listas de niños bajo el mismo padre:
return $ (this.options.Parent) .find ('[data-toggle = "colapso"] [data-parent = "' + this.options.parent + '"]') .each ($. proxy (function (i, element) {var $ element = $ (element) this.addariaAndCollapsedClass (getTargetFromTrigger ($ element), $ Element)}.3. La implementación de Praent también requiere la integración de la clase .panel, porque al buscar, se cree que todos los sublistas están ubicados bajo la clase .panel.
4. Método de JQuery's End (): finalice la cadena de filtro actual y restaure el elemento coincidente establecido en su estado anterior (la posición donde comienza la cadena)
$ ("P"). Find ('. Bak'). Find ('Span'). End (): restaurar a $ ("P")
5. Scrollheight: la altura de la página (obtenga la altura/ancho real que se expande), contiene la parte invisible de la ventana, que se utiliza en colapso para identificar el valor máximo que se expandirá, y la altura/widht se borrará después de que se complete el movimiento.
var scrollSize = $ .camelcase (['scroll', dimension] .Join ('-')) this. $ element .one ('bstransitionend', $ .proxy (completo, this)) .emulateTransitionend (colapso.transition_duration) [dimension] (este. $ elemento [0] [scrollsize]))6. Los elementos de procesamiento se dividen en dos categorías: una es expandir u ocultar el elemento en sí mismo (elemento $), y el otro es tocar el botón para desarrollar u ocultar el elemento ($ disparador)
7. En el método Hiden, la altura del área plegada se volverá a dibujar, y luego se obtendrá la altura del área real:
this. $ elemento [dimensión] (this. $ elemento [dimensión] ()) [0] .Offsetheigh
8. El disparador del método Hiden se activa de forma predeterminada a través del juicio en el método de exposición:
if (actives && actives.length) {plugin.call (actives, 'ocultar') activesdata || actives.data ('bs.ocollapse', nulo)}Lo anterior se trata de este artículo, espero que sea útil para todos aprender la programación de JavaScript.