前端框架bootstrap,制作美丽的照片画廊

主页面代码(发现Bootstrap官网上手风琴的实例样式有问题,在这里依然使用3.0.~版本)

  在本教程中,我们将创建一个很好看的照片画廊效果。我们的想法是,以显示专辑作为一个滑块,而当这张专辑被选中,我们将使用一个美丽的照片堆栈展示专辑的图像。在照片堆栈视图,我们可以通过将最上面的图像移动到所有照片后面的方式浏览。

表单:

<!DOCTYPE html>  <html ng-app="ct">  <head lang="en">      <meta charset="UTF-8">      <title></title>      <link rel="stylesheet" href="bootstrap-3.3.4-dist/css/bootstrap.css"/>      <link rel="stylesheet" href="bootstrap-3.3.4-dist/css/bootstrap-r.css"/>  </head>  <body>  <hr>  <div class="container" ng-controller="c1">      <kittencup-group>          <kittencup-collapse ng-repeat="collapse in Data" head="collapse.a">                        </kittencup-collapse>      </kittencup-group>  </div>  </body>  <script src="../angular.js"></script>  <script>      var app = angular.module("ct",[]);      app.factory("Data",function(){           return [               {                   a:"错你妹啊",                   b:"contents1"               },               {                   a:"title2",                   b:"contents2"               }           ]       });      app.controller("c1",['$scope','Data', function($scope,Data){          //由ctrl拿到数据加载给view          $scope.Data = Data;      }]);      app.directive('kittencupGroup', function(){           return {               restrict:"EA",               transclude:true,               replace:true,               template:"<div  ng-transclude></div>",               controller:function(){                   this.collapseGroup = [];                   this.otherClose = function(currCollaps){                       angular.forEach(this.collapseGroup, function(collaps){                           if(collaps !== currCollaps){                               collaps.isOpen = true;                           }                       });                   }               }           }      });      app.directive('kittencupCollapse', function(){          return {              restrict:"EA",              require:"^kittencupGroup",              replace:true,              templateUrl:"templates/contents.html",              transclude:true,              scope:{                  head:"="              },              link: function(scope, elements, attrs, superCtrl){                  scope.isOpen = true;                  scope.open = function(){                      scope.isOpen = !scope.isOpen;                      superCtrl.otherClose(scope);                  };                  superCtrl.collapseGroup.push(scope);              }          }      });  </script>  </html>

 

<!DOCTYPE html>  <html>   <head>    <meta charset="utf-8" />    <title></title>    <link rel="stylesheet"   />    <script type="text/javascript" src="js/jquery-1.11.2.min.js" ></script>    <script type="text/javascript" src="js/bootstrap.js" ></script>   </head>   <body>      <div > <!--   放在这里面的元素可以使它们居中-->     <h1 >用户登录</h1>        <!--  设置当前表单为水平的,还可以设置其余样式 等  -->    <form >     <!--文本框        表示占用当前页面的纵向4个格 ,共有12个格子        -->     <div >       <div >       <label for="exampleInputEmail1">用户名:</label>       <input type="email"  id="exampleInputEmail1" placeholder="用户名 / email">       </div>     </div>     <!--密码框 -->     <div >      <div >       <label for="exampleInputPassword1">密码:</label>       <input type="password"  id="exampleInputPassword1" placeholder="请输入密码">      </div>     </div>     <!--  文件上传   -->     <div >      <div >       <label for="exampleInputFile">请选择文件:</label>       <input type="file" id="exampleInputFile">      </div>     </div>      <!--复选框    -->     <div >       <p >兴趣/爱好 </p>       <label>        <input type="checkbox">        复选框一          </label>       <label>        <input type="checkbox">        复选框二        </label>     </div>     <br />     <!-- 提交(当前表当)按钮         设置提交按钮的样式      -->     <div >      <div >       <button type="submit" > 提 交 </button>      </div>     </div>    </form>    </div>    </body>  </html>  

模板代码:

图片 1

运行效果:

<div class="panel panel-default">      <div class="panel-heading" ng-click="open()">          <h4 class="panel-title">              <a href="#collapseOne">                                </a>          </h4>      </div>      <div class="panel-collapse" ng-class="{collapse: isOpen}">          <div class="panel-body" ng-transclude>          </div>      </div>  </div>

 

图片 2GCDCC$0%7D9$N@RC9%7BQJF.png)图片 3

 

在线演示      源码下载

响应式导航菜单:

发表评论

电子邮件地址不会被公开。 必填项已用*标注