bootstrap排版实战

bootstrap+angular实战

CASE-01：页面总体排版

说明：页面排版整体分为三个部分（见产品图）：上导航条（红色区域）、左导航条（紫色区域）、内容区域（蓝色区域）。左导航条的区域是由整个页面的蓝色部分使用margin-left右移留出来的。上导航条采用position绝对定位固定。内容区域则是采用ui-view引入具体的模块页面。

1：页面总览

2：实现方案

页面总体布局代码（main.html）

<div id="wrapper"   >

<!-- Navigation -->

<div>

<nav  class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">

<div class="navbar-header">

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

<span class="sr-only">Toggle navigation</span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

</div>

<div  ng-include="'views/layout/navbar-top.html'"></div>

<div ng-include="'views/layout/navbar-left.html'"></div>

</nav>

<section id="page-wrapper" style="min-height: 730px;margin-left: 150px;padding-top: 20px;">

<div ui-view style="height:100%;width:100%;"></div>

</section>

</div>

</div>

说明：

1：最外层包裹层：div#wrapper

2：导航条：nav标签导航条部分列出该系统的主要功能模块，从导航条部分能很方便进入对应的页面。该系统的导航条使用angular框架的ng-include指令引进了上、左两部分的导航条。

3：内容区域section标签

说明：采用ui-view将所需要的模块引入。也是本项目的主要内容所在区域。

CASE-02：导航条

1：默认样式的导航条

导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠（并且可开可关），且在视口（viewport）宽度增加时逐渐变为水平展开模式。

注意事项

（1）两端对齐的导航条导航链接已经被弃用了。

（2）导航条内所包含元素溢出

由于 Bootstrap 并不知道你在导航条内放置的元素需要占据多宽的空间，你可能会遇到导航条中的内容折行的情况（也就是导航条占据两行）。解决办法如下：

1. 减少导航条内所有元素所占据的宽度。
2. 在某些尺寸的屏幕上（利用 响应式工具类）隐藏导航条内的一些元素。
3. 修改导航条在水平排列和折叠排列互相转化时，触发这个转化的最小屏幕宽度值。可以通过修改 @grid-float-breakpoint变量实现，或者自己重写相关的媒体查询代码，覆盖 Bootstrap 的默认值。

（3）依赖 JavaScript 插件

如果 JavaScript 被禁用，并且视口（viewport）足够窄，致使导航条折叠起来，导航条将不能被打开，.navbar-collapse 内所包含的内容也将不可见。响应式导航条依赖 collapse 插件，定制 Bootstrap 的话时候必将其包含。

（4）修改视口的阈值，从而影响导航条的排列模式

当浏览器视口（viewport）的宽度小于 @grid-float-breakpoint 值时，导航条内部的元素变为折叠排列，也就是变现为移动设备展现模式；当浏览器视口（viewport）的宽度大于 @grid-float-breakpoint 值时，导航条内部的元素变为水平排列，也就是变现为非移动设备展现模式。通过调整源码中的这个值，就可以控制导航条何时堆叠排列，何时水平排列。默认值是 768px （小屏幕 -- 或者说是平板 --的最小值，或者说是平板）。

（5）导航条的可访问性

务必使用 <nav> 元素，或者，如果使用的是通用的 <div> 元素的话，务必为导航条设置 role="navigation" 属性，这样能够让使用辅助设备的用户明确知道这是一个导航区域。

2：实例

1：导航条内部折叠

首先：本项目的有上左两个部分的导航条 当屏幕分辨率大于768px时 上导航条隐藏左导航条显示，当小于768px时，左导航条隐藏，上导航条显示，才形成的现在的响应式布局。

<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">

<div class="navbar-header">

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

<span class="sr-only">Toggle navigation</span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

</div>

<div  ng-include="'views/layout/navbar-top.html'"></div>

<div ng-include="'views/layout/navbar-left.html'"></div>

 </nav>

分析：

导航条的内部折叠会出现在屏幕小于768px时出现。

navbar ：boorstrap的导航条

navbar-default ：默认的样式

navbar-static-top ：可使导航条随着页面滚动而消失.navbar-static-top 去掉了由 .navbar-default 设置的左、右和顶部的边框，让它看起来更适合放在页面的头部。

另外：navbar-fixed-top指导航条固定在顶端。

Navbar-left/right 代表样式float:left/right!important;

data-target=".navbar-collapse":代表的是打开.navbar-collapse 元素， 一般设为id。

Button标签 ：当屏幕小于768px时，导航条折叠。如下图：点击可使导航条折叠或者展开。

导航条被折叠

2：品牌图标

将导航条内放置品牌标志的地方替换为 <img> 元素即可展示自己的品牌图标。由于 .navbar-brand 已经被设置了内补（padding）和高度（height），你需要根据自己的情况添加一些 CSS 代码从而覆盖默认设置。

实例代码

<div class="navbar-header">

<a class="navbar-brand pt10" ui-sref="main.home">

<img class="kekingLogo" src="data:images/logo.png" />

</a>

<a class="navbar-brand pt10" ui-sref="main.home">

凯京物流云

</a>

</div>

实际效果图：

3：左侧导航条

使用sb-admin-2（bootstrap的UI组件）

实例代码：

<div id="menu" class="navbar-default sidebar" role="navigation" ng-controller="navbarCtrl" style="display: block;position: absolute;top: -60px;">

<div class="sidebar-nav navbar-collapse" ng-if="authNum">

<nav class="vertical">

<ul>

<li ui-sref-active="active"  ng-click="toggleOpen('index')">

<a ui-sref="main.home" style="padding-left: 20px"><i class="fa fa-home fa-fw"></i> 首页</a>

</li>

<li>

<label class="mainLable" ng-click="toggleOpen('home')"><a style="padding-left: 0"><i class="fa fa-list fa-fw"></i> 运单 <span

class="fa fa-arrow-left" ng-class="{'fa-arrow-down':menu.home}"></span></a></label>

<div collapse="!menu.home">

<ul>

<li ui-sref-active="active">

<a ui-sref="main.addWaybill">我要录单</a>

</li>

<li ui-sref-active="active">

<a ui-sref="main.waybillIndex">运单管理</a>

</li>

<li ui-sref-active="active">

<a ui-sref="main.waybillTrace">运单跟踪</a>

</li>

</ul>

</div>

</li>

代码分析：

div.navbar-default.sidebar 侧边的导航条

Ng-if=’authNum’ 是判断用户是否登录  如果没有登录 则侧边导航条不显示

函数：toggleOpen 用来控制二级导航条是否打开

代码如下：

$rootScope.menu = {};

$rootScope.menu.home=true

$rootScope.toggleOpen = function(data) {

$scope.menu[data] = !$scope.menu[data]

angular.forEach($scope.menu, function(value, key) {

if (data !== key) {

$scope.menu[key] = false;

}

if(data == 'payment' && data1 == 'payment1'){

$scope.menu.payment = true;

}

});

}

此函数可全局调用，另外if(data == 'payment' && data1 == 'payment1'){

$scope.menu.payment = true;} 是为了强行打开payment（支付与金融）导航条。

实例效果图如下：

CASE-03：下拉菜单

用于显示链接列表的可切换、有上下文的菜单。下拉菜单的 JavaScript 插件（dropdown.js）让它具有了交互性。

1：实例

将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里，或者另一个声明了 position: relative; 的元素。然后加入组成菜单的 HTML 代码。

实例：

<ul class="nav navbar-nav navbar-right">

<li class="dropdown">

<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-user fa-fw"></i> {{username}} <span class="caret"></span></a>

<ul class="dropdown-menu">

<li><a href data-toggle="modal" data-target="#help"><i class="fa fa-tags fa-fw"></i>帮助</a></li>

<li><a href data-toggle="modal" data-target="#modifypwd"><i class="fa fa-gear fa-fw"></i>修改密码</a></li>

<li role="separator" class="divider"></li>

<li ng-controller="loginCtrl"><a href ng-click="logout()"><i class="fa fa-sign-out fa-fw"></i>退出登录</a></li>

</ul>

</li>

</ul>

代码分析：

li.dropdown 下拉菜单最外层

另外li.dropdown.open是打开下拉菜单

CASE-04：按钮组

本项目的按钮首先要明确的是：跟本页面操作有关的按钮（比如刷新/查询）与刷新/查询条件放在同一行。而无关的则单独起一行。如下实例图：

1：用法与注意事项：

（1）：通过按钮组容器把一组按钮放在同一行里。通过与按钮插件联合使用，可以设置为单选框或多选框的样式和行为。

（2）：按钮组中的工具提示和弹出框需要特别的设置

（3）：当为 .btn-group 中的元素应用工具提示或弹出框时，必须指定 container: 'body' 选项，这样可以避免不必要的副作用（例如工具提示或弹出框触发时，会让页面元素变宽和/或失去圆角）。

（4）：确保设置正确的 role 属性并提供一个 label 标签

（5）为了向使用辅助技术 - 如屏幕阅读器 - 的用户正确传达一正确的按钮分组，需要提供一个合适的 role 属性。对于按钮组合，应该是 role="group"，对于toolbar（工具栏）应该是 role="toolbar"。

（6）一个例外是按钮组合只包含一个单一的控制元素或一个下拉菜单（比如实际情况，<button> 元素组成的两端对齐排列的按钮组 ）或下拉菜单。

（7）此外，按钮组和工具栏应给定一个明确的label标签，尽管设置了正确的 role 属性，但是大多数辅助技术将不会正确的识读他们。在这里提供的实例中，我们使用 aria-label，但是， aria-labelledby 也可以使用。

实例：

代码：

<div class="col-sm-3">

<button type="button" class="btn btn-info" ng-click="search()"><span class="glyphicon glyphicon-search" aria-hidden="true"> 查询车辆</span></button>

<button type="button" class="btn btn-info" ng-click="clear()"><span class="glyphicon glyphicon-refresh" aria-hidden="true"> 重置条件 </span></button>

</div>

分析：

.btn .btn-info （自定义按钮样式） .btn-default （bootstrap默认的按钮组样式）

提示：

（1）：如果 <a> 元素被作为按钮使用 -- 并用于在当前页面触发某些功能 -- 而不是用于链接其他页面或链接当前页面中的其他部分，那么，务必为其设置 role="button" 属性。如：

<a class="btn btn-primary" ui-sref="main.addWaybill" ><span class="glyphicon glyphicon-plus" aria-hidden="true"> 新建运单</span></a>

（2）：另外，我们还发现了 Firefox <30 版本的浏览器上出现的一个 bug，其表现是：阻止我们为基于 <input> 元素所创建的按钮设置 line-height 属性，这就导致在 Firefox 浏览器上不能完全和其他按钮保持一致的高度。

Bootstrap样式：

<div class="btn-group" role="group" aria-label="...">

<button type="button" class="btn btn-default">Left</button>

<button type="button" class="btn btn-default">Middle</button>

<button type="button" class="btn btn-default">Right</button>

</div>

其中role=’group’是说明这是个按钮组。 Div.btn-group是默认按钮组之间没有空隙。

2：按钮式的下拉菜单：

说明：

只要改变一些基本的标记，就能把按钮变成下拉菜单的开关。

实例：

代码：

<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">

<span class="glyphicon glyphicon-list-alt" aria-hidden="true"> 导入车辆</span>

</button>

<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">

<li><a href="file/车辆.xls" style="text-decoration:  underline;">下载车辆Excel模板</a></li>

<li>

<div class="input-group">

<input type="file" class="form-control" id="file">

<div class="input-group-btn">

<button type="button" class="btn btn-default" ng-click="importCar()">提交</button>

</div>

</div>

</li>

</ul>

上传文件格式

通过 data 属性：向链接或按钮添加 data-toggle="dropdown" 来切换下拉菜单

class="form-control" ：表单控件

CASE-05：表单

说明：

单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

另外注意：不要将表单组直接与输入框组混合使用，建议将输入框组嵌套到表单组中使用。

1：表单的水平布局：

用栅格系统中的列（column）包裹输入框或其任何父元素，都可很容易的为其设置宽度。

水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。如需创建一个水平布局的表单，请按下面的几个步骤进行：

（1）：向父 <form> 元素添加 class .form-horizontal。

（2）：把标签和控件放在一个带有 class .form-group 的 <div> 中。

（3）：向label标签添加 class .control-label。

1：实例

代码：

<form class="form-horizontal" name="queryForm">

<div class="form-group">

<label class="col-sm-1 control-label">司机手机号</label>

<div class="col-sm-2">

<input type="text" class="form-control" ng-model="mobile" maxlength="11">

</div>

<label class="col-sm-1 control-label">车牌号</label>

<div class="col-sm-2">

<input type="text" class="form-control" ng-model="carNo" maxlength="8">

</div>

<label class="col-sm-1 control-label">发车日期</label>

<div class="col-sm-2" ng-controller="DatepickerCtrl">

<div class="input-group">

<input type="text" ng-click="open($event, 'startDate')"  class="form-control"  readonly  datepicker-popup="{{formats}}"  ng-model="param.applyDate" is-open="datepickers.startDate"  datepicker-options="dateOptions"  close-text="关闭" current-text="今天" clear-text="清除" placeholder="请点击选择日期"/>

<span class="input-group-addon btn" ng-click="open($event, 'startDate')"><i class="glyphicon glyphicon-calendar"></i></span>

</div>

</div>

<div class="col-sm-3">

<div class="btn-group">

<button type="button" class="btn btn-info" ng-click="resetForm()"> <span class="glyphicon glyphicon-refresh" aria-hidden="true"> 重置条件 </span></button>

</div>

</div>

</div>

</form>

代码分析：

form-horizontal ： 代表这是个水平表单

<span class="input-group-addon btn" ng-click="open($event, 'startDate')"><i class="glyphicon glyphicon-calendar"></i></span> ： 在输入框内部加上图标。

class="form-control" ：为表单添加控件

表单布局实例中展示了其所支持的标准表单控件。包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件： text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。

CASE-06：表格

1：默认表格

为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 ：少量的内补（padding）和水平方向的分隔线。表格元素使用的很广泛，如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件，所以我们选择将此样式独立出来

实例：

代码：

<table class="table table-striped" id="mainTable">

<!-- <caption>Optional table caption.</caption> -->

<thead>

<tr>

<th>序列</th>

<th>车牌号</th>

<th>添加时间</th>

<th>车长</th>

<th>车型</th>

<th>装载吨位</th>

<th>品牌</th>

<th>购车时间</th>

<th>操作</th>

</tr>

</thead>

<tbody>

<!--start-->

<tr ng-repeat="car in carList">

<td ng-bind="$index+1"></td>

<td>{{car.carNo}}</td >

<td>{{car.createTime|date:"yyyy/MM/dd"}}</td>

<td>{{car.carLength}}</td>

<td>{{carModelEnum[car.carModel]}}</td>

<td>{{car.carLoad}}</td>

<td>{{car.carBrand}}</td>

<td>{{car.buyCarTime|date:"yyyy/MM/dd"}}</td>

<td>

<div class="btn-group-xs">

<a type="button" href="#" class="btn btn-info" ng-click="toCarDetail(car.carId)">

详情

</a>

<a type="button" href="#" class="btn btn-info" ng-click="toUpdateCar(car.carId)">

修改

</a>

<a type="button" href="#" class="btn btn-danger" ng-click="confirmShow(deleteCar,car.carId)">

删除

</a>

</div>

</td>

</tr>

<tr class="text-center" ng-show="isNullList">

<td colspan="13">没有符合条件的记录</td>

</tr>

<!--end-->

</table>

表格class名分析：

1：通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。

2：通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。

3：通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。

4：通过以下状态类可以为行或单元格设置颜色。

（1）：.active:鼠标悬停在行或单元格上时所设置的颜色

（2）：.success:标识成功或积极的动作

（3）：.warnning:标识警告或需要用户注意

（4）：.danger：标识危险或潜在的带来负面影响的动作

2：响应式表格

说明：

（1）将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。

（2）垂直方向的内容截断

（3）响应式表格使用了 overflow-y: hidden 属性，这样就能将超出表格底部和顶部的内容截断。特别是，也可以截断下拉菜单和其他第三方组件。

（4）Firefox 和 fieldset 元素

Firefox 浏览器对 fieldset 元素设置了一些影响 width 属性的样式，导致响应式表格出现问题。可以使用下面提供的针对 Firefox 的 hack 代码解决，但是以下代码并未集成在 Bootstrap 中：

@-moz-document url-prefix() { fieldset {  display: table-cell;  } }

（5）代码形式为：

<div class="table-responsive">

<table class="table">

...

</table>

</div>

CASE-07：弹窗

1：弹窗形式的页面

实例：图中是运单详情页面，点击详情后以弹窗形式出现。实际是ng-clude引入的页面。

代码：

（1）：waybillIndex.html:

<div ng-include="'views/waybillMgr/addOrUpdate/waybillDetail.html'" ></div>

（2）:waybillIndexCtr.js

$scope.toDetail=function(billId){

waybillIndexService.billDetail.get({

"wayBillId":billId

},function(data){

$location.url('main/waybillIndex');

if(data.code===0){

$scope.bill=data.content;

$scope.bill.transportCash.photoAirWay=($scope.bill.transportCash.photoAirWay=== "")?"images/noimg.png":$scope.bill.transportCash.photoAirWay;

$("#detailDiv").modal('show');

}

},function(){});

}

分析：

当订单详情接口成功返回数据时，接口返回订单信息，由$("#detailDiv").modal('show')将订单详情信息页面显示出来。

2：对话窗

用于对重要操作步骤的确认，比如是否确认发车等

实例：

代码：

$rootScope.confirmShow=function(okFun,param1,param2,param3){

window.wxc.xcConfirm("是否确定?", window.wxc.xcConfirm.typeEnum.confirm, {

onOk: function(){

if(typeof okFun === "function"){

okFun(param1,param2,param3);

}

}

});

};

分析：

一个全局的弹窗，可直接ng-click=’confirmShow(参数)’调出，比如运单管理的确认发车。

调用方式：（比如运单管理页面的发车确认按钮）

<a type="button" href="#" class="btn btn-info" ng-if="row.transStatus=='D'" ng-click="confirmShow(confirmSend,row.billId)">

发车确认

</a>

CASE-08：全屏展示图片

说明：使用viewer.js插件

用法：

在需要显示的页面的最外层包裹层加上id名称（比如：运单详情页面id="detailDiv" ），并用下面代码调用，

var viewer = new Viewer(document.getElementById("detailDiv"), {url: 'src'});

实际效果图：