61,112
社区成员
发帖
与我相关
我的任务
分享请问的Bootstrap问题
我做个网站，在PC机上可以正常显示，在手机上显示就有问题。后来
有网友说要看看相应式布局。我看了看，说是要加：
《meta name="viewport" content="width=device-width, initial-scale=1.0"》
可是我加了以后，手机上感觉还不是很好看，我又看了看Bootstrap，
据说还要装Bootstrap，我想去网站下载，它有两个：
Compiled CSS and JS和Source files，我不知道要下载哪个？
另外安装要在哪个目录下？（我用的是apache，php和mysql）
还有就是如何调用这些文件？
因为我的网站上显示table，里面的列很多，在手机上显示不好看，
哪位能给出如何使用Bootstrap的一个例子吗？
有网友说要看看相应式布局。我看了看，说是要加：
《meta name="viewport" content="width=device-width, initial-scale=1.0"》
可是我加了以后，手机上感觉还不是很好看，我又看了看Bootstrap，
据说还要装Bootstrap，我想去网站下载，它有两个：
Compiled CSS and JS和Source files，我不知道要下载哪个？
另外安装要在哪个目录下？（我用的是apache，php和mysql）
还有就是如何调用这些文件？
因为我的网站上显示table，里面的列很多，在手机上显示不好看，
哪位能给出如何使用Bootstrap的一个例子吗？
...全文
请发表友善的回复…
发表回复
leetow2006 2018-06-23
- 打赏
- 举报
请问一般的网页如果套用以下的模板，是不是都可以在PC和手机上使用了：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>Demo</title>
<!-- 页面的宽度与设备屏幕的宽度一致 -->
<meta name="viewport" content="width=device-width">
<!-- 初始缩放比例 1:1,没有横线滚动的效果 -->
<meta name="viewport" content="initial-scale=1">
<!-- 禁止用户缩放 -->
<meta name="viewport" content="user-scalable=no">
<!-- 引入外部bootstrap的css文件(压缩版) -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!-- NO.1 先引入jQuery文件(压缩版) -->
<script src="bootstrap/js/jquery.min.js"></script>
<!-- NO.2 再引入js文件(压缩版) -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>Demo</title>
<!-- 页面的宽度与设备屏幕的宽度一致 -->
<meta name="viewport" content="width=device-width">
<!-- 初始缩放比例 1:1,没有横线滚动的效果 -->
<meta name="viewport" content="initial-scale=1">
<!-- 禁止用户缩放 -->
<meta name="viewport" content="user-scalable=no">
<!-- 引入外部bootstrap的css文件(压缩版) -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!-- NO.1 先引入jQuery文件(压缩版) -->
<script src="bootstrap/js/jquery.min.js"></script>
<!-- NO.2 再引入js文件(压缩版) -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
leetow2006 2018-06-22
- 打赏
- 举报
自己顶，顶自己
leetow2006 2018-06-22
- 打赏
- 举报
请问：在bootstrap的css和js目录下这么多文件，都是怎么用的？也就是用在哪种情况下使用哪些文件？
这个有资料说明吗？
这个有资料说明吗？
ambit_tsai-微信 2018-06-22
- 打赏
- 举报
表格的列很多就只能靠水平滚动条来显示了，这本来就是没办法的
钢铁大郭 2018-06-22
- 打赏
- 举报
楼主是想在手机上用响应式的话，就去看一下bs的table responsive，是可以适应手机屏幕的
leetow2006 2018-06-21
- 打赏
- 举报
还是搞不太清楚，是不是套上面的模块就可以了？但是我的table表中的列很多，我怕在手机上显示时，不好看
leetow2006 2018-06-21
- 打赏
- 举报
我的table的标题就有很多列：
echo "<form id='form1' name='form1' method='post' action='/fjqsl/ord/insordsale.php' onsubmit='return form1_check()'>";
echo "<table border=2 id='tab'>";
echo "<tr><th>订单序号</th><th>客户</th><th>产品名称</th><th>类型</th><th>单位</th> <th>订货数量</th><th>订单说明</th><th>出货数量1</th><th>出货日期1</th><th>出货数量2</th><th>出货日期2</th><th>出货数量3</th><th>出货日期3</th><th>未销售数量</th><th>状态</th><th>备 注</th><th>选项</th></tr>";
请问：如何做才能在手机上浏览比较好看？
echo "<form id='form1' name='form1' method='post' action='/fjqsl/ord/insordsale.php' onsubmit='return form1_check()'>";
echo "<table border=2 id='tab'>";
echo "<tr><th>订单序号</th><th>客户</th><th>产品名称</th><th>类型</th><th>单位</th> <th>订货数量</th><th>订单说明</th><th>出货数量1</th><th>出货日期1</th><th>出货数量2</th><th>出货日期2</th><th>出货数量3</th><th>出货日期3</th><th>未销售数量</th><th>状态</th><th>备 注</th><th>选项</th></tr>";
请问：如何做才能在手机上浏览比较好看？
leetow2006 2018-06-20
- 打赏
- 举报
怎么没人回答
ambit_tsai-微信 2018-06-20
- 打赏
- 举报
PS：最前面的例子，由于字符限制被截断了
参照例子去引入相应的库，然后参照https://v3.bootcss.com/css/#tables
去写你的表格。
参照例子去引入相应的库，然后参照https://v3.bootcss.com/css/#tables
去写你的表格。
ambit_tsai-微信 2018-06-20
- 打赏
- 举报
https://v3.bootcss.com/getting-started/
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签必须放在最前面，任何其他内容都必须跟随其后！ -->
<title>Bootstrap</title>
<!-- Bootstrap -->
<link href="/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!--[if lt IE 9]>
<script src="/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好，世界！</h1>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="/jquery/1.12.4/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
gammey 2018-06-20
- 打赏
- 举报
并没有那么简单啊，bootstrap有网格系统，需要在前端代码修改。针对不同大小的设备可以设置div不同的屏幕宽度比例。
gammey 2018-06-20
- 打赏
- 举报
并没有那么简单啊，bootstrap有网格系统，需要在前端代码修改。针对不同大小的设备可以设置div不同的屏幕宽度比例。
参照：http://www.runoob.com/bootstrap/bootstrap-grid-system.html
参照：http://www.runoob.com/bootstrap/bootstrap-grid-system.html
ambit_tsai-微信 2018-06-20
- 打赏
- 举报
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好，世界！</h1>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!--
ln0909 2018-06-20
- 打赏
- 举报
Bootstrap 媒体查询 和 bootstrap table
