Examples of bootstrap response tables and bootstrap instances

Examples of bootstrap response tables and bootstrap instances

Bootstrap's responsive CSS can adapt to desktops, tablets, and mobile phones. Now, we will give an example of bootstrap's responsive CSS:

As shown in, this table only displays the code, name, and price on mobile phones and other mobile terminals. Others are displayed in View Details (that is :)

First, the mobile terminal can be converted from the left to the right:

The Code is as follows:

<Meta charset = "UTF-8"> <title> </title> <! -- Introduce the css file of bootstrap --> <link type = "text/css" rel = "stylesheet" href = ".. /bootstrap-3.3.7-dist/css/bootstrap.min.css "rel =" external nofollow "> <! -- Introduce js package --> <! -- Introduce the js file of bootstrap --> query ($ SQL); foreach ($ arr as $ v) {echo ""; // Why does id = 'xq' fail? Do not use id. id is unique. Here there are multiple view details .... Remember !!!! }?> <Table class = "table-striped"> <thead> <tr> <th> Code </th> <th> name </th> <th> price </th> <th class = "hidden-xs"> origin </th> <! -- Class = "hidden-xs" aims to not display this column on the mobile phone --> <th class = "hidden-xs"> Inventory </th> <th class =" hidden-xs "> quantity </th> <th class =" visible-xs-block "> operation </th> </tr> </thead> <tbody> <! --? Php require ".. /DB. class. php "; $ db = new DB (); $ SQL =" select * from buyfruits "; $ arr = $ db ---> <tr> <td >{$ v [0] }</td> <td >{$ v [1]} </td> <td >{$ v [2] }</td> <td class = "hidden-xs" >{$ v [3] }</td> <td class = "hidden- xs ">{$ v [4] }</td> <td class =" hidden-xs ">{$ v [5] }</td> <td class =" visible-xs-block "> <button type =" button "class =" btn-primary btn-sm xq "code =" {$ v [0]} "id =" xq "> View Details </button> </td> </tr> </tbody> </table>

Second, click to View Details. A modal box is displayed.

<! -- Reference the Modal box (Modal ), can be stored anywhere --> <div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true"> <div class = "modal-dialog"> <div class = "modal-content"> <div class = "modal-header"> <button type =" button "class =" close "data-dismiss =" modal "aria-hidden =" true "> × </button> 

Processing page: chuli. php
<?php$code=$_POST["code"];require "../DB.class.php";$db=new DB();$sql = "select * from buyfruits where ids='{$code}'";$arr = $db->strquery($sql);echo $arr;?>
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.