bootstrap的常用组件和栅格式布局详解
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。 因为Bootstrap需要jquery的支持,所以在使用Bootstrap之前要先把jquery插件导入,并且要把bootstrap.js文件放在jquery.js之后改动方可生效。 Bootstrap中有许多好用的组件,只要以规定的class等命名就可以轻松使用这些插件。例如: 导航条: <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 以上述的格式写出需要的代码就可以获得以下样式的导航条: 注:在上述代码中form表单即serch和submit部位,带有class="dropdown"的就是下拉菜单的区域,class="dropdown-menu"的就是下拉菜单的内容区,这些部分并非主要内容,可以删除。通过class="navbar-right/left/"可以设置该部位的导航条在总区域的左侧还是右侧。 栅格系统:栅格系统是bootstrap中最为重要的部分,它通过 这样的形式来实现网页布局,只要调节class="col-md-6"就可以轻松改变单元格区域的排布, 如图: 注: 如上表:由于bootstrap是移动优先的,所以在判定时先从小屏开始,如col-xs-6指的是从width=768开始直到最大都是占6个单位的空间。 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- 为vuejs应用程序构建Docker
- 将Vim中的行删除并重定向到另一个文件
- angularjs – 文本输入框不接受来自Angular UI Bootstrap的
- 如何使用AngularJS指定optionLabelTemplate Kendo UI DropD
- 使用AngularJS和Django REST Framework进行Facebook验证
- bootstrap导航条、分页导航学习笔记6-3(为导航条添加标题、
- docker namespaces
- 如何在本地编译Fabric Code
- scala – 为什么这个擦除警告与成员变量声明为一个元组?
- Angularjs:将数据存储到一个工厂调用的变量中,以便在另一个