jdango 中引入的bootstrap样式属性说明

查看方法:ctrl+B bootstrap_field属性。 
bootstrap_field属性:
使用样例:{% bootstrap_field form.ddl layout="horizontal"   %}

***layout="horizontal" :并排显示。如同没有field_class。
***form_group_class:(form-group)包含在field和label最外面的div样式。
***field_class:('col-md-9')包含field外的div样式。
***label_classg:('col-md-3')label元素样式。总是包含"control-label"样式。
***show_label:(True)是否显示field的label。注意,不能加引号。 show_label=False
*** size:控制大小:* ``'small'``* ``'medium'``* ``'large'``
*** placeholder :设置或重写placeholder。设置input标签中placeholder属性。
show_help:(True)如有field的help text文本,则显示。
label:重写label。仅调整label标签的文字内容。
horizontal_label_class:('col-md-3')layout="horizontal"时label的css样式。
horizontal_field_class:('col-md-9')layout="horizontal"时field的css样式。
addon_before :前置标记:'<span class="glyphicon glyphicon-calendar"></span>',参考URL:http://getbootstrap.com/components/#input-groups-basic
增加代码如下:
<div class="col-md-9"> #原有
    <div class="input-group">    #新增
        <span class="input-group-addon">#新增    #addon_before_class属性修改这里的CSS样式。
        <span class="glyphicon glyphicon-calendar"></span></span>#新增
        <input 原input标签> #原有
    </div>
</div>
addon_after :后置标记:
addon_before_class:(input-group-addon)addon_before属性的css样式。* ``'input-group-addon'``* ``'input-group-btn'``
addon_after_class:同addon_before_class。
error_css_class:(has-error).错误样式。
required_css_class:声明一个属性是必填时的样式。
bound_css_class:('has-success')绑定成功样式。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
插件使用配置(config)还是很灵活的,当然也是弊端,配置不当,效果就没了。 使用时候,重要的参数如下(此demo参数配置点击右键看源码): url: 'http://suggest.taobao.com/sug?code=utf-8&extras=1', queryName: 'q', //url?queryName=value,默认为输入框的name属性 jsonp: 'callback', //设置此参数名,将开启jsonp跨域功能(我要调淘宝数据,非跨域不可,淘宝的回调参数名就是callback),否则使用json数据结构 item: 'li', //下拉提示项目单位的选择器,默认一个li是一条提示,与processData写法相关。 processData: function(data){ }//自定义处理返回的数据,该方法可以return一个html字符串或jquery对象,将被写入到提示的下拉层。 右键查看源码,将看到本demo所编写的processData函数是怎样的,所以这个参数是把如何表现交给你来做了,但别忘了配合 item 参数 getCurrItemValue: function($currItem){ }//定义如何去取得当前提示项目的值并返回值,插件根据此函数获取当前提示项目的值,并填入input,此方法应根据processData参数来定义。 是的,如果你自定义了processData,这个参数恐怕也需要自定义,默认是获取$currItem.html(),你也可以return $currItem.attr('an attrName'); 右键查看源码,将看到本demo所编写的getCurrItemValue函数是怎样的 textchange: function($input){}, //不同于change事件在失去焦点触发,inchange依赖本插件,只要内容有变化,就会触发,并传入input对象 onselect: function($currItem){} //当选择了下拉的当前项目时执行,并传入当前项目。比如选择了某个提示项目,就提交表单。 sequential: 0, //按着方向键不动是否可以持续选择,默认不可以,设置值可以是任何等价的boolean
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值