単純で美しいbootstrapフォームを作成する全プロセス

24744 ワード

先端

参考文献
Bootstrapフォームレイアウトスタイルbootstrapログイン登録ページを作成Bootstrapログインボックス適応水平中央+垂直中央
新規およびインポート
本人はeclipseを使用しています.空白のWebプロジェクトを作成し、indexを作成します.jsp. bootStrapとjQueryのインポート

<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js">script>
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js">script>

フォーム＃フォーム＃

form>classでフォーム全体のスタイルを設定します.次はdivブロックです.それぞれ
ブロックはフォームの1行を表し、ブロックに複数のコンポーネントが入っている場合は、スペースが十分である場合、この行は2つのコンポーネントを横に並べます.
ここにと

を入れました
lableは標識を表し、divブロックは

であり、このdivブロックの中にはが入っている.
これにより、ネストはdivのcol-sm-4プロパティを使用して有効になり、前に位置を空けることができます.
特定の完全なコード



<html>

<head>
<meta charset="utf-8">
<title>Insert title heretitle>
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" /> 
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js">script>
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js">script>
<style type="text/css">
    body{background: url(img/4.jpg) no-repeat;background-size:cover;}  
 .container{
    display:table;
    height:100%;

}

.row{
    display: table-cell;
    vertical-align: middle;
}
/* centered columns styles */
.row-centered {
    text-align:center;
}
.col-centered {
    display:inline-block;
    float:none;
    text-align:left;
    margin-right:-4px;
}


style>
head>
<body>
<div class="container">
	<div class="row row-centered">
		<div class="well col-md-6 col-centered">
		
		
<form class="form-horizontal center-block" role="form">
	<legend>            legend>
		<div class="form-group ">
        <label class="col-sm-2 control-label" for="ds_host">   label>
        <div  class="col-sm-4 ">
           <input class="form-control" id="ds_host" type="text" placeholder="     "/>
        div>
        div>
        <div class="form-group ">
        <label class="col-sm-2 control-label" for="ds_host">  label>
        <div class="col-sm-4">
           <input class="form-control" id="ds_host" type="text" placeholder="     "/>
        div>
        div>
     <div class="form-group ">
	 <label class="col-sm-2 control-label" for="ds_host">    label>
	<div class="col-sm-4">
	   <select id="disabledSelect" class="form-control">
	      <option>  option>
	      <option>  option>
	      <option>   option>
	   select>
	div>
	div>
  <div class="form-group ">
        <label class="col-sm-2 control-label" for="ds_host"> label>
        <div class="col-sm-4">
       		<input class="btn btn-default pull-right" id="ds_host" type="submit" value="    "/>
           <input class="btn btn-default pull-right" id="ds_host" type="button" value="  "/>
           
        div>
        div>
form>

		div>
	div>
div>


body>
html>

中央揃えと背景図の設定
バックグラウンドマップを設定する方法は、bodyにcssでbackgrondのプロパティを追加します.中央にネストとdivを用い,最外層の3つのdivを中央に用いたが,ここでは参考文献3の内容を用いた.
最終結果

JAvascript-call、apply、bindメソッドの理解

JSページジャンプを完了して参照する方法|添付:オブジェクトをループする