Latest web development tutorials

kotak input Foundation? Ukuran

Menggunakan kolom grid untuk mengatur ukuran kotak input, seperti .large-6 , .medium-6 , dan sebagainya.

Lebih banyak pengetahuan sistem grid, Anda dapat klik pada sistem grid tutorial.

contoh

<Form>
<Class Div = "row">
<Div class = "besar-10 menengah-7 kolom">
<Label> besar-10 menengah 7 (100% dari kecil)
<Input type = "text" placeholder = "Nama">
</ Label>
</ Div>
</ Div>

<Class Div = "row">
<Div class = "kecil-5 kolom">
<Label> kecil-5
<Input type = "text" placeholder = "Nama">
</ Label>
</ Div>
</ Div>

<Class Div = "row">
<Class Div = "menengah-3 kolom">
<Label> menengah-3 (100 % dari kecil)
<Input type = "text" placeholder = "Nama">
</ Label>
</ Div>
</ Div>
</ Form>

Coba »

Sama dengan ukuran kolom

Berikut ini menggambarkan contoh kolom dengan ukuran yang sama:

contoh

<Form>
<Class Div = "row">
<Class Div = "menengah-4 kolom">
<Label> menengah-4 (100 % dari kecil, ditumpuk)
<Input type = "text" placeholder = "Nama">
</ Label>
</ Div>

<Class Div = "menengah-4 kolom">
<Label> menengah-4 (100 % dari kecil, ditumpuk)
<Input type = "text" placeholder = "Nama">
</ Label>
</ Div>

<Class Div = "menengah-4 kolom">
<Label> menengah-4 (100 % dari kecil, ditumpuk)
<Input type = "text" placeholder = "Nama">
</ Label>
</ Div>
</ Div>
</ Form>

Coba »

tag inline

Jika Anda ingin konten label Anda ditampilkan di sebelah kiri (bukan atas), Anda dapat menandai label elemen pada kotak input kiri kolom yang berbeda dan menggunakan .inline kelas untuk mengatur pusat vertikal:

contoh

<Form>
<Class Div = "row">
<Class Div = "kecil-8 ">
<Class Div = "row">
<Div class = "kecil-3 kolom">
<Label untuk = "nama" class = "right inline"> Nama </ label>
</ Div>
<Div class = "kecil-9 kolom">
<Input type = "text" id = "nama" placeholder = "Nama Pertama ..">
</ Div>
</ Div>
</ Div>
</ Div>
</ Form>

Coba »

Depan dan label belakang

Anda dapat <div class="row collapse"> > menambahkan elemen tab depan dan belakang: < element class="postfix"> atau < element class="prefix"> . Anda dapat menggunakan sistem grid untuk mengatur ukuran label depan dan belakang:

contoh

<Form>
<Class Div = "row">
<Div class = "besar-6 kolom">
<Class Div = "baris runtuhnya awalan -radius">
<Div class = "kecil-3 kolom">
<Span class = "awalan"> Awalan </ span>
</ Div>
<Div class = "kecil-9 kolom">
<Input type = "text" placeholder = "nilai">
</ Div>
</ Div>
</ Div>
<Div class = "besar-6 kolom">
<Class Div = "baris runtuhnya postfix -radius">
<Div class = "kecil-9 kolom">
<Input type = "text" placeholder = "nilai">
</ Div>
<Div class = "kecil-3 kolom">
<Span class = "postfix"> Postfix </ span>
</ Div>
</ Div>
</ Div>
</ Div>
</ Form>

Coba »

Depan dan tombol tab belakang

Anda dapat menggunakan <a> menambahkan elemen .button kelas untuk mengatur depan dan tombol belakang:

contoh

<A Href = "#" class = "postfix button"> Go </ a>

Coba »

tombol label putaran depan dan belakang

contoh

<Form>
<Class Div = "row">
<Div class = "besar-6 kolom">
<Class Div = "baris runtuhnya awalan -radius">
<Div class = "kecil-3 kolom">
<Span class = "awalan"> Awalan </ span>
</ Div>
<Div class = "kecil-9 kolom">
<Input type = "text" placeholder = "nilai">
</ Div>
</ Div>
</ Div>
<Div class = "besar-6 kolom">
<Class Div = "baris runtuhnya postfix -radius">
<Div class = "kecil-9 kolom">
<Input type = "text" placeholder = "nilai">
</ Div>
<Div class = "kecil-3 kolom">
<Span class = "postfix"> Postfix </ span>
</ Div>
</ Div>
</ Div>
</ Div>
<Class Div = "row">
<Div class = "besar-6 kolom">
<Class Div = "baris runtuhnya awalan -round">
<Div class = "kecil-3 kolom">
<A Href = "#" class = "button prefix"> Go </ a>
</ Div>
<Div class = "kecil-9 kolom">
<Input type = "text" placeholder = "nilai">
</ Div>
</ Div>
</ Div>
<Div class = "besar-6 kolom">
<Class Div = "baris runtuhnya postfix -round">
<Div class = "kecil-9 kolom">
<Input type = "text" placeholder = "nilai">
</ Div>
<Div class = "kecil-3 kolom">
<A Href = "#" class = "button postfix"> Go </ a>
</ Div>
</ Div>
</ Div>
</ Div>
</ Form>

Coba »