谈一谈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带来的乐趣。
猜你喜欢
- 为了更好的进行封装,每个实现不同功能的js代码应该有自己的js文件,这样如果一个网页中引用了多个js文件,如下 <script typ
- 本文实例讲述了php控制文件下载速度的方法。分享给大家供大家参考。具体实现方法如下:<?php /* * set here a lim
- 数字范围:922337203685477~-922337203685477函数代码如下: <%Public Fun
- 在当今用户的显示器越来越大的今天,之前的1024*768固宽布局有点越来越不合时宜,对大屏幕的用户而言,两侧空空的留白给人第一眼的印象是严重
- 1.MySQL中并发和隔离控制机制Meta-data元数据锁:在table cache缓存里实现的,为DDL(Data Definition
- 准备工作去年的时候,青云发表过关于栅格系统的文章 . 我们知道网页的栅格系统是运用固定的格子设计版面布局,使其风格工整简洁. 视觉上来说,栅
- 如何用ASP建立Index Server查询对象并为其参数赋值?我们有两个方法可以做到这一点。一个方法是利用Index Server que
- 说到 IE 的 bug,一个臭名昭著的例子是它对于“盒模型”的错误解释:在 IE5.x 以及 Quirks 模式的 IE6/7 中,将 bo
- 阅读上一章:Chapter 6 短语元素Chapter 7 锚点HTML中的链接,正确的说法应该称作"锚点",它不仅让我
- 表单外观的美化很多时候,我们仅仅为了实现数据采集这个功能来使用表单,常看到的表单都是“千人一面”、毫无
- 一个封装好的JavaScript拖动类,使用方便:<div id="idDrag" style="bor
- 在了解了JavaScript1.7的相关更新后,我们再继续关注JavaScript1.8的新特性。在W3C Group带来的JavaScri
- 本文实例讲述了JS中getElementsByClassName与classList兼容性问题解决方案。分享给大家供大家参考,具体如下:do
- 1. 打开FrontPage 2003,点击“文件→新建→新建网站→其他网站模板”,然后选择“数据库界面向导”,给定网站路径后,单击[确定]
- 代码如下: public function fillzero(l1) if len(l1)=1 then fillzero="0&
- 细线边框是网页中定位区分内容常用的一种方法,配合特定图片的使用,往往能够达到不错的效果,那么如何制作细线边框呢?asp之家注:现在要实现这个
- 1. 现在的日期时间命令是<%=now%> 即可2.ASP取得表格(from)数据输入的方法,是使用一个内置
- 一、多线程同步由于CPython的python解释器在单线程模式下执行,所以导致python的多线程在很多的时候并不能很好地发挥多核cpu的
- 方法一一般情况下,SQL数据库的收缩并不能很大程度上减小数据库大小,其主要作用是收缩日志大小,应当定期进行此操作以免数据库日志过大1、设置数
- 大概在九九年做游戏网站的时候,就对文章的发布感到麻烦,不过那会儿玩ASP不精。只是将就用着。在遇到长文件 10000 字时网页就是一大片长了