BootStrap 图片样式、辅助类样式和CSS组件的实例详解

首先把模板代码上上来:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" />
  <!--判断IE9 用来支持HTML5
  html5shiv.min.js-没有那个元素,就创建那个元素
  respond.min.js支持响应式布局的
  -->
  <!--[if lt IE 9]>
  <script src="js/html5shiv.min.js"></script>
  <script src="js/respond.min.js"></script>
  <![endif]-->
  <title>BootStrap基础入门</title>
 </head>
 <body style="background-color: #CCCCCC;">
  <div class="container" style="background-color: #FFFFFF;">
  </div>
  <script type="text/javascript" src="js/jquery.slim.min.js"></script>
  <script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
 </body>
</html>

图片样式

.img-responsive:直接为图片添加该样式,可以实现响应式图片。

.center-block:图片居中样式,而不能使用text-center样式。

图片形状样式:.img-rounded(圆角图片)、.img-circle(圆形图片)、.img-thumbnail(边框圆角)

<h2 class="page-header">图片样式应用</h2>
   <div>
    <img class="img-responsive img-thumbnail center-block" src="img/011.jpg" />
    <p>文字文字文字文字文字文字文字文字文字文字文字文字</p>
   </div>

BootStrap 图片样式、辅助类样式和CSS组件的实例详解

辅助类样式

文本颜色类:.text-muted(柔和的)、.text-primary、.text-success、.text-info、.text-warning、.text-danger

背景颜色类:.bg-primary、.bg-success、.bg-info、.bg-warning、.bg-danger

三角符号:

快速浮动类:.pull-left(左浮动)、.pull-right(右浮动)

清除浮动:为父元素添加 .clearfix 可以清除浮动。

让内容块网页居中:

 <h2 class="page-header">清除浮动的应用</h2>
   <div class="clearfix" style="border: 1px solid red;width: 340px;">
    <ul class="list-unstyled">
     <li class="pull-left" style="padding: 10px;">
      <div class="text-center">
       <a href=""><img src="img/001.png" /></a><br />
       <a href="">文字1</a>
       <span class="caret"></span>
      </div>
     </li>
     <li class="pull-left" style="padding: 10px;">
      <div class="text-center">
       <a href=""><img src="img/002.png" /></a><br />
       <a href="">文字2</a>
      </div>
     </li>
     <li class="pull-left" style="padding: 10px;">
      <div class="text-center">
       <a href=""><img src="img/003.png" /></a><br />
       <a href="">文字3</a>
      </div>
     </li>
     <li class="pull-left" style="padding: 10px;">
      <div class="text-center">
       <a href=""><img src="img/004.png" /></a><br />
       <a href="">文字4</a>
      </div>
     </li>
    </ul>
   </div>

BootStrap 图片样式、辅助类样式和CSS组件的实例详解

CSS组件

下拉菜单

.dropdown将下拉菜单触发器和下拉菜单包含在其中(下拉菜单父元素)。

data-toggle属性:下拉菜单触发器。取值为“dropdown”。

.dropdown-menu:给<ul>指定下拉菜单的样式。

.dropup:向上弹出的下拉菜单(下拉菜单父元素)。

下拉菜单对齐方式:.dropdown-menu-left和.dropdown-menu-right

.divider:为下拉菜单添加分隔线,用于将多个链接分组。

.disabled:禁用的菜单项。

 <h2 class="page-header">下拉菜单的应用</h2>
   <div class="dropdown">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
     Java课
     <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
     <li>
      <a href="">HTML</a>
     </li>
     <li>
      <a href="">CSS</a>
     </li>
     <li>
      <a href="">Java</a>
     </li>
     <li class="divider"></li>
     <li>
      <a href="">Maven</a>
     </li>
     <li>
      <a href="">MySQL</a>
     </li>
     <li>
      <a href="">Spring</a>
     </li>
    </ul>
   </div>

BootStrap 图片样式、辅助类样式和CSS组件的实例详解

按钮组

.btn-group:按钮组(可以实现将一组按钮放在同一行)。

.btn-toolbar:按钮组工具栏(将多个按钮组放在其中)。

按钮组的尺寸:.btn-group-lg、.btn-group-sm、.btn-group-xs

.btn-group-vertical:垂直排列的按钮组。

<h2 class="page-header">按钮组的应用</h2>
   <div class="btn-toolbar">
    <div class="btn-group btn-group-lg ">
     <button type="button" class="btn btn-default">按钮一</button>
     <button type="button" class="btn btn-default">按钮二</button>
     <button type="button" class="btn btn-default">按钮三</button>
     <button type="button" class="btn btn-default">按钮四</button>
     <button type="button" class="btn btn-default">按钮五</button>
    </div>
    <div class="btn-group">
     <button type="button" class="btn btn-danger">按钮一</button>
     <button type="button" class="btn btn-danger">按钮二</button>
    </div>
    <div class="btn-group btn-group-sm">
     <button type="button" class="btn btn-primary">按钮一</button>
     <button type="button" class="btn btn-primary">按钮二</button>
    </div>
    <div class="btn-group btn-group-xs btn-group-vertical">
     <button type="button" class="btn btn-success">按钮一</button>
     <button type="button" class="btn btn-success">按钮二</button>
     <button type="button" class="btn btn-success">按钮三</button>
    </div>
   </div>

BootStrap 图片样式、辅助类样式和CSS组件的实例详解

按钮式下拉菜单

<h2 class="page-header">按钮式下拉菜单的应用</h2>
   <div class="btn-group dropup">
    <button type="button" class="btn btn-danger" data-toggle="dropdown">
     按钮
     <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" style="overflow: auto;height: 100px;">
     <li>
      <a href="">按钮</a>
     </li>
     <li>
      <a href="">按钮</a>
     </li>
     <li>
      <a href="">按钮</a>
     </li>
     <li class="divider"></li>
     <li>
      <a href="">按钮</a>
     </li>
     <li>
      <a href="">按钮</a>
     </li>
     <li>
      <a href="">按钮</a>
     </li>
     <li>
      <a href="">按钮1</a>
     </li>
     <li>
      <a href="">按钮1</a>
     </li>
     <li>
      <a href="">按钮3</a>
     </li>
     <li>
      <a href="">按钮2</a>
     </li>
    </ul>
    <button type="button" class="btn btn-danger">
     按钮
    </button>
   </div>
   <div class="btn-group dropup">
    <button type="button" class="btn btn-default">
     按钮
    </button>
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
     <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
     <li>
      <a href="">按钮</a>
     </li>
     <li>
      <a href="">按钮</a>
     </li>
     <li>
      <a href="">按钮</a>
     </li>
     <li class="divider"></li>
     <li>
      <a href="">按钮</a>
     </li>
    </ul>
   </div>

BootStrap 图片样式、辅助类样式和CSS组件的实例详解

在这里呢,如果我们下拉菜单很多,就可以用滚动条来解决!

用overflow: auto;,然后定义一个高度就好。

输入框组

.input-group:只能用于文本框<input>,不能用于<select>和<textarea>。

.input-group-addon用于在<input>前后添加额外元素,赋给一个<span>元素即可。

注意:将.input-group-addon和<input>元素包在.input-group之中。

.input-group-lg 和 .input-group-sm 可以改变输入框组的尺寸。

.input-group-btn可以作为额外元素的按钮,应该是作为<button>的父元素。

<h2 class="page-header">输入框组的应用</h2>
   <div class="input-group">
    <span class="input-group-addon">$</span>
    <input type="text" class="form-control" placeholder="username" />
    <span class="input-group-addon">.00</span>
   </div>
   <div class="input-group">
    <span class="input-group-btn">
     <button class="btn btn-default">Go!</button>
    </span>
    <input type="text" class="form-control" placeholder="username" />
   </div>
   <div class="input-group">
    <div class="input-group-btn">
     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
     <ul class="dropdown-menu" role="menu">
      <li>
       <a href="#">Action</a>
      </li>
      <li>
       <a href="#">Another action</a>
      </li>
      <li>
       <a href="#">Something else here</a>
      </li>
      <li class="divider"></li>
      <li>
       <a href="#">Separated link</a>
      </li>
     </ul>
    </div>
    <!-- /btn-group -->
    <input type="text" class="form-control">
   </div>
   <!-- /input-group -->
   <div class="input-group">
    <div class="input-group-btn">
     <button type="button" class="btn btn-default">
     按钮
    </button>
     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
     <span class="caret"></span>
    </button>
     <ul class="dropdown-menu">
      <li>
       <a href="">按钮</a>
      </li>
      <li>
       <a href="">按钮</a>
      </li>
      <li>
       <a href="">按钮</a>
      </li>
      <li class="divider"></li>
      <li>
       <a href="">按钮</a>
      </li>
     </ul>
    </div>
    <input type="text" class="form-control">
   </div>

BootStrap 图片样式、辅助类样式和CSS组件的实例详解

标签页(选项卡)

.nav是标签页的基类

.nav-tabs是标签页类样式

.active是标签页的状态类(当前样式)

.nav-pills胶囊式标签页

.nav-stacked胶囊式标签页堆放排列(垂直排列)

 <h2 class="page-header">选项卡效果</h2>
   <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active">
     <a href="#">Home</a>
    </li>
    <li role="presentation">
     <a href="#">Profile</a>
    </li>
    <li role="presentation">
     <a href="#">Messages</a>
    </li>
   </ul>
   <ul class="nav nav-pills" role="tablist">
    <li role="presentation" class="active">
     <a href="#">Home</a>
    </li>
    <li role="presentation">
     <a href="#">Profile</a>
    </li>
    <li role="presentation">
     <a href="#">Messages</a>
    </li>
   </ul>

BootStrap 图片样式、辅助类样式和CSS组件的实例详解

路径导航

.breadcrumb:赋给

可以实现面包屑效果。

.active赋给当前栏目,当前栏目不加链接。

 <h2 class="page-header">路径导航效果</h2>
   <ol class="breadcrumb">
    <li>
     <a href="#">Home</a>
    </li>
    <li>
     <a href="#">Library</a>
    </li>
    <li class="active">Data</li>
   </ol>

BootStrap 图片样式、辅助类样式和CSS组件的实例详解

分页

.pagination赋给

元素可以实现分页效果

« 上一页

» 下一页

.disabled禁用状态

.active激活状态

.pagination-lg分页大尺寸

.pagination-sm分页小尺寸

.pager可以实现翻页效果。上一页、下一页效果。

 <div class="text-center" style="border: 1px solid red;">
    <ul class="pagination pagination-lg pager">
     <li class="previous">
      <a href="#">← 上一页</a>
     </li>
     <li class="disabled">
      <a href="">«</a>
     </li>
     <li class="active">
      <a href="">1</a>
     </li>
     <li>
      <a href="">2</a>
     </li>
     <li>
      <a href="">3</a>
     </li>
     <li>
      <a href="">4</a>
     </li>
     <li>
      <a href="">5</a>
     </li>
     <li>
      <a href="">6</a>
     </li>
     <li>
      <a href="">7</a>
     </li>
     <li>
      <a href="">8</a>
     </li>
     <li>
      <a href="">9</a>
     </li>
     <li>
      <a href="">10</a>
     </li>
     <li>
      <a href="">»</a>
     </li>
     <li class="next">
      <a href="#">下一页 →</a>
     </li>
    </ul>
   </div>
   <div class="text-center" style="border: 1px solid red;">
    <ul class="pagination pagination-lg">
     <li>
      <a href="">«</a>
     </li>
     <li class="active">
      <a href="">1</a>
     </li>
     <li>
      <a href="">2</a>
     </li>
     <li>
      <a href="">3</a>
     </li>
     <li>
      <a href="">4</a>
     </li>
     <li>
      <a href="">5</a>
     </li>
     <li>
      <a href="">6</a>
     </li>
     <li>
      <a href="">7</a>
     </li>
     <li>
      <a href="">8</a>
     </li>
     <li>
      <a href="">9</a>
     </li>
     <li>
      <a href="">10</a>
     </li>
     <li>
      <a href="">»</a>
     </li>
    </ul>
   </div>

BootStrap 图片样式、辅助类样式和CSS组件的实例详解

缩略图

.thumbnail赋给<a>元素,可以实现缩略图样式。

.caption 可以实现缩略图标题及描述

 <h2 class="page-header">缩略图效果</h2>
   <div class="row">
    <div class="col-md-2">
     <a href="" class="thumbnail"><img src="img/001.png" /></a>
     <div class="caption">
      <h4>图片一</h4>
     </div>
    </div>
    <div class="col-md-4">
     <a href="" class="thumbnail"><img src="img/001.png" /></a>
     <div class="caption">
      <h4>图片一</h4>
     </div>
    </div>
    <div class="col-md-6">
     <a href="" class="thumbnail"><img src="img/001.png" /></a>
     <div class="caption">
      <h4>图片一</h4>
     </div>
    </div>
   </div>

BootStrap 图片样式、辅助类样式和CSS组件的实例详解

导航栏

导航栏有一个不同,他不是写在Container包含层里面了,而是那个div的上面!

.navbar:导航栏的基类,用于<nav>元素。
.navbar-default:导航栏默认样式,用于<nav>元素。
.container是<nav>的子元素。导航栏内容都放入其中。
.navbar-header:导航栏头部样式。
.navbar-brand:设置品牌图标样式
.collapse是折叠导航栏的样式的基类。
.navbar-collapse是折叠导航栏样式。
.nav是导航栏的链接基类。
.navbar-nav是导航栏的链接样式。
.navbar-from:导航栏表单,可以使表单元素排在同一行。
.navbar-left 或 .navbar-right :组件排列。导航链接、表单、按钮或文本对齐。
.navbar-btn:对于不在<form>中的<button>元素,实现垂直对齐。
.navbar-text:对于导航栏的普通文本有了行距和颜色,通常用于<p>元素。
.navbar-fixed-top:导航栏固定在顶部,用于<nav>元素。需要为<body>设置padding-top:70px
.navbar-fixed-bottom:导航栏固定在底部,用于<nav>元素。需要为<body>设置padding-bottom:70px;
.navbar-static-top:导航栏静止在顶部,用于<nav>元素。会随着滚动条移动而消失。
.navbar-inverse:可以实现反色导航栏,用于<nav>元素。

<nav class="navbar navbar-default navbar-static-top">
   <!--导航栏头部信息-->
   <div class="container">
    <!--品牌信息-->
    <div class="navbar-header">
     <a class="navbar-brand" href="">Brand</a>
     <p class="navbar-text">欢迎光临</p>
    </div>
    <!--导航栏主链接-->
    <div class="collapse navbar-collapse">
     <ul class="nav navbar-nav navbar-left">
      <li class="active">
       <a href="">起步</a>
      </li>
      <li>
       <a href="">CSS全局样式</a>
      </li>
      <li>
       <a href="">组件</a>
      </li>
      <li>
       <a href="">插件</a>
      </li>
      <li>
       <a href="">网站案例</a>
      </li>
     </ul>
     <!--表单 搜索框-->
     <form class="navbar-form navbar-left">
      <div class="form-group">
       <input type="text" class="form-control" placeholder="搜索">
      </div>
      <button type="submit" class="btn btn-default">搜索</button>
     </form>
     <ul class="nav navbar-nav navbar-right">
      <li>
       <a href="">Link</a>
      </li>
      <li class="dropdown">
       <a href="" class="dropdown-toggle" data-toggle="dropdown">
        Dropdown
        <span class="caret"></span>
       </a>
       <ul class="dropdown-menu">
        <li>
         <a href="#">Action</a>
        </li>
        <li>
         <a href="#">Another action</a>
        </li>
        <li>
         <a href="#">Something else here</a>
        </li>
        <li class="divider"></li>
        <li>
         <a href="#">Separated link</a>
        </li>
       </ul>
      </li>
     </ul>
    </div>
   </div>
  </nav>
  <div class="container" style="background-color: #FFFFFF;">
  ...
  </div>

BootStrap 图片样式、辅助类样式和CSS组件的实例详解

好了,然后直接上完整的源码:

完整的源码链接:

https://github.com/chenhaoxiang/BootStrap/tree/master/day3

像学后台的,把这个BootStrap学到这里,然后能灵活应用基本就差不多啦~~~如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

时间: 2017-01-19

详解Bootstrap四种图片样式

在本章中,我们将学习 Bootstrap 对图片的支持.Bootstrap 提供了四个可对图片应用简单样式的class,分别是: img-rounded 添加 border-radius:6px 来获得图片圆角 img-circle 添加 border-radius:50% 来让整个图片变成圆形 img-thumbnail 添加一些内边距(padding)和一个灰色的边框 img-responsive 图片响应式 1.img-rounded <!doctype html> <html l

Bootstrap中CSS的使用方法

Bootstrap 使用了一些 HTML5 元素和 CSS 属性,所以需要使用 HTML5 文档类型. <!DOCTYPE html> <html lang="zh-CN"> ... </html> 为了让 Bootstrap 开发的网站对移动设备友好,确保适当的绘制和触屏缩放,需要在网页的 head 之中添加 viewport meta 标签,如下所示: <meta name="viewport" content=&quo

Bootstrap轮播加上css3动画,炫酷到底!

很多时候,如果你的项目需要的是一个轻量级的轮播,不需要很多的功能.同时你的项目是采用Bootstrap,(一个最流行的开源前端框架)的话.你可以参考一下bootstrap官方组件. 介绍Animate.css 为了让我自己写的动画效果值得称赞,我用一个非常有名的开源的CSS3动画库,被形象的称为animate.css. Dan Eden写的. 这是让我能专注于手头的任务,而不是解释CSS3动画的代码. 用Animate.css 需要2个步骤: 在html文档中引入animate.min.css.

BootStrap文件上传样式超好看【持续更新】

 一 直接使用bootstrap,利用简单的js控制 http://duckranger.com/2012/06/pretty-file-input-field-in-bootstrap/ 非常简单,代码如下: <input id="lefile" type="file" style="display:none"> <div class="input-append"> <input id=&quo

Bootstrap3制作搜索框样式的方法

Bootstrap3中的很多样式,都是需要我们进行摸索着学习的,在制作类似百度的素搜索框时,一开始会不知道怎么做,其实很简单,利用内联图标方式就可以实现 <div class="input-group"> <input type="text" class="form-control input-lg"><span class="input-group-addon btn btn-primary"&

bootstrap下拉列表与输入框组结合的样式调整

输入框组默认是div.input-group 已知可在input表单元素前后加入两类元素[分别是文本和按钮]如下所示: div.input-group-addon{文字或符号} input.form-control div.input-group-btn 其中按钮还可嵌套下拉菜单(包括分裂式下拉菜单) 一.基本用法如下: <div class="input-group"> <span class="input-group-addon">@&l

Bootstrap学习笔记之css组件(3)

今天我们来看看css组件效果以及其中比较重要的类,这些类都不难,关键要熟练掌握,搭配使用,灵活运用.关于前两篇中,css样式和布局的文章,大家可以在之前的文章中阅读.  一.导航组件 自己做了个导航,目前只有一级菜单,下一篇文章中,将给出二级菜单,涉及到js的插件,所以这里不在描述. <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> &l

Bootstrap自定义文件上传下载样式

在平时工作中,文件上传下载功能属于不可或缺的一部分.bootstrap前端样式框架也使用的比较多,现在根据bootstrap强大的样式模板,自定义一种文件下载的样式. 后续会使用spring MVC框架实现文件上传的全部代码,敬请期待. 先看图片示例: 本示例包括下载样本文件样式和上传文件样式. 直接先上代码,最后讲解: <div class="form-group col-md-12 has-feedback" id="file"> <label

基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解

表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验.网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的个性化的需求,使得我们用这些插件的默认机制并不能完成这些功能,所以要根据自己的需要去改造它们(毕竟自己还不到那个写一个完美的校验框架的层次).我用过formValidation这个校验框架,虽然它跟bootstrap配合地很好,但是校验风格太死板,不太满足个性化的场景:后来我找到了jquery.val

第七篇Bootstrap表单布局实例代码详解(三种表单布局)

Bootstrap提供了三种表单布局:垂直表单,内联表单和水平表单.下面逐一给大家介绍,有兴趣的朋友一起学习吧. 创建垂直或基本表单: •·向父 <form> 元素添加 role="form". •·把标签和控件放在一个带有 class .form-group 的 <div> 中.这是获取最佳间距所必需的. •·向所有的文本元素 <input>.<textarea> 和 <select> 添加 class .form-cont

jQuery表单插件ajaxForm实例详解

前端时间写项目用到了ajaxForm这个插件,可以用它提交表单和上传图片,听起来和正常的form表单提交没什么区别,只不过是ajax提交,无需刷新页面,如此可以增加用户体验度. 引入两个文件,PS:必须 <script type="text/javascript" src="http://img9.tongzhuo100.com/js/jquery-1.7.2.min.js"></script> <script type="t

jquery.validate表单验证插件使用详解

今天我们来说一下表单验证,有人说我们在进行表单验证的时候使用正则来验证是非常麻烦的,现在我来给大家介绍一下表单验证的插件:jquery.validate.min.js 它是与jquery一起结合用来使用的,使用它是非常方便,只需写校验规则和错误字段即可. 我们常见的校验规则有以下几种: (1)required:true               必输字段 (2)email:true                  必须输入正确格式的电子邮件 (3)date:true             

Bootstrap所支持的表单控件实例详解

Bootstrap所支持的表单控件如下所示: Bootstrap 支持最常见的表单控件,主要是 input.textarea.checkbox.radio 和 select. 输入框(Input) 最常见的表单文本字段是输入框 input.用户可以在其中输入大多数必要的表单数据.Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持,包括:text.password.datetime.datetime-local.date.month.time.week.number.e

jQuery.Validate表单验证插件的使用示例详解

jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求. 请在这里查看示例 validate示例 示例包含 验证错误时,显示红色错误提示 自定义验证规则 引入中文错误提示 重置表单需要执行2句话 源码示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

jQuery Validate表单验证插件的基本使用方法及功能拓展

1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示            2.鼠标离开表单项时,开始校验元素             3.鼠标离开后的正确.错误提示及鼠标移入时的帮助提醒 对于初学者而言,html表单验证是一项极其琐碎的事情.要做好表单验证,需要准备以下基本要素: 1.html表单结构:包含需要校验的表单元素: 2.js逻辑控制:在需要校验的表单元素上绑定事件,如点击.获取焦点.失去焦点等事件,并设置这些事件对应的执行函数:

基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)

效果图如下所示: 实现代码如下: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="

jQuery validate+artdialog+jquery form实现弹出表单思路详解

功能描述: 在页面弹出一个form表单,ajax无刷新提交表单,表单需通过验证. 适用范围: 适用于在列表页面新增,修改记录. 需要加载的js文件: jquery.min.js artDialog.js iframeTools.js jquery.form.js jquery.validate.js 实现思路: 在页面中将表单放到一个隐藏的容器中,用artdialog弹出该form并对form加上jqueryvalidate验证,提交采用jqueryform ajax提交,由于都是用现成的插件写

Vue和Bootstrap的整合思路详解

ldlood同学推荐 element ui(饿了么基于vue出品)也不错, github地址:https://github.com/ElemeFE/element. 大家也可以关注一下 我是一个刚刚接触前端开发的新手,所以有必要记录如何将Bootstrap和Vue进行整合. 如果你是老手,请直接绕道而过.作为一个新手,里面的步骤,过程或者专业术语未必正确,如果你发现哪里错误了,请发邮件至ztao8607@gmail.com Vue官方不建议新手直接使用vue-cli,但我不这么看. 先使用cli