如何使用sharepoint list new form.aspx中的bootstrap创建响应式Web设计 [英] How create responsive web design using bootstrap in sharepoint list new form.aspx

问题描述

我使用bootstrap在自定义新表单中工作。由于我是这个bootstrap的新手，我不知道在哪里实现。我已经通过div类尝试了一些代码，但是控件没有正确对齐。



我必须使用自定义新表格实现这种设计格式：



标签标签

控制控制





标签标签

控制控制



我尝试过：

< div class =container> 
 
< div class =row> 
< div class =col-md-6 purchasedetialsR> 
< div class =row form-group potitle> 
< div class =col-sm-4> 
< label class =control-label> Title *< / label> 
 
 
 
< / div> 
< div class =col-sm-8> 
< SharePoint：FormField runat =serverid =ff1 {$ Pos}ControlMode =NewFieldName =Title__designer：bind ={ddwrt：DataBind（'i'，concat（' FF1' ，$ POS）， '值'， '的ValueChanged'， 'ID'，DDWRT：EscapeDelims（串（@ID））， '@标题'）}/> 
< SharePoint：FieldDescription runat =serverid =ff1description {$ Pos}FieldName =TitleControlMode =New/> 
 
< / div> 
 
 
< / div> 
< div class =row form-group ponumber> 
< div class =col-sm-4> 
< label class =control-label> PONumber< / label> 
 
< / div> 
< div class =col-sm-8> 
< SharePoint：FormField runat =serverid =ff3 {$ Pos}ControlMode =NewFieldName =PONumber__designer：bind ={ddwrt：DataBind（'i'，concat（' FF3' ，$ POS）， '值'， '的ValueChanged'， 'ID'，DDWRT：EscapeDelims（串（@ID））， '@采购单号码'）}/> 
< SharePoint：FieldDescription runat =serverid =ff3description {$ Pos}FieldName =PONumberControlMode =New/> 
< / div> 
 
 
< / div> 
 
< / div> 
 
< div class =col-md-6 purchasedetialsL> 
 
< div class =row form-group POdate> 
< div class =col-sm-4> 
< label class =control-label> PODate< / label> 
 
< / div> 
< div class =col-sm-8 podat> 
 
< SharePoint：FormField runat =serverid =ff2 {$ Pos}ControlMode =NewFieldName =PODate__designer：bind ={ddwrt：DataBind（'i' ，CONCAT（ 'FF2'，$ POS）， '值'， '的ValueChanged'， 'ID'，DDWRT：EscapeDelims（串（@ID））， '@ PODate'）}/> 
< SharePoint：FieldDescription runat =serverid =ff2description {$ Pos}FieldName =PODateControlMode =New/> 
 
< / div> 
 
< / div> 
 
< div class =row form-group potitle> 
< div class =col-sm-4> 
 
< label class =control-label> POtitle< / label> 
 
< / div> 
 
< div class =col-sm-8> 
 
< SharePoint：FormField runat =serverid =ff4 {$ Pos}ControlMode =NewFieldName =POTitle__designer：bind ={ddwrt：DataBind（'i' ，CONCAT（ 'FF4'，$ POS）， '值'， '的ValueChanged'， 'ID'，DDWRT：EscapeDelims（串（@ID））， '@ POTitle'）}/> 
< SharePoint：FieldDescription runat =serverid =ff4description {$ Pos}FieldName =POTitleControlMode =New/> 
< / div> 
 
< / div> 
< / div> 
 
< / div> 
 
< / div> 

解决方案

Pos}ControlMode =NewFieldName =Title __designer：绑定={DDWRT：的DataBind（ 'I'，的concat（ 'FF1'，

POS）， '值'， '的ValueChanged'， 'ID'，DDWRT：EscapeDelims（ string（@ID）），'@ Title'）}/>
< SharePoint：FieldDescription runat =serverid =ff1description {

Pos} FieldName =TitleControlMode =New/>

< / div>


< / div>
< div class =row form-group ponumber>
< div class =col-sm-4>
< label class =control-label> PONumber< / label>

< / div>
< div class =col-sm-8>
< SharePoint：FormField runat =serverid =ff3 {

I was working in custom new form using bootstrap.As I am new to this bootstrap I don't have an idea where to implement.I have tried some codes through div classes,but controls are not aligned properly.

I have to achieve like this design format using custom new form:

Label label
control control


Label label
control control

What I have tried:

<div class=" container">
		
		<div class="row">
		<div class="col-md-6 purchasedetialsR">
		<div  class="row form-group potitle">
		<div class=" col-sm-4">
		<label class="control-label">Title *</label>
			
			
		
		</div>
		<div class="col-sm-8">
		 <SharePoint:FormField runat="server" id="ff1{$Pos}" ControlMode="New" FieldName="Title" __designer:bind="{ddwrt:DataBind('i',concat('ff1',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Title')}"/>
			<SharePoint:FieldDescription runat="server" id="ff1description{$Pos}" FieldName="Title" ControlMode="New"/>
		
		</div>
		
		
		</div>
		<div class="row  form-group ponumber">
		<div class="col-sm-4">
		<label class="control-label">PONumber</label>
	
		</div>
		<div class="col-sm-8">
			<SharePoint:FormField runat="server" id="ff3{$Pos}" ControlMode="New" FieldName="PONumber" __designer:bind="{ddwrt:DataBind('i',concat('ff3',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@PONumber')}"/>
		<SharePoint:FieldDescription runat="server" id="ff3description{$Pos}" FieldName="PONumber" ControlMode="New"/>
		</div>
		
		
		</div> 
		
		</div>
		
<div class="col-md-6 purchasedetialsL">
		
	<div class=" row   form-group POdate">
		<div class="col-sm-4">
		<label class="control-label">PODate</label>
	
		</div>
		<div class="col-sm-8  podat">
		
			<SharePoint:FormField runat="server" id="ff2{$Pos}" ControlMode="New" FieldName="PODate" __designer:bind="{ddwrt:DataBind('i',concat('ff2',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@PODate')}"/>
	    <SharePoint:FieldDescription runat="server" id="ff2description{$Pos}" FieldName="PODate" ControlMode="New"/>
	   
				</div>
		
	 </div>
	 
	 <div class="row form-group potitle">
	 <div class="col-sm-4">

	 <label class="control-label">POtitle</label>

	 </div>
	 
	 <div class="col-sm-8">
	
	 	<SharePoint:FormField runat="server" id="ff4{$Pos}" ControlMode="New" FieldName="POTitle" __designer:bind="{ddwrt:DataBind('i',concat('ff4',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@POTitle')}"/>
							<SharePoint:FieldDescription runat="server" id="ff4description{$Pos}" FieldName="POTitle" ControlMode="New"/>
	 </div>
	 
	 </div>
  </div>
           
		</div>
	
		</div>

解决方案

Pos}" ControlMode="New" FieldName="Title" __designer:bind="{ddwrt:DataBind('i',concat('ff1',

Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Title')}"/> <SharePoint:FieldDescription runat="server" id="ff1description{

Pos}" FieldName="Title" ControlMode="New"/> </div> </div> <div class="row form-group ponumber"> <div class="col-sm-4"> <label class="control-label">PONumber</label> </div> <div class="col-sm-8"> <SharePoint:FormField runat="server" id="ff3{

这篇关于如何使用sharepoint list new form.aspx中的bootstrap创建响应式Web设计的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！