编程 Javascript

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个单位的空间。

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

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

- Author -

吴建锐

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery避免$符和其他JS库冲突的方法对比

Feb 20 Javascript

炫酷的js手风琴效果

Oct 13 Javascript

js图片轮播手动切换特效

Jan 12 Javascript

Bootstrap超大屏幕的实现代码

Mar 22 Javascript

微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】

Dec 09 Javascript

解决angularjs中同步执行http请求的方法

Aug 13 Javascript

简单了解node npm cnpm的具体使用方法

Feb 27 Javascript

JavaScript 作用域实例分析

Oct 02 Javascript

详解如何在Javascript和Sass之间共享变量

Nov 13 Javascript

详解webpack-dev-middleware 源码解读

Mar 23 Javascript

vue之封装多个组件调用同一接口的案例

Aug 11 Javascript

Vue 电商后台管理项目阶段性总结(推荐)

Aug 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