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 ajax执行后台方法
Mar 18 Javascript
基于jQuery的可以控制左右滚动及自动滚动效果的代码
Jul 25 Javascript
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
May 15 Javascript
Javascript 按位取反运算符 (~)
Feb 04 Javascript
使用js实现数据格式化
Dec 03 Javascript
AngularJs 国际化(I18n/L10n)详解
Sep 01 Javascript
利用jQuery实现打字机字幕效果实例代码
Sep 02 Javascript
浅谈javascript中的事件冒泡和事件捕获
Dec 28 Javascript
vue.js 上传图片实例代码
Jun 22 Javascript
JS实现简单的浮动碰撞效果示例
Dec 28 Javascript
解决vue select当前value没有更新到vue对象属性的问题
Aug 30 Javascript
微前端qiankun改造日渐庞大的项目教程
Jun 21 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程序的php代码
2008/04/07 PHP
php 获取当前访问的url文件名的方法小结
2010/02/08 PHP
php读取javascript设置的cookies的代码
2010/04/12 PHP
如何利用PHP执行.SQL文件
2013/07/05 PHP
ThinkPHP3.1新特性之对页面压缩输出的支持
2014/06/19 PHP
PHP实现Markdown文章上传到七牛图床的实例内容
2020/02/11 PHP
Jquery 获得服务器控件值的方法小结
2010/05/11 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
2013/05/07 Javascript
使用jquery 简单实现下拉菜单
2015/01/14 Javascript
jQuery自定义添加&quot;$&quot;与解决&quot;$&quot;冲突的方法
2015/01/19 Javascript
JavaScript、jQuery与Ajax的关系
2016/01/24 Javascript
js实现精确到毫秒的倒计时效果
2016/08/05 Javascript
jQuery查找节点并获取节点属性的方法
2016/09/09 Javascript
jQuery监听文件上传实现进度条效果的方法
2016/10/16 Javascript
javascript动画系列之模拟滚动条
2016/12/13 Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
2019/04/20 Javascript
vue 表单之通过v-model绑定单选按钮radio
2019/05/13 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
2020/06/05 Javascript
vue使用lodop打印控件实现浏览器兼容打印的方法
2021/02/07 Vue.js
python基础教程之基本内置数据类型介绍
2014/02/20 Python
pycharm 使用心得(六)进行简单的数据库管理
2014/06/06 Python
python 实现删除文件或文件夹实例详解
2016/12/04 Python
Python基于动态规划算法解决01背包问题实例
2017/12/06 Python
Python初学者需要注意的事项小结(python2与python3)
2018/09/26 Python
pytorch 实现tensor与numpy数组转换
2019/12/27 Python
Python3加密解密库Crypto的RSA加解密和签名/验签实现方法实例
2020/02/11 Python
详解Windows下PyCharm安装Numpy包及无法安装问题解决方案
2020/06/18 Python
python下载的库包存放路径
2020/07/27 Python
娇韵诗法国官网:Clarins法国
2019/01/29 全球购物
Simons官方网站:加拿大时尚零售商
2020/02/20 全球购物
C/C++程序员常见面试题二
2015/11/19 面试题
大学生职业规划前言模板
2013/12/27 职场文书
大龄毕业生求职别忘职业规划
2014/03/11 职场文书
捐款通知怎么写
2015/04/24 职场文书
python opencv检测直线 cv2.HoughLinesP的实现
2021/06/18 Python
windows11怎么查看wifi密码? win11查看wifi密码的技巧
2021/11/21 数码科技