简单的 bootstrap 效果展示

最新推荐文章于 2023-10-17 14:59:34 发布

心晴天

最新推荐文章于 2023-10-17 14:59:34 发布

阅读量1.3k

点赞数

分类专栏：前端文章标签： bootstrap

本文链接：https://blog.csdn.net/qq_29586781/article/details/58639027

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

过了这么久，还是想追求更棒的展示效果，先从bootstrap捡起

1.带有斑马纹的的表单

<!DOCTYPE html>
<html lang="en"><!--Bootstrap使用的某些HTML元素和CSS属性需要文档类型为HTML5 doctype-->
  <head>
    <title>还是这么冲动</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"><!--meta标签。启用响应式-->
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"><!--解决乱码问题-->
    <!-- 需要引入的发布样式 -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/bootstrap-responsive.min.css"/>
  </head>
  
  <body>
  <!--<table class="table table-striped">--><!--斑马纹-->
	<!--<table class="table table-hover">--><!--鼠标悬停，颜色改变-->
	<!--<table class="table table-bordered">--><!--为表格增加边框(border)和圆角(rounded corner)-->
	<table class="table table-striped table-bordered table-hover">
  <thead>
    <tr>
      <th>标题A</th> 
      <th>标题B</th> 
      <th>标题C</th> 
      <th>标题D</th>
    </tr>
  </thead>
  
  <tbody>
  <tr>
  	<td>斑马纹</td>
  	<td>bb</td>
  	<td>cc</td>
  	<td>dd</td>
  </tr>
  <tr>
  	<td>aa</td>
  	<td>你在敲代码</td>
  	<td>cc</td>
  	<td>dd</td>
  </tr>
  <tr>
  	<td>aa</td>
  	<td>bb</td>
  	<td>cc</td>
  	<td>dd</td>
  </tr>
  <tr>
  	<td>aa</td>
  	<td>bb</td>
  	<td>cc</td>
  	<td>代码</td>
  </tr>
  </tbody>
</table>
</body>
</html>

效果展示：

2.被禁用的属性框，只可读的属性框


  <input class="input-xlarge" id="disabledInput" type="text" placeholder="被禁用的属性框..." disabled>
  
  <input class="form-control" type="text" placeholder="只可读（bootstrap.3版本可用）..." readonly>

效果展示：

3.彩色斑马纹表单：

 <tr class="success">
  	<td>success</td>
  	<td>表示成功或积极的行为。</td>
  	<td>a</td>
  	<td>a</td>
  </tr>
  <tr class="error">
  	<td>error</td>
  	<td>表示一个危险或存有潜在危险的行为。</td>
  	<td>b</td>
  	<td>b</td>
  </tr>
  <tr class="warning">
  	<td>warning</td>
  	<td>表示警告，可能需要注意。</td>
  	<td>c</td>
  	<td>c</td>
  </tr>
  <tr class="info">
  	<td>info</td>
  	<td>作为一个默认样式的一个替代样式。</td>
  	<td>d</td>
  	<td>d</td>
  </tr>

效果展示：

4.一些具有象征颜色的表格：

<div class="control-group warning">
  <label class="control-label" for="inputWarning">Input with warning</label>
  <div class="controls">
    <input type="text" id="inputWarning">
    <span class="help-inline">这里有一些问题</span>
  </div>
</div>
 
<div class="control-group error">
  <label class="control-label" for="inputError">Input with error</label>
  <div class="controls">
    <input type="text" id="inputError">
    <span class="help-inline">有一些 error</span>
  </div>
</div>
 
<div class="control-group info">
  <label class="control-label" for="inputInfo">Input with info</label>
  <div class="controls">
    <input type="text" id="inputInfo">
    <span class="help-inline">账户已存在</span>
  </div>
</div>
 
<div class="control-group success">
  <label class="control-label" for="inputSuccess">Input with success</label>
  <div class="controls">
    <input type="text" id="inputSuccess">
    <span class="help-inline">哇偶!</span>
  </div>
</div>

效果展示：