响应式表格或引导网格系统 [英] Responsive table or bootstraps grid system

查看：22
本文介绍了响应式表格或引导网格系统的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试找出使某个页面具有响应性的最佳方法.https://secure.taxcollector.com/ptaxweb/ 如果您点击接受，它会将您带到我正在尝试使用引导程序进行响应的页面.

现在我有一张桌子，但是当我使用桌子时，它弄乱了我按钮的间距:

<tr><td><strong>1.通过单击一个"来搜索属性在以下按钮中:</strong></td></tr><tr><td><input type="button" class="searchByActiveButton" onclick="changeSearchBy('accountNumber')" value="PROPERTY ID" id="accountNumber" name="accountNumber"/></td><td><input type="button" class="searchByButton" onclick="changeSearchBy('name')" value="OWNER NAME" id="name" name="name"/></td><td><input type="button" class="searchByButton" onclick="changeSearchBy('location')" value="PROPERTY ADDRESS" id="location" name="location"/></td><td><input type="button" class="searchByButton" onclick="changeSearchBy('billingAddress')" value="BILLING ADDRESS" id="billingAddress" name="billingAddress"/></td></tr>

或...

<div class="col-lg-12"><div class="form-group"><标签><强>1.通过单击一个"来搜索属性在以下按钮中:</strong></label>

<div id="searchoptions" class="row"><div class="form-group"><div class="col-lg-3"><button type="button" class="btn btn-default" id="accountNumber" name="accountNumber">PROPERTY ID</button>

<div class="col-lg-3"><button type="button" class="btn btn-default" id="name" name="name">OWNER NAME</button>

<div class="col-lg-3"><button type="button" class="btn btn-default" id="location" name="location">属性地址</button>

<div class="col-lg-3"><button type="button" class="btn btn-default" id="billingAddress" name="billingAddress">BILLING ADDRESS</button>

改用网格系统会更好吗?是否可以重新创建这些表并仅使用引导网格系统使其响应?

解决方案

您也可以使引导程序选项卡具有响应性...只需使用 class='table 响应性'

检查片段

<头><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.4/jquery.min.js"></script><script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><style type="text/css"></风格><身体><table class="display table-responsive" cellpacing="0" width="100%"><tr><td><strong>1.通过单击一个"来搜索属性以下按钮:</strong></td></tr><tr><td><input type="button" class="searchByActiveButton" onclick="changeSearchBy('accountNumber')" value="PROPERTY ID" id="accountNumber" name="accountNumber"/></td><td><input type="button" class="searchByButton" onclick="changeSearchBy('name')" value="OWNER NAME" id="name" name="name"/></td><td><input type="button" class="searchByButton" onclick="changeSearchBy('location')" value="PROPERTY ADDRESS" id="location" name="location"/></td><td><input type="button" class="searchByButton" onclick="changeSearchBy('billingAddress')" value="BILLING ADDRESS" id="billingAddress" name="billingAddress"/></td></tr></html>

使用网格系统均匀间隔的按钮

<头><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.4/jquery.min.js"></script><script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><style type="text/css">.btn-sm {显示:内联块；}</风格><身体><div class="container-fluid"><div class="row"><h1><strong>1.通过单击一个"来搜索属性在以下按钮中:</strong></h1><div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"><input type="button" class="searchByActiveButton btn-xs" onclick="changeSearchBy('accountNumber')" value="PROPERTY ID" id="accountNumber" name="accountNumber"/><input type="button" class="searchByButton btn-xs" onclick="changeSearchBy('name')" value="OWNER NAME" id="name" name="name"/><input type="button" class="searchByButton btn-xs" onclick="changeSearchBy('location')" value="PROPERTY ADDRESS" id="location" name="location"/><input type="button" class="searchByButton btn-xs" onclick="changeSearchBy('billingAddress')" value="BILLING ADDRESS" id="billingAddress" name="billingAddress"/></div>

</html>

I am trying to figure out the best way to make a certain page responsive. https://secure.taxcollector.com/ptaxweb/ if you hit accept it brings you to the page I am trying to make responsive using bootstrap.

As of right now I have a table but when I use the table it messes up the spacing of my buttons:

<table class="display responsive no-wrap" cellspacing="0" width="100%">
        <tr>
            <td><strong>1. SEARCH PROPERTIES BY CLICKING <u>ONE</u> OF THE FOLLOWING BUTTONS:</strong></td>
        </tr>
        <tr>
            <td><input type="button" class="searchByActiveButton" onclick="changeSearchBy('accountNumber')" value="PROPERTY ID" id="accountNumber" name="accountNumber" /></td>
            <td><input type="button" class="searchByButton" onclick="changeSearchBy('name')" value="OWNER NAME" id="name" name="name" /></td>
            <td><input type="button" class="searchByButton" onclick="changeSearchBy('location')" value="PROPERTY ADDRESS" id="location" name="location" /></td>
            <td><input type="button" class="searchByButton" onclick="changeSearchBy('billingAddress')" value="BILLING ADDRESS" id="billingAddress" name="billingAddress" /></td>
        </tr>
    </table>

or...

<div class="row">
        <div class="col-lg-12">
            <div class="form-group">
                <label><strong>1. SEARCH PROPERTIES BY CLICKING <u>ONE</u> OF THE FOLLOWING BUTTONS:</strong></label>
            </div>
        </div>
    </div>

    <div id="searchoptions" class="row">
        <div class="form-group">
            <div class="col-lg-3">
                <button type="button" class="btn btn-default" id="accountNumber" name="accountNumber">PROPERTY ID</button>
            </div>
            <div class="col-lg-3">
                <button type="button" class="btn btn-default" id="name" name="name">OWNER NAME</button>
            </div>
            <div class="col-lg-3">
                <button type="button" class="btn btn-default" id="location" name="location">PROPERTY ADDRESS</button>
            </div>
            <div class="col-lg-3">
                <button type="button" class="btn btn-default" id="billingAddress" name="billingAddress">BILLING ADDRESS</button>
            </div>
        </div>
    </div>

Would it be better to use the grid system instead? Is it possible to recreate these tables and just use bootstraps grid systems to make it responsive?

解决方案

You can make bootstrap tabes responsive as well..just use class='table responsive'

check snippet

<html>
<head>
<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.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
           <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
           <style type="text/css">
            
           </style>
           </head>
           <body>
   <table class="display table-responsive" cellspacing="0" width="100%">
        <tr>
            <td><strong>1. SEARCH PROPERTIES BY CLICKING <u>ONE</u> OF THE FOLLOWING BUTTONS:</strong></td>
        </tr>
        <tr>
            <td><input type="button" class="searchByActiveButton" onclick="changeSearchBy('accountNumber')" value="PROPERTY ID" id="accountNumber" name="accountNumber" /></td>
            <td><input type="button" class="searchByButton" onclick="changeSearchBy('name')" value="OWNER NAME" id="name" name="name" /></td>
            <td><input type="button" class="searchByButton" onclick="changeSearchBy('location')" value="PROPERTY ADDRESS" id="location" name="location" /></td>
            <td><input type="button" class="searchByButton" onclick="changeSearchBy('billingAddress')" value="BILLING ADDRESS" id="billingAddress" name="billingAddress" /></td>
        </tr>
    </table>
</body>
  </html>

evenly spaced buttonds using grid system

<html>
<head>
<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.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
           <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
           <style type="text/css">
            .btn-sm {
              display: inline-block;
            }
           </style>
           </head>
           <body>
           <div class="container-fluid">
           <div class="row">
 
        <h1><strong>1. SEARCH PROPERTIES BY CLICKING <u>ONE</u> OF THE FOLLOWING BUTTONS:</strong></h1>
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <input type="button" class="searchByActiveButton btn-xs" onclick="changeSearchBy('accountNumber')" value="PROPERTY ID" id="accountNumber" name="accountNumber" />
            
            <input type="button" class="searchByButton btn-xs" onclick="changeSearchBy('name')" value="OWNER NAME" id="name" name="name" />
            <input type="button" class="searchByButton btn-xs" onclick="changeSearchBy('location')" value="PROPERTY ADDRESS" id="location" name="location" />
            <input type="button" class="searchByButton btn-xs" onclick="changeSearchBy('billingAddress')" value="BILLING ADDRESS" id="billingAddress" name="billingAddress" /></div>
        
    </div>
    </div>
</body>
  </html>

这篇关于响应式表格或引导网格系统的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆