谈一谈bootstrap响应式布局
作者：HiveDark 发布时间：2023-08-22 20:17:39
随着移动端的用户越来越多，传统的web系统架构无法兼容很多移动终端的正常使用。在工作中也会发现，现在很多的客户都有在手机、平板等移动终端上使用管理系统的需求。如果单独为每一个终端开发相应的响应网页，这必定增加项目的成本和开发人员的压力。这时候了解响应式布局就很有必要，响应式布局就是为解决多终端问题而生的。本次介绍的是轻量级、开源的、免费的bootstrap。
搭建开发环境
首先下载官网的boostrap源码包：http://www.bootcss.com/. 开发简单的项目不必加入源码中的所有css、js和字体等。根据自己的项目需求可以裁剪出自己需要的环境。
必须的文件有以下几个：jquery.min.js 、bootstrap.min.js、bootstrap.css。如果需要使用到其中的一些字体样式等，还需要加入字体相关的文件，如下图所示：
【注】加载js时，必须先加载jquery.min.js，这是因为在bootstrap.min.js会使用到jQuery相关的方法即boostrap.min.js依赖于jquery.min.js。
测试bootsrap环境
写一个测试文件index.html。测试文件内容如下：
<!DOCTYPE html>
<html>
<head>
<title>测试boostrap环境</title>
<link rel="stylesheet" type="text/css" href="./css/bootstrap.css">
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
</head>
<body>
</body>
</html>
以上就搭建好了bootsrap开发环境。很简单吧！
使用boostrap必须要了解的就是boostrap的栅格系统。正是由于这栅格系统才使得更好的兼容不同分辨率的终端设备。
具体的栅格系统官网有清晰的介绍：http://v3.bootcss.com/css/。官网的下图所在位置：
使用boostrap时，我们主要是使用里面已定义好的一些样式。这对一个没有美工能力的程序而言，快速搭建一个还不错的页面是很有帮助的。
在实际使用bootstrap的时候，我们经常查看官网的一些帮助文档：http://v3.bootcss.com/css/#tables 。
个人建议直接在官网的示例中copy相关的代码到自己的网页中，再在此基础之上做出相关的修改，这样的开发速度会更快并且准确率会更高。
演示一些boostrap样式---table样式。
<!DOCTYPE html>
<html>
<head>
<title>测试boostrap环境</title>
<link rel="stylesheet" type="text/css" href="./css/bootstrap.css">
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
</head>
<body>
<table class="table table-hover table-bordered table-striped">
<tr>
<td>测试表格</td>
<td>测试表格</td>
<td>测试表格</td>
<td>测试表格</td>
<td>测试表格</td>
</tr>
<tr>
<td>测试表格</td>
<td>测试表格</td>
<td>测试表格</td>
<td>测试表格</td>
<td>测试表格</td>
</tr>
<tr>
<td>测试表格</td>
<td>测试表格</td>
<td>测试表格</td>
<td>测试表格</td>
<td>测试表格</td>
</tr>
<tr>
<td>测试表格</td>
<td>测试表格</td>
<td>测试表格</td>
<td>测试表格</td>
<td>测试表格</td>
</tr>
<tr>
<td>测试表格</td>
<td>测试表格</td>
<td>测试表格</td>
<td>测试表格</td>
<td>测试表格</td>
</tr>
</table>
</body>
</html>
网页查看结果如下：
class 里属性介绍:
1）table 加上这个就已经有bootsrap的表格样式
2）table-hover 表示表格鼠标停留的行背景高亮
3）table-bordered 表格出现边框
4）table-striped 表格条纹
【注】多个属性相加时，各个属性之间有空格
2. button
<!--Button-->
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>
网页显示结果如下：
很多其他的一些样式和组件，还是建议参考官方的帮助文档。
总结
本文算是一个引导吧，简单介绍了boostrap是干什么的和怎么去使用。并没有详细列出所有的组件和样式,但是……往下看！
这是一篇非常神奇的文章，一定要点进去看一看：值得分享和收藏的Bootstrap学习教程
如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程
希望对Bootstrap感兴趣的能够自己手动地去测试每一种样式的效果和各个组件怎么使用，真正感受Bootstrap带来的乐趣。
0
投稿猜你喜欢
前言什么算是高层的文件操作呢？普通的文件操作，我们一般只涉及创建文件，文件夹以及写入文件等等。假如我现在需要复制一个文件的内容到另一个文件之- redux的核心概念其实很简单：将需要修改的state都存入到store里，发起一个action用来描述发生了什么，用reducers描述a
- 本文实例讲述了thinkphp模板赋值与替换方法。分享给大家供大家参考。具体实现方法如下：1. 模板中的赋值方法：$this->ass
- 本文实例讲述了Python推导式。分享给大家供大家参考，具体如下：1. 列表推导式>>> li = [1,2,3,4,5,
- 画之前肯定要知道规格图，我找了一个大致的图。参考图片：绘制大星的方法很简单，五角星的补角是144度。绘制小五角星有点麻烦，因为我国国旗上的小
- 具体内容如下所示：一、常用函数1、ASCII()返回字符表达式最左端字符的ASCII 码值。在ASCII（）函数中，纯数字的字符串可不用‘&
- 客户用的数据库是mysql，而研发好的产品支持oracle，为了让客户掏腰包，我们必须把数据库环境从oracle转向mysql。我们在转换的
- 关于mysql的读写分离架构有很多，百度的话几乎都是用mysql_proxy实现的。由于proxy是基于lua脚本语言实现的，所以网上不少网
- 方案概要： 1. 改变文件存储时的文件名 2. 配置索引服务器，并将索引服务器与MS SQL Server关联。 3. 修改SQL语句，将进
- 本文实例为大家分享了JS实现倒计时图文效果的具体代码，供大家参考，具体内容如下<body><img src="i
- 简单来说conda有什么用？方便的创建多个python虚拟环境，方便多个python项目同时开发的时候，每个项目都有自己独立的python开
- 需求：对一个配置文件进行处理，拿出可用的字符来拼接，下面是原始文本，我们要得到这样的结果，redis -h 127.0.0.1 -p 637
- 之一:torchvision 中包含了很多预训练好的模型，这样就使得 fine-tune 非常容易。本文主要介绍如何 fine-tune t
- 安装刚接触Pillow的朋友先来看一下Pillow的安装方法，在这里我们以Mac OS环境为例：（1）、使用 pip 安装 Python 库
- 前言Vue.js 是开源的一个前端开发库，通过简洁的 API 提供高效的数据绑定和灵活的组件系统。在前端纷繁复杂的生态中，Vue.js在近年
- 一、在CentOS上安装Python31.下载Python3.10源代码文件下载地址:https://www.python.org/down
- 占位符说明1、％c，格式化字符及其ASCII码2、％s，格式化字符串3、％d，格式化整数4、％u，格式化无符号整数5、％o，格式化无符号八进
- 知识点：字符串在编程里，用的最多的就是字符串，字符串同时也是各类数据的中转站字符串运算符：编号运算符类型说明1+字符串拼接2*同一字符串多次
- 以前工作中需要全新的Access数据库，可以复制数据库，也可以把新的数据库放到资源里面，用新数据库的时候释放出来，都感觉不爽，还是动态生成心
- [本站原创]在我们浏览了一些网页时，经常会弹出一些信息窗口或浏览器窗口以显示一些公告内容，想知道这些窗口是怎么制作出来的吗？如果你还不曾知道
