xml地图|网站地图|网站标签 [设为首页] [加入收藏]

使用Orachard与Bootstrap建站心得

来源:http://www.ccidsi.com 作者:最新解决方案 人气:86 发布时间:2019-06-26
摘要:Bootstrap是个十三分完美的前段框架,能够让不懂设计的人,在相当的短的光阴内弄出个小清新的页面,那多少个象小弟一样不懂设计的,相对值得尝试。 c.oaoDailog1.0.0本子首要正是消除

Bootstrap 是个十三分完美的前段框架,能够让不懂设计的人,在相当的短的光阴内弄出个小清新的页面,那多少个象小弟一样不懂设计的,相对值得尝试。

c. oaoDailog1.0.0本子首要正是消除bootstrap的模态框使用不方便人民群众,代码冗余的主题材料。

Offcanvas

Build a toggleable off-canvas navigation menu for use with Bootstrap.

图片 1

除此以外做个预报:小编现在备选动手写个长篇种类作品,内容是关于Linq to SQL的,和市面上小说的不等的地点是,作者会依据设计的角度去写,让你深入地打听Linq to SQL的运营机制,以及规划准则,一定会让商讨架构的情人大呼过瘾。感兴趣的敌人,可以关怀本人的Tencent腾讯网。 

/*!
* oaoDialog 1.0.0
* author:xufei
* Date: 2015-7-9 1:32
* http://www.oaoera.com
* Copyright © 2014 www.oaoera.com Inc. All Rights Reserved. 沪ICP备13024515号-1 上海义信电子商务有限公司 
*
* This is licensed under the GNU LGPL, version 2.1 or later.
* For details, see: http://creativecommons.org/licenses/LGPL/2.1/
*/
//oao命名空间
oao = {};
oao.init = function(settings){
var defaultSettings ={
title : "提示",
content:"",
okVal:"确认",
cancalVal:"取消",
ok:function(){
$("#oaoModal").modal('hide');
},
cancel:function(){
$("#oaoModal").modal('hide');
},
close:false
}
oao.settings = $.extend({}, defaultSettings, settings || {});
return oao.settings;
}
oao.initContent = function(){
var modelHtml = 
"<div id="oaoModal" class="modal fade delete_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >" 
" <div class="modal-dialog">" 
" <div class="modal-content">" 
" <div class="modal-header">" 
" <button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button>" 
" <h4 class="modal-title"></h4>" 
" </div>" 
" <div class="modal-body" style="text-align:center;">" 
" </div>" 
" <div class="modal-footer">" 
" <button type="button" class="btn btn-default modalCancel"></button>" 
" <button type="button" class="btn btn-primary modalOK"></button>" 
" </div>" 
" </div>" 
" </div>" 
" </div>";
var $modelHtml = $(modelHtml);
$(".modalOK",$modelHtml).text(oao.settings.okVal);
$(".modalCancel",$modelHtml).text(oao.settings.cancalVal);
$(".modal-title",$modelHtml).text(oao.settings.title);
$(".modal-body",$modelHtml).html(oao.settings.content);
if(!oao.settings.ok){
$(".modalOK",$modelHtml).remove();
}
if(!oao.settings.cancel){
$(".modalCancel",$modelHtml).remove();
}
$("body").append($modelHtml);
}
//弹出对话框的方法
oao.dialog = function(settings){
settings = oao.init(settings);
oao.initContent();
//关闭的时候调用方法
$('#oaoModal').on('hidden.bs.modal', function (e) {
if(oao.settings.close){
oao.settings.close();
}
$("#oaoModal").remove();
})
if(oao.settings.ok){
$("#oaoModal .modalOK").click(settings.ok);
}
if(oao.settings.cancel){
$("#oaoModal .modalCancel").click(settings.cancel);
}
$("#oaoModal").modal('show')
.css({
"margin-top": function () {
return ($(this).height() / 2-200);
}
});;
}
//关闭对话框的方法
oao.dialog.close = function(){
$("#oaoModal").modal('hide');
}

案例

上边这个案例都是基于上面给出的主干模版并组成Bootstrap组件制作的。后续大家还大概会讲课怎么样定制那些组件。

图片 2

2、中期的保卫安全,特别是些小的退换,那一个还是要好入手会方便、连忙些。网址借使是人家做的,到了前期,作者一样得花时间去询问,去看人家写的代码,那又是成本呀。

4.脚下的弹出框一次只好弹出三个,不帮衬弹出框中再弹出二个模态框(bootstrap modal底层不帮忙)

剥夺响应式特性的Bootstrap模版

咱俩早已依据地方的手续制作了一份案例。留心阅读其源码并相比较上边的步调试行一下呢。

 

 

oao.dialog({
title:"删除提示框",
content:"请确认是否真的删除,删除后将无法恢复!",
ok:function(){
oao.dialog.close();
}
});

删除没用的代码

并不是享有的网址和选拔供给运用Bootstrap提供的享有效能,特别是在生产条件,带宽的增添意味着消费越来越多金钱。我们鼓励你通过定制效率去除任何没用的代码。

行使定制作用,能够简轻便单的将无需的组件、性格或财富去除掉。点击下载按键,将下载下来的公文替换掉默许的Bootstrap文件就可以。那样你就获取了截然满意本人供给的Bootstrap,未有丝毫您没有供给的代码。全部定制的Bootstrap也都富含压缩和未压缩七个本子的公文,依据你 自身的内需选取呢。


6、如若能再拉长个工作流就好了。

起先利用

庞大阅读

  • "HTML Codesniffer" bookmarklet for identifying accessibility issues
  • The A11Y Project
  • MDN accessibility documentation

图片 3

属性名

属性类型

说明

默认值

title

String

弹出框标题

提示

content

String

弹出框的主要内容,可以是文本和html代码

okVal

String

确认按钮的自定义文字

确认

ok

Function/boolean

点击确认执行的方法

关闭功能

cancelVal

String

取消按钮的自定义文字

取消

cancal

Function/boolean

点击取消执行的方法

关闭功能

Respond.js 和 跨域(cross-domain) CSS 的问题

要是 Respond.js 和 CSS 文件被放在不相同的域名或子域名上面(举个例子,使用CDN)时需求部分附加的安装。请参考Respond.js 文书档案 获取详细新闻。

1、调换的基金太大了,开销在调换方面包车型大巴时光,不会比本人动手开垦的年华少。

1.3. 原理图

Narrow jumbotron

Build a more custom page by narrowing the default container and jumbotron.

图片 4

Bootstrap是Twitter推出的三个开源的用于前端开辟的工具包。它由脸书的设计员马克奥托和JacobThornton合营开拓,是二个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它便是由动态CSS语言Less写成。Bootstrap一经推出后颇受招待,一向是GitHub上的火爆开源项目,蕴含NASA的MSNBC(微软全国广播公司)的Breaking News都应用了该项目。 [1]

效果图:

Internet Explorer 8 与 box-sizing

IE8无法一心协理box-sizing: border-box;min-widthmax-widthmin-heightmax-height一齐使用。由于此原因,从Bootstrap v3.0.1版本起首,我们不再为.container使用max-width

Orachard 有着很强劲的定制工夫,这些是自身唯一喜欢它的地点,越是领会,越是喜欢。可是,它的高灵活性大大使得系统的复杂度大全世界进步了,相同的时候学习难度也十分的大,就算自身找了累累素材来看,但仍感觉只是懂个皮毛。在念书Orchard最纠结的作业是,遇到难点,只好Google,根本未有人得以问。依旧用中文好关系呀,而且不会临时差,答复也快。在使用的历程中,小编越过了过多不爽的地点:

Bootstrap 是依据 HTML、CSS、JAVASCXC60IPT 的,它简洁利落,使得 Web 开辟特别连忙。 它由Facebook的设计员马克 奥托和JacobThornton合营开采,是八个CSS/HTML框架。

浏览器缩放

页面缩放成效不可制止的会将某个零部件搞得一无可取,不光是Bootstrap,整个互联互连网的具有网址都以那般。针对现实难点,大家或然可以修复它(若是有必不可缺的话,请先找找一下你的标题,看看是不是已有化解方案,然后在向我们付出issue)。可是,大家更赞成于忽略那个主题素材,由于这几个题目除了一部分hack手腕,一般从不一向的减轻方案。

2、Orchard 的HTML编辑器实在是矫枉过正短小,简洁到广大效果想找都找不着,连建个 Table 的服从都未曾,大大多时候,只可以写HTML。

缘何供给oaoDailog?

标题嵌套

当标题嵌套时(<h1> - <h6>),你的文书档案的主标题应该是<h1>。随后的题目逻辑上就应当选用<h2>

  • <h6>,那样,显示器阅读器就能够社团出页面包车型地铁剧情列表。

Learn more at HTML CodeSniffer and Penn State's AccessAbility.

3、页面包车型客车内容只好是 HTML,不能输入 aspx 代码,使用过多动态的事物只好利用 javascript 来减轻,所以您见面到页面包车型地铁新型版本,牢固版本,历史版本那么些,皆以要过几秒技术显得出来,因为是运用 JS 从服务端来获取的。

1.6. 待支持的职能 1.当下弹出框的内容只扶助文字和静态html,不支持url央浼

两端对齐的导航条

Create a custom navbar with justified links. Heads up! Not too WebKit friendly.

图片 5

4、未有Change Log成效,正是说,不可能复苏到某不经常刻的版本,对于习贯了CodePlex上的Wiki编辑作用的人来讲,真的很不爽。

boostrap模态框oaoDailog

从2.x升级到3.0版本

Bootstrap 3并不向后分外Bootstrap v2.x。上面章节列出的剧情能够看做从v2.x调升到v3.0的通用指南。假若急需越来越多消息,能够查阅更新记录那篇官方博文。

实在,小编是很想买单来做的,为何最终照旧自个儿做啊?

1.4. 选取表明

栅格系统

多少个栅格系统布局的案例展现。

图片 6

1、Orchard 使用了汪洋的动态类型,在编写模版的时候,没有办法使用智能提示,大多成员,都以要在运维时翻看工夫领会获得。

敬请期待,下个版本见。

需要你:

  • 在含蓄了Bootstrap的散发中包涵一份许可证文件
  • 对所包罗的Bootstrap实行标准的扬言,其义务归属于Twitter

新近采取Orchard和Bootstrap为哥的 ALinq 做了个小网址,总得来讲,很不利。比本身一行一行地写代码,有功效多了,而且页面也干净利落,当然,比起正式的网址的,依然有数不胜数离开。选拔Orchard,是因为从几年前,就径直在关心它,用的人绝对来讲也相比较多,并且,选拔的技艺也是主流的。但免费的东西到底是无偿,始终富有那样或那样的欠缺,但是,一旦想到它是无偿的,也就心静接受了。

a.由于boostrap3.0提供的modal,必须求在页面上先定义三个modal的div隐藏代码,用户将急需显示的源委写到该div中,借使三个页面有各种模态框,则须求写八个藏匿的模态框div隐藏代码,无疑那是剩下的。

禁止你:

  • 在未曾合适的权能证明的景色下再也分发Bootstrap的随机部分
  • 以其余方法(评释或暗意脸书已经为你的散发背书)使用照片墙具备的别的商标
  • 以其余措施(证明或暗中表示你创制了此软件)使用任何Instagram拥有的商标

然则,若是有收取薪资的奇妙模版,作者或许会有购买的用意的,毕竟本身是写个写代码,做处己长于的,更有成效。

<script type="text/javascript" src="${ctx}/static/jquery/jqueryApi/oaoDialog/oao.dialog.js" charset="UTF-8"></script>

剥夺响应式布局

Bootstrap会自动帮您针对区别的显示屏尺寸调节你的页面,使其在个尺码显示器上显现能够。下边我们列出了如何禁止使用这一本性,如同那么些页面同样:非响应式布局案例。

等作者有丰盛空闲时间了,就把它能够的商量一番,去它举行创新。聊了Orchard,接着聊聊Bootstrap,作者先用一句话表达自己的情愫,“Bootstrap,作者实际太爱你了!”。相见恨晚呀,作者前面开支了非常的多日子做的功效,在它上面都能找到,并且人家比作者作的更加好。浪费生命是件很无耻的事务,对此,笔者深表遗憾!能够重用的事物,就选定吧,没须要自个儿去写三个,而且写得还未有住户的好。专注于本人所专长的,博采众长才是正道。

Code:

Safari对百分比数字凑整的难点

从OS X版Safari v6.1和iOS v7.0.1版Safari先导,Safari浏览器所包含的绘图引擎对于拍卖.col-*-1所对应的相当短的比重小数存在bug。也正是说,倘让你在一行(row)之中定义了十三个独立的列(.col-*-1),你就能看到这一行比别的行要短一些。大家当下解决不了这一个主题素材(see #9282),不过你能够制止:

  • 为最后一列增加.pull-right,将其暴力向右对齐
  • 手动调解百分比数字,让其针对性Safari表现更加好(那比第一种艺术更不方便)

我们将会延续追踪此主题素材,借使有更轻松的消除方案,大家会更新代码。

3、做网址的太多了,可是,真正出色的、具备设计技术太难找,要么就是价格过高,难以接受。大多都以把人家的事物的拿来修改,并且,改后的本子,还从未原本的好,很难令人乐意。

1.5. API

对第三方组件的支撑

就算咱们并非法帮助别的第三方插件,大家依旧提供一些提出,帮你防止或许在你的花色中会出现的题目。


2、 调用显示弹出框的代码

超过范围和滚动

<body>元素在iOS和Android上对overflow: hidden的支持很有限。结果正是,在这三种道具上的浏览器中,当你滚动显示屏超越模态框的顶上部分或底层时, <body>中的内容将启幕趁机滚动。

本文由68399皇家赌场发布于最新解决方案,转载请注明出处:使用Orachard与Bootstrap建站心得

关键词: 68399皇家赌场

上一篇:皇家88娱乐网Bootstrap&lt;基础九&gt;辅助类

下一篇:没有了

最火资讯