利用BootStrap创建搜索框--」详解

今天学了bootstrap由于官网上没有搜索框,我要做一个网站正好需要,我就自己做了一个搜索框,话不多说直接上代码

下面是jsp代码

 

<div class="col-sm-5" id="so">
             <div class="input-group">
                 <input type="text" class="form-control" onkeydown="onKeyDown(event)"/>
                 <span class="input-group-addon"><a href="#"><i class="glyphicon glyphicon-search"> <span >搜索   </span></i></a></span>
             </div>
</div>    </span></i></a></span>
             </div>
</div> 

<script type="text/javascript">
	/* 搜索框  */
	    function onKeyDown(event){
                //执行搜索点击事件
                 
             }
<script>

这样就创建了一个搜索框,今天写前端遇到的问题比较多 下面来写一下 加深一下印象,首先

 

 

 1.是利用js来接受Action页面map保存的K值,我通过判断k值是否为空,来选择隐藏用户名,如果k值保存的有对象则

显示用户名,隐藏账户登录和注册.

js利用EL来获取k值 判断k值是否为空 下面是代码

action页面

//保存用户名
	ActionContext.getContext().put("name",userBean.getU_name());

jsp页面

	/* 账户隐藏 */
 		var name="${name }";
		if(!$.trim(name)){
			//隐藏用户名称为空
			$("#name1").hide();
		}else{
			// 隐藏登录 注册
			$("#name").hide();
	}

 

html代码

   <!-- 如果名称为空 显示登录 否则显示账户名称 -->
   <div id="name">
      <ul class="nav navbar-nav navbar-right">
            <li><a href="Logindeng"><span class="font">Hi,请  登录</span></a></li>
             <li><a href="InsertUs"><span></span>注册</a></li>
             </ul>
             </div>
            <div id="name1">
             <ul class="nav navbar-nav navbar-right">
             <li><a href="#"><span class="font">Hi , ${name }</span></a></li>
             </ul>
     </div>

 

 

注意的是:  js代码需要放在html下面才能有隐藏div的效果.

 

消除俩个div之间的空隙差不多20的宽度 一直消不掉,需要加一句

<style type="text/css">
 *{margin:0px;padding:0px}
<style>

如果还是去不掉div之间的空隙 需要在div标签里添加

margin:0px;padding:0px