2017-03-13 18:15:31 boonyaxnn 阅读数 1174

Bootstrap 支持的一些表格元素:

可用于表格中的tablede 样式

可用于表格中的<tr>, <th> 和 <td>

html与css代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.min.css">
  <style>
  	div{
  		font-family: '宋体';	
  		color: #0A0A0A;
  	}
  	tr,td{
  		width:30px;
  		height: 50px;
  		font-size:24px;
  	}
  </style>
  </head>

  <body>
     <div class="container">
      <div class="header">
	<h1>表格</h1>
      </div>  
        <p class="text-muted" style="font-size: 18px;">小妞妞的成绩单:</p>  
	    <!--
	       <p class="text-muted">本行内容是减弱的</p>
	     -->                               
      <table class="table table-striped table-bordered table-hover table-condensed">
      	<!--
      		.table-striped	在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)
      		.table-bordered	为所有表格的单元格添加边框
      		.table-hover	在 <tbody> 内的任一行启用鼠标悬停状态
      		.table-condensed	让表格更加紧凑
      	-->
        <thead>
          <tr class="active">
            <th>科目</th>
            <th>成绩</th>
          </tr>
        </thead>
        <tbody>
          <tr class="success">
            <td>语文</td>
            <td>90</td>
          </tr>
          <tr>
            <td>数学</td>
            <td>95</td>
          </tr>
          <tr class="warning">
            <td>英语</td>
            <td>85</td>
          </tr>
          <tr class="danger">
        <!--
            .active 对某一特定的行或单元格应用悬停颜色;.success表示一个成功的或积极的动作;
      	    .warning 表示一个需要注意的警告;.danger	表示一个危险的或潜在的负面动作;
      	-->
            <td>综合</td>
            <td>200</td>
          </tr>
        </tbody>
      </table>
    </div>

    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>

</html

效果图


2017-11-30 23:12:44 sunnyboysix 阅读数 451

今天回来收拾一下有点晚了,就简单的写一个知识点关于表格的制作,我提炼一下具体的写法:

<table class="table table-hover">
	  		<thead>
	  			<tr class="danger">
	  			<th>first</th>
	  			<th>second</th>
	  			<th>third</th>
	  			</tr>
	  		</thead>
	  		<tbody>
	  			<tr>
	  				<td>make</td>
	  				<td>noese</td>
	  				<td>snake</td>
	  			</tr>
	  			<tr class="active">
	  				<td>nose</td>
	  				<td>nice</td>
	  				<td>miss</td>
	  			</tr>
	  			<tr class="danger">
	  				<td>pole</td>
	  				<td>pose</td>
	  				<td>plsy</td>
	  			</tr>
	  		</tbody>
	  	</table>
	  	
首先是需要写一个table类,其次thead  tbody用法

还有在class里面可以添加一个类可以改变一行的颜色

因为比较简单只需要多练练手,下面会给出一个代码样例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
		<script type="text/javascript" src="js/bootstrap.js" ></script>
		<link rel="stylesheet" href="css/bootstrap.css" />
	</head>
	<body>
	  <div class="container">
	  	<table class="table table-hover">
	  		<thead>
	  			<tr class="danger">
	  			<th>first</th>
	  			<th>second</th>
	  			<th>third</th>
	  			</tr>
	  		</thead>
	  		<tbody>
	  			<tr>
	  				<td>make</td>
	  				<td>noese</td>
	  				<td>snake</td>
	  			</tr>
	  			<tr class="active">
	  				<td>nose</td>
	  				<td>nice</td>
	  				<td>miss</td>
	  			</tr>
	  			<tr class="danger">
	  				<td>pole</td>
	  				<td>pose</td>
	  				<td>plsy</td>
	  			</tr>
	  		</tbody>
	  	</table>
	  	
	  	<hr />
	  	<table class="table table-responsive">
	  	<thead>
	  		<tr class="success">
	  			<th>incase</th>
	  			<th>innose</th>
	  			<th>innice</th>
	  		</tr>
	  	</thead>
	  	
	  	<tbody>
	  	<tr class="danger">
	  		<td>make</td>
	  		<td>inces</td>
	  		<td>kill</td>
	  	</tr>
	  	
	  	<tr class="danger">
	  		<td>tree</td>
	  		<td>tess</td>
	  		<td>tere</td>
	  	</tr>
	  	
	  	<tr class="success">
	  		<td>nose</td>
	  		<td>mike</td>
	  		<td>tesi</td>
	  	</tr>
	  	</tbody>
	  	</table>
	  	
	  	<hr />
	  	<table class="table table-bordered">
	  		<thead>
	  			<tr>
	  				<th>one</th>
	  				<th>two</th>
	  				<th>three</th>
	  			</tr>
	  		</thead>
	  		
	  		<tbody>
	  			<tr>
	  				<td>sdf</td>
	  				<td>fgh</td>
	  				<td>kmi</td>
	  			</tr>
	  			
	  			<tr>
	  				<td>suy</td>
	  				<td>ijm</td>
	  				<td>imk</td>
	  			</tr>
	  			
	  			<tr>
	  				<td>mki</td>
	  				<td>olp</td>
	  				<td>ert</td>
	  			</tr>
	  		</tbody>
	  	</table>
	  </div>
	</body>
</html>

内容比较简单但是用到的地方比较多,多练习一下,下次有需要可以结合写一个DOM。

2019-09-26 21:45:44 SharkpoPo 阅读数 14
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <script src="JQuery/jquery-3.4.1.min.js"></script>
    <script src="bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</head>

<body>
<form name="myForm">
    <table class="table table-bordered" id="tab" name="tab" border="0px">
        <tr>
            <td>编号</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>地址</td>
            <td>操作</td>
            <td>操作</td>
        </tr>
        <tr id="tr1" onmouseOver="onmouseOverMethod(this)" onmouseOut="onmouseOutMethod(this)" onclick="onClickChangeStyle(this)">
            <td>1</td>
            <td>小明</td>
            <td>20</td>
            <td>浙江</td>
            <td><a href="#" onclick="addRow()">添加</a></td>
            <td><a href="#" onclick="deleteRow(this)">删除</a></td>
        </tr>
        <tr id="tr2" onmouseOver="onmouseOverMethod(this)" onmouseOut="onmouseOutMethod(this)" onclick="onClickChangeStyle(this)">
            <td>2</td>
            <td>亲贤臣</td>
            <td>16</td>
            <td>江西</td>
            <td><a href="#" onclick="addRow()">添加</a></td>
            <td><a href="#" onclick="deleteRow(this)">删除</a></td>
        </tr>
        <tr id="tr3" onmouseOver="onmouseOverMethod(this)" onmouseOut="onmouseOutMethod(this)" onclick="onClickChangeStyle(this)">
            <td>3</td>
            <td>郭海涛</td>
            <td>20</td>
            <td>上海</td>
            <td><a href="#" onclick="addRow()">添加</a></td>
            <td><a href="#" onclick="deleteRow(this)">删除</a></td>
        </tr>
    </table>
</form>
</body>
<script>
    var selectRow=null;
    //单击时,改变样式;
    function onClickChangeStyle(obj){
        //获取表格对象;
        var tab = document.getElementById("tab");
        //获取当前行选择下标;
        var currentRowIndex = obj.rowIndex;
        //获取表格所有行数;
        var tablRows = tab.rows.length;
        //循环表格的所有行;并且选择的当前行,改变背景颜色;
        for(var i = 1;i<tablRows;i=i+1){
            if(currentRowIndex == i){
                //为选中的当前,设置css样式;
                selectRow  = tab.rows[i];
                tab.rows[i].className= "onClickStyle";
            }else{
                //把没有选中的行的背景样式设置为白色;
                tab.rows[i].className= "hideStyle";
            }
        }
    }

    //鼠标移入时,改变颜色;
    function onmouseOverMethod(selectThis){
        selectThis.className="displayStyle";
        if(selectRow==selectThis){
            selectThis.className="onClickStyle";
        }
    }

    //鼠标移除时,改变背景颜色;
    function onmouseOutMethod(selectThis){
        selectThis.className="hideStyle";
        if(selectRow == selectThis){
            selectThis.className="onClickStyle";
        }
    }

    //添加行;
    function addRow(){
        var tab = document.getElementById('tab');
        var rowIndex = tab.rows.length+1;

        //添加一行;
        var tr  = tab.insertRow();
        tr.onmouseover = tr.className="displayStyle" ;
        tr.onmouseout = tr.className="hideStyle" ;
        tr.onclick=function (){this.className="onClickChangeStyle(this)";}

        var td2 = tr.insertCell();
        var td3 = tr.insertCell();
        var td4 = tr.insertCell();
        var td5 = tr.insertCell();
        var td6 = tr.insertCell();
        var td7 = tr.insertCell();

        td2.innerHTML = ""+rowIndex;
        td3.innerHTML = "无";
        td4.innerHTML = "无";
        td5.innerHTML = "无地址";
        td6.innerHTML = "<a href='#' onclick='addRow()'>添加</a>";
        td7.innerHTML = "<a href='#' onclick='deleteRow(this)'>删除</a>";

        //初始化行;
        initRows(tab);
    }

    //初始化行,设置序列号;
    function initRows(tab){
        var tabRows = tab.rows.length;
        for(var i = 0;i<tabRows.length;i++){
            tab.rows[i].cells[0].firstChild.value=i;
        }
    }

    //删除行;(obj代表连接对象)
    function deleteRow(obj){
        var tab = document.getElementById('tab');
        //获取tr对象;
        var tr = obj.parentNode.parentNode;

        if(tab.rows.length>2){
            //tr.parentNode,指的是,table对象;移除子节点;
            tr.parentNode.removeChild(tr);
        }
        //重新生成行号;
        initRows(document.getElementById('tab'));
    }
</script>
</html>
2016-12-12 10:17:45 nongweiyilady 阅读数 23988

学习了runoob.com网站中的bootstrap内容之后,参照其中的内容自己做一下总结,以便帮助在这方面有疑惑的朋友,也有助于自己更好的消化所学的内容。

我们应该庆幸自己活在这样一个互联网时代,开放、共享。很多之前我们费尽心思去实现的效果已经有前辈为我们总结出来并做成很好的框架,共享出来让我们使用,使得我们轻松就能实现很漂亮的效果。

下面就使用一个实例来讲一下如何使用Bootstrap现成的css样式直接加在我们的table表格上,我们只需要写很少的代码就能轻松制作漂亮表格。

比如我们要制作一个像下面这个表格:

有了Bootstrap,只需写好html内容结构,加上Bootstrap写好的专用于表格的类样式即可实现图中的效果。

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BootStrap制作表格</title>
    <link type="text/css" rel="stylesheet" href="../libs/bootstrap.css">
</head>
<body>
    <div class="container">
        <table style="width: 500px;" class="table table-striped table-hover table-bordered">
            <thead>
                <tr>
                    <th>表头1</th>
                    <th>表头2</th>
                    <th>表头3</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>第1行第1列</td>
                    <td>第1行第2列</td>
                    <td>第1行第3列</td></tr>
                <tr>
                    <td>第2行第1列</td>
                    <td>第2行第2列</td>
                    <td>第2行第3列</td></tr>
                <tr>
                    <td>第3行第1列</td>
                    <td>第3行第2列</td>
                    <td>第3行第3列</td></tr>
                </tbody>
        </table>
    </div>
</body>
</html>
在这里为了方便美观我给他加了一个宽度500px;我们这里使用一个<div class="container"> 来作为基础面板包裹我们的table。container也属于bootstrap类样式,在webstorm中我们按住ctrl+点击左键进入container(任何脚本样式你都这样查看它里边的实现,前提是要先引入),可以看到bootstrap的属性如下:

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
containner可以适应浏览器为我们设置外边距,设置固定左右内边距15px。


接下来说一下步骤:

第一步:引入bootstrap脚本文件:

<link type="text/css" rel="stylesheet" href="../libs/bootstrap.css">
这个脚本你可以在 http://getbootstrap.com 官网中下载。


第二步:写html内容结构代码。

只设置了宽度,没有加入其他任何样式的裸妆他是这样子的:

第三步:为table加入bootstrap样式:

 <table style="width: 500px;" class="table table-striped table-hover table-bordered">
以上三步即可得到第一幅图的效果。


接下来讲解一下这些样式的效果,runoob.com列出了比较简明的解析:


在行列中,也可以使用.active  .success .danger这些用于行列的样式。比如我加入行列样式:

效果是这样的:


大家可以根据自己的需要来加入样式。



2019-09-15 22:08:26 PanHanJia 阅读数 64

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <script src="JQuery/jquery-3.4.1.min.js"></script>
    <script src="bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</head>

<body>
<form name="myForm">
    <table class="table table-bordered" id="tab" name="tab" border="0px">
        <tr>
            <td>编号</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>地址</td>
            <td>操作</td>
            <td>操作</td>
        </tr>
        <tr id="tr1" onmouseOver="onmouseOverMethod(this)" onmouseOut="onmouseOutMethod(this)" onclick="onClickChangeStyle(this)">
            <td>1</td>
            <td>小明</td>
            <td>20</td>
            <td>浙江</td>
            <td><a href="#" onclick="addRow()">添加</a></td>
            <td><a href="#" onclick="deleteRow(this)">删除</a></td>
        </tr>
        <tr id="tr2" onmouseOver="onmouseOverMethod(this)" onmouseOut="onmouseOutMethod(this)" onclick="onClickChangeStyle(this)">
            <td>2</td>
            <td>亲贤臣</td>
            <td>16</td>
            <td>江西</td>
            <td><a href="#" onclick="addRow()">添加</a></td>
            <td><a href="#" onclick="deleteRow(this)">删除</a></td>
        </tr>
        <tr id="tr3" onmouseOver="onmouseOverMethod(this)" onmouseOut="onmouseOutMethod(this)" onclick="onClickChangeStyle(this)">
            <td>3</td>
            <td>郭海涛</td>
            <td>20</td>
            <td>上海</td>
            <td><a href="#" onclick="addRow()">添加</a></td>
            <td><a href="#" onclick="deleteRow(this)">删除</a></td>
        </tr>
    </table>
</form>
</body>
<script>
    var selectRow=null;
    //单击时,改变样式;
    function onClickChangeStyle(obj){
        //获取表格对象;
        var tab = document.getElementById("tab");
        //获取当前行选择下标;
        var currentRowIndex = obj.rowIndex;
        //获取表格所有行数;
        var tablRows = tab.rows.length;
        //循环表格的所有行;并且选择的当前行,改变背景颜色;
        for(var i = 1;i<tablRows;i=i+1){
            if(currentRowIndex == i){
                //为选中的当前,设置css样式;
                selectRow  = tab.rows[i];
                tab.rows[i].className= "onClickStyle";
            }else{
                //把没有选中的行的背景样式设置为白色;
                tab.rows[i].className= "hideStyle";
            }
        }
    }

    //鼠标移入时,改变颜色;
    function onmouseOverMethod(selectThis){
        selectThis.className="displayStyle";
        if(selectRow==selectThis){
            selectThis.className="onClickStyle";
        }
    }

    //鼠标移除时,改变背景颜色;
    function onmouseOutMethod(selectThis){
        selectThis.className="hideStyle";
        if(selectRow == selectThis){
            selectThis.className="onClickStyle";
        }
    }

    //添加行;
    function addRow(){
        var tab = document.getElementById('tab');
        var rowIndex = tab.rows.length+1;

        //添加一行;
        var tr  = tab.insertRow();
        tr.onmouseover = tr.className="displayStyle" ;
        tr.onmouseout = tr.className="hideStyle" ;
        tr.onclick=function (){this.className="onClickChangeStyle(this)";}

        var td2 = tr.insertCell();
        var td3 = tr.insertCell();
        var td4 = tr.insertCell();
        var td5 = tr.insertCell();
        var td6 = tr.insertCell();
        var td7 = tr.insertCell();

        td2.innerHTML = ""+rowIndex;
        td3.innerHTML = "无";
        td4.innerHTML = "无";
        td5.innerHTML = "无地址";
        td6.innerHTML = "<a href='#' onclick='addRow()'>添加</a>";
        td7.innerHTML = "<a href='#' onclick='deleteRow(this)'>删除</a>";

        //初始化行;
        initRows(tab);
    }

    //初始化行,设置序列号;
    function initRows(tab){
        var tabRows = tab.rows.length;
        for(var i = 0;i<tabRows.length;i++){
            tab.rows[i].cells[0].firstChild.value=i;
        }
    }

    //删除行;(obj代表连接对象)
    function deleteRow(obj){
        var tab = document.getElementById('tab');
        //获取tr对象;
        var tr = obj.parentNode.parentNode;

        if(tab.rows.length>2){
            //tr.parentNode,指的是,table对象;移除子节点;
            tr.parentNode.removeChild(tr);
        }
        //重新生成行号;
        initRows(document.getElementById('tab'));
    }
</script>
</html>

MVC表格的制作

阅读数 44

没有更多推荐了,返回首页