Bootstrap CSS2

1.Bootstrap css2

1.在网页中显示代码的两种方式：

1 <!--独立的块元素和内联元素-->
2 <pre>
3     <p>这是一个独立的块</p>
4 </pre>
5 <code>
6     <p>这是一个内联元素</p>
7 </code>

 

2.表格

table 表格的基本样式
thead 表格标题
tbody 表格主体
tr 需要thead或者tbody作为父元素
td 单元格，需要tr作为父元素
th 特殊的单元格，使用在thead和tr之下
   

 

3.表单

1.基本样式的表单（垂直表单）

  1. 向父<form>添加role=“form”
  2. 向含有标签和控件的<div>中添加，class.form.group
  3. 向所有文本标签添加：class.form-control
 1 <body><form role="form" >
 2     <div class="form-group">
 3         <!--一个输入框-->
 4         <input type="text" placeholder="请在这里输入您的用户名" class="form-control">
 5         <input type="text" placeholder="请在这里输入您的密码" class="form-control">
 6     </div>
 7     <div class="form-group">
 8         <!--一个单选框-->
 9         <input type="radio" name="sex" value="male" class="form-control">男<br>
10         <input type="radio" name="sex" value="female" class="form-control">女<br>
11     </div>
12     <div class="form-group">
13         <!--一个提交按钮-->
14         <input type="submit" value="提交">
15     </div>
16 
17 </form>
18 
19 
20 
21 </body>

 

2.显示内联样式的表单（如果要把标签和控件放在一行）

 1 <!--在父<form>中添加form-inline-->
 2 <body><form role="form" class="form-inline">
 3     <div class="form-group">
 4         <input type="text" placeholder="请在这里输入您的用户名" class="form-control">
 5         <input type="text" placeholder="请在这里输入您的密码" class="form-control">
 6     </div>
 7     <div class="form-group">
 8         <input type="radio" name="sex" value="male" class="form-control">男<br>
 9         <input type="radio" name="sex" value="female" class="form-control">女<br>
10     </div>
11     <div class="form-group">
12         <input type="submit" value="提交">
13     </div>
14 
15 </form>
16 
17 
18 
19 </body>

PS：默认情况下，Bootstrap 中的 input、select 和 textarea 有 100% 宽度。在使用内联表单时，您需要在表单控件上设置一个宽度。

 

3.水平表单

  1. <form>中设置除了role="form"外，还要设置class="form-horizontal"
  2. 第二步同上
  3. 类中添加.control.lable
 1 <!--在form中添加class="form-horizontal"-->
 2 <body><form role="form" class="form-horizontal" >
 3     <div class="form-group">
 4         <!--class中"control-lable"-->
 5         <input type="text" placeholder="请在这里输入您的用户名" class="control-label" size="20px">
 6         <input type="text" placeholder="请在这里输入您的密码" class="control-lable" size="20px">
 7     </div>
 8     <div class="form-group">
 9         <input type="radio" name="sex" value="male" class="control-lable" size="20px">男<br>
10         <input type="radio" name="sex" value="female" class="control-lable" size="20px">女<br>
11     </div>
12     <div class="form-group">
13         <input type="submit" value="提交" size="20px" class="control-lable">
14     </div>
15 
16 </form>

 

4.支持的表单控件

简单介绍一些bootstrap支持的上面没有用到的表单控件，bootstrap本身对html的原生控件有着很好的支持

文本域：

<!--文本域"-->
<body><form role="form"  >
    <div class="form-group">
        <textarea rows="3" class="form-control" placeholder="最多输入10字" maxlength="10"></textarea>
    </div>

</form>
</body>

 

单选和多选列表：

 1 <!--单选和多选选择列表-->
 2 <body><form role="form"  >
 3     <div class="form-group">
 4         <select  class="form-control">
 5             <option>百度</option>
 6             <option>谷歌</option>
 7             <option>搜狐</option>
 8             <option>雅虎</option>
 9             <option>MSN</option>
10         </select>
11     </div>
12     <div class="form-group">
13         <select multiple class="form-control">
14             <option>1</option>
15             <option>2</option>
16             <option>3</option>
17             <option>4</option>
18             <option>5</option>
19         </select>
20     </div>
21 
22 </form>
23 </body>

 

静态控件：

1 <!--静态控件-->
2 <body><form role="form"  >
3     <div class="form-group">
4         <button class="form-control-static">这是一个静态控件</button>
5     </div>
6 </form>
7 </body>

 

表单控制状态：

<!--表单控制状态-->
<body><form role="form"  >
    <div class="form-group">
        <input class="form-control" text="text" value="点击时获取焦点">
    </div>
    <div class="form-group has-warning">
        <input class="form-control" text="text" value="这是一个警告框">
    </div>
    <div class="form-group has-error">
        <input class="form-control" text="text" value="这是一个错误提示框">
    </div>
    <div class="form-group has-success">
        <input class="form-control" text="text" value="这是一个成功提示框">
    </div>
</form>
</body>

 

表单大小：

 1 <!--表单大小-->
 2 <body><form role="form"  >
 3     <div class="form-group">
 4         <!--预定义-->
 5         <input class="form-control input-lg" text="text" value=".input.lg">
 6     </div>
 7     <div class="form-group has-warning">
 8         <input class="form-control input-sm" text="text" value=".input.sm">
 9     </div>
10     <div class="form-group has-error">
11         <!--自定义-->
12         <input class="form-control col-lg-2"   text="text" value=".col-lg-2">
13     </div>
14     <div class="form-group has-success">
15         <input class="form-control col-lg-3" text="text" value=".col-lg-3">
16     </div>
17 </form>
18 </body>

 

posted on 2017-05-02 15:54  I_noname  阅读(168)  评论(0)  编辑  收藏  举报

导航