如何使用bootstrap响应表标题/标题(how to make a table header/banner responsive with bootstrap)
我想根据窗口大小制作表格横幅/标题响应大小。 布局显示了我希望如何保持横幅/标题的设计,即使它们每次调整窗口时都会重新调整大小。 这是布局看起来的样子:
或者相同的布局设计只是调整了窗口
这是我到目前为止的代码:
<div class="table-responsive"> <table border="0" width="100%" height=60 cellpadding="0" cellspacing="0" class="table table-condenseď"> <tr> <td width="200"> <a href="http://www.example.com" target=_blank> <img src="img1.png" width="200" height="100" > </a> </td> <td width="15" height="38" > <img src="img2.png" width="39" height="33" > </td> <td width="100" style="color:white; font-weight: bold; color:blue;"> <font size="3"></font> <font size="5"> <?php echo $_SESSION['login']; ?> </font> </td> <td width="600" height="45" > <img src="img3.PNG" width="900" height="100" > </td> <td width="100" height="45" > <ul> <font color="blue" size="2"> <?php echo date(" d F Y ",time());?> </font> <li > <a href="logout.php">Logout</a> </li> </ul> </td> </tr> </table> </div>我已经尝试过这段代码但是我得到了原始大小的所有图像,并且所有图像都在一个小窗口中堆叠在一起。
<div class="row"> <div class="col-sm-3"> <img src="img1.png" > </a> </div> <div class="col-sm-1"> <img src="img2.png" > </div> <div class="col-sm-2"> <font size="3"></font> <font size="5"> <?php echo $_SESSION['login']; ?> </font> </div> <div class="col-sm-4"> <img src="img3.PNG" > </div> <div class="col-sm-2"> <ul> <font color="blue" size="2"> <?php echo date(" d F Y ",time());?> </font> <li > <a href="logout.php">Logout</a> </li> </ul> </div> </div>I want to make a table banner/header responsive re sizing depending on the window size. The layout shows how I want to keep the design of the banner/header even though they would re-size every time it the windows adjusts. this is how the layout look looks:
or same layout design just adjusted the window
and this is the code that I have so far:
<div class="table-responsive"> <table border="0" width="100%" height=60 cellpadding="0" cellspacing="0" class="table table-condenseď"> <tr> <td width="200"> <a href="http://www.example.com" target=_blank> <img src="img1.png" width="200" height="100" > </a> </td> <td width="15" height="38" > <img src="img2.png" width="39" height="33" > </td> <td width="100" style="color:white; font-weight: bold; color:blue;"> <font size="3"></font> <font size="5"> <?php echo $_SESSION['login']; ?> </font> </td> <td width="600" height="45" > <img src="img3.PNG" width="900" height="100" > </td> <td width="100" height="45" > <ul> <font color="blue" size="2"> <?php echo date(" d F Y ",time());?> </font> <li > <a href="logout.php">Logout</a> </li> </ul> </td> </tr> </table> </div>I have tried this code but I get all the images in their original size and all of them stacking on top of each other in a small window.
<div class="row"> <div class="col-sm-3"> <img src="img1.png" > </a> </div> <div class="col-sm-1"> <img src="img2.png" > </div> <div class="col-sm-2"> <font size="3"></font> <font size="5"> <?php echo $_SESSION['login']; ?> </font> </div> <div class="col-sm-4"> <img src="img3.PNG" > </div> <div class="col-sm-2"> <ul> <font color="blue" size="2"> <?php echo date(" d F Y ",time());?> </font> <li > <a href="logout.php">Logout</a> </li> </ul> </div> </div>最满意答案
您可以使用网格执行此操作,如下所示
.col-xs-1, .col-xs-2, .col-xs-5{ border:1px solid #000; border-left:none; height:70px; } .test:first-child { border-left:1px solid #000; }<html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid" style="margin:12px;"> <div class="row test"> <div class="col-xs-2"></div> <div class="col-xs-2"></div> <div class="col-xs-1"></div> <div class="col-xs-5"></div> <div class="col-xs-2"></div> </div> </div> </body> </html>You can do this using grid as below
.col-xs-1, .col-xs-2, .col-xs-5{ border:1px solid #000; border-left:none; height:70px; } .test:first-child { border-left:1px solid #000; }<html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid" style="margin:12px;"> <div class="row test"> <div class="col-xs-2"></div> <div class="col-xs-2"></div> <div class="col-xs-1"></div> <div class="col-xs-5"></div> <div class="col-xs-2"></div> </div> </div> </body> </html>
更多推荐
发布评论