Javascript Bootstrap的网格系统,导航栏和轮播详解

bootstrap简介及其相关内容

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。引用其时需要具备一定的基本模板:

    
    
    
    
    Bootstrap 101 Template
    
    
    
    
    

网格系统

bootstrap将页面或容器化氛围横向的12等份,行必须放置在 .container class 内,以便获得适当的对齐(alignment)和内边距(padding)。利用col-lg-(“number”)对横向的12等份进行分配。

1
2
3
4

Javascript Bootstrap的网格系统,导航栏和轮播详解_第1张图片

列嵌套

a
b

列偏移

使用.col-md-offset-*可以将列向右偏移

坐厕
右侧

列排序

一般用于盒子调换顺序

 
坐厕
右侧

Javascript Bootstrap的网格系统,导航栏和轮播详解_第2张图片

导航栏

演示如下:

全局界面

Javascript Bootstrap的网格系统,导航栏和轮播详解_第3张图片

小窗界面

Javascript Bootstrap的网格系统,导航栏和轮播详解_第4张图片

轮播

Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式。除此之外,内容也是足够灵活的,可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。

实例演示:

Javascript Bootstrap的网格系统,导航栏和轮播详解_第5张图片

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!

你可能感兴趣的