bootstrap的常用组件和栅格式布局详解


Posted in Javascript onMay 02, 2017

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。

因为Bootstrap需要jquery的支持,所以在使用Bootstrap之前要先把jquery插件导入,并且要把bootstrap.js文件放在jquery.js之后改动方可生效。

Bootstrap中有许多好用的组件,只要以规定的class等命名就可以轻松使用这些插件。例如:

导航条:

<nav class="navbar navbar-default">
 <div class="container-fluid">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
   <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
   </button>
   <a class="navbar-brand" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Brand</a>
  </div>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
   <ul class="nav navbar-nav">
    <li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Link <span class="sr-only">(current)</span></a></li>
    <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Link</a></li>
    <li class="dropdown">
     <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
     <ul class="dropdown-menu">
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Action</a></li>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Another action</a></li>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Something else here</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Separated link</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >One more separated link</a></li>
     </ul>
    </li>
   </ul>
   <form class="navbar-form navbar-left">
    <div class="form-group">
     <input type="text" class="form-control" placeholder="Search">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
   </form>
   <ul class="nav navbar-nav navbar-right">
    <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Link</a></li>
    <li class="dropdown">
     <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
     <ul class="dropdown-menu">
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Action</a></li>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Another action</a></li>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Something else here</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Separated link</a></li>
     </ul>
    </li>
   </ul>
  </div><!-- /.navbar-collapse -->
 </div><!-- /.container-fluid -->
</nav>

以上述的格式写出需要的代码就可以获得以下样式的导航条:

bootstrap的常用组件和栅格式布局详解

注:在上述代码中form表单即serch和submit部位,带有class="dropdown"的就是下拉菜单的区域,class="dropdown-menu"的就是下拉菜单的内容区,这些部分并非主要内容,可以删除。通过class="navbar-right/left/"可以设置该部位的导航条在总区域的左侧还是右侧。

栅格系统:

栅格系统是bootstrap中最为重要的部分,它通过

<div class="row">
 <div class="col-md-1">.col-md-1</div>
 <div class="col-md-1">.col-md-1</div>
 <div class="col-md-1">.col-md-1</div>
 <div class="col-md-1">.col-md-1</div>
 <div class="col-md-1">.col-md-1</div>
 <div class="col-md-1">.col-md-1</div>
 <div class="col-md-1">.col-md-1</div>
 <div class="col-md-1">.col-md-1</div>
 <div class="col-md-1">.col-md-1</div>
 <div class="col-md-1">.col-md-1</div>
 <div class="col-md-1">.col-md-1</div>
 <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
 <div class="col-md-8">.col-md-8</div>
 <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
 <div class="col-md-4">.col-md-4</div>
 <div class="col-md-4">.col-md-4</div>
 <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
 <div class="col-md-6">.col-md-6</div>
 <div class="col-md-6">.col-md-6</div>
</div>

这样的形式来实现网页布局,只要调节class="col-md-6"就可以轻松改变单元格区域的排布,

如图:

bootstrap的常用组件和栅格式布局详解

注:

bootstrap的常用组件和栅格式布局详解

如上表:由于bootstrap是移动优先的,所以在判定时先从小屏开始,如col-xs-6指的是从width=768开始直到最大都是占6个单位的空间。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 位置插件
Dec 25 Javascript
11款基于Javascript的文件管理器
Oct 25 Javascript
jQuery 表单验证扩展(三)
Oct 20 Javascript
js控制的回到页面顶端goTop的代码实现
Mar 20 Javascript
js实现屏幕自适应局部代码分享
Jan 30 Javascript
多个jQuery版本共存的处理方案
Mar 17 Javascript
JS查找英文文章中出现频率最高的单词
Mar 20 Javascript
angular实现IM聊天图片发送实例
May 08 Javascript
JavaScript中一些特殊的字符运算
Aug 17 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
Oct 25 Javascript
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 jQuery
vue页面跳转实现页面缓存操作
Jul 22 Javascript
Vuejs实现带样式的单文件组件新方法
May 02 #Javascript
基于bootstrap实现bootstrap中文网巨幕效果
May 02 #Javascript
老生常谈js-react组件生命周期
May 02 #Javascript
js 用于检测类数组对象的函数方法
May 02 #Javascript
使用Bootstrap打造特色进度条效果
May 02 #Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
May 02 #Javascript
js实现字符全排列算法的简单方法
May 01 #Javascript
You might like
一个PHP的QRcode类与大家分享
2011/11/13 PHP
mysql数据库差异比较的PHP代码
2012/02/05 PHP
PHP 获取文件路径(灵活应用__FILE__)
2013/02/15 PHP
ThinkPHP模板判断输出Defined标签用法详解
2014/06/30 PHP
PHP使用SOAP调用API操作示例
2018/12/25 PHP
php服务器的系统详解
2019/10/12 PHP
PHP连接MySQL数据库操作代码实例解析
2020/07/11 PHP
js单例模式的两种方案
2013/10/22 Javascript
文本框文本自动补全效果示例分享
2014/01/19 Javascript
页面加载完后自动执行一个方法的js代码
2014/09/06 Javascript
jquery ajax 如何向jsp提交表单数据
2015/08/23 Javascript
vue实现添加标签demo示例代码
2017/01/21 Javascript
如何在Angular2中使用jQuery及其插件的方法
2017/02/09 Javascript
基于JQuery及AJAX实现名人名言随机生成器
2017/02/10 Javascript
前端开发之CSS原理详解
2017/03/11 Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
2018/12/28 Javascript
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
2019/07/06 Javascript
微信小程序swiper使用网络图片不显示问题解决
2019/12/13 Javascript
javascript设计模式之装饰者模式
2020/01/30 Javascript
[05:01]3.19DOTA2发布会 我们都是刀塔人
2014/03/25 DOTA
[01:12]DOTA2 2015年秋季互动指南
2015/11/10 DOTA
浅谈Python NLP入门教程
2017/12/25 Python
Python实现的KMeans聚类算法实例分析
2018/12/29 Python
Python中函数的基本定义与调用及内置函数详解
2019/05/13 Python
Python 使用threading+Queue实现线程池示例
2019/12/21 Python
Python龙贝格法求积分实例
2020/02/29 Python
ECCO爱步官方旗舰店:丹麦鞋履品牌
2018/01/02 全球购物
JSF面试题:Jsf中导航的标签是什么
2013/04/20 面试题
中文系师范生自荐信
2013/10/01 职场文书
大学生作弊检讨书
2014/02/19 职场文书
学位证书委托书
2014/09/30 职场文书
先进个人材料怎么写
2014/12/30 职场文书
故宫的导游词
2015/01/31 职场文书
python自动化测试之Selenium详解
2022/03/13 Python
实现GO语言对数组切片去重
2022/04/20 Golang
MySQL 数据库范式化设计理论
2022/04/22 MySQL