谈一谈bootstrap响应式布局

2024-12-15 20:40:32

随着移动端的用户越来越多，传统的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带来的乐趣。

BootStrap学习笔记之nav导航栏和面包屑导航

nav导航栏 <nav role="navigation" class="navbar navbar-default"> <div class="container-fluid"></div> <div class="navbar-header"> <a href="#" class="navbar-brand"> 大大的log
Bootstrap响应式表格详解

Bootstrap 的响应式 CSS 能够自适应于台式机.平板电脑和手机下面是手机端显示的样式代码如下: 1.test.php <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <link type="text/css"
Bootstrap Navbar Component实现响应式导航

目的: 用Bootstrap Navbar component 实现一个响应式导航理解Bootstrap Navbar component是如何工作的(不包括collepse.js) 清楚自己添加一个规定的类名时是做了些什么根据自己的需求进行改装对比自己的实现方法,找出差距. 1.实现: 我想要模仿一个这样的响应式导航: 按照Bootstrap官网上介绍的方法,按照规则创建标签添加类名之后,可以得到一个这样的导航: 代码: <nav class="navbar navbar-defa
Bootstrap禁用响应式布局的实现方法

在Bootstrap中极其重要的一个技术内容便是响应式布局了,一次编码针对不同设备终端的强大能力使得响应式技术愈发流行. 不过正所谓"萝卜青菜各有所爱",如果你想要使用Bootstrap开发自己的项目却又恰巧不太喜欢响应式布局(或者你所设计的页面布局不允许你使用响应式技术),那么你可以通过以下方式禁用响应式布局. 移除标签禁用第一步,就是需要移除在head标签中添加的 <meta name="viewport" content="width=dev
bootstrap-treeview自定义双击事件实现方法

bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件.该jQuery插件基于Twitter Bootstrap,以简单和优雅的方式来显示一些继承树结构,如视图树.列表树等等.但是不知为什么这个插件没有自带双击事件. 经过多次测试,使用方法$('#tree').dblclick( function () {})和方法$('#tree').on('dblclick',function(){})都不起作用!百思不得其解.最后救助大神,问题解决了,但是
BootStrap中关于Select下拉框选择触发事件及扩展

Select下拉框的问题,想在选择一个选项后,前台显示做出变动,并且知道选择的是第几个选项. 这个很好解决: 如下: <div class="page-header"> <div class="form-horizontal"> <div class="control-label col-lg-0"> </div> <div class="col-lg-2"> <
Bootstrap组件学习之导航、标签、面包屑导航(精品)

导航 Bootstrap中可用的导航有相似的标记,用基类.nav开头,这是相似的部分.改变修饰类可以改变样式. <!DOCTYPE html> <html> <head> <meta charset="utf-8">  <link rel="stylesheet" href="css/bootst
BootStrap创建响应式导航条实例代码

首先你得引入bootstrap与jquery 推荐一个CDN:http://cdn.gbtags.com/index.html 然后就是开始编写HTML代码.如果你不想更改显示效果的话实际上CSS都免去写了2333 因为HTML代码比较多这里分为三个部分然后最后再上一份整体HTML代码首先如上图所示的,实现这个效果需要了解bootstrap的以下几个组件 •导航条 •按钮 •表单 •下拉菜单实际上以上几个组件的样式有很多.我们只需要了解一部分即可如需了解更多的请转自http://www
Bootstrap开发实战之响应式轮播图

本文主要内容是在导航条的下方做一张轮播图,自动播放最新的重要动态,供大家参考,具体内容如下一.响应式轮播图 //响应式轮播图 <div id="myCarousel" class="carousel slide"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0"
bootstrap响应式表格实例详解

Bootstrap 的响应式 CSS 能够自适应于台式机.平板电脑和手机,现在就bootstrap的响应式举一个例子: 如上图所示,要实现该表格在手机等移动端上只显示代号.名称.和价格,其他以查看详情的方式显示(也就是下图:) 首先,先实现在移动端能由左图到右图的转换: 代码如下: <meta charset="UTF-8"> <title></title>  <link type=&
Bootstrap CSS组件之面包屑导航(breadcrumb)

面包屑breadcrumb一般用于导航,表示当前页面所在的位置面包屑可以设置其他相关的小标记内容,比如标签.徽章标记等. //源码 //基础样式 .breadcrumb { padding: 8px 15px; margin-bottom: 20px; list-style: none; background-color: #f5f5f5; border-radius: 4px; } //所有li项都是内联块方式 .breadcrumb > li { display: inline-block
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法

本文实例讲述了bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法.分享给大家供大家参考,具体如下: Bootstrap官网中,只介绍了breadcrumb的布局(如下图),未介绍使用方法,如何动态增加面包屑title及点击事件的响应. 本人在使用过程中探索出以下的方式. 首先,在html文件里定义div <div> <ul class="breadcrumb " style="margin-bottom:0px;visibility:

谈一谈bootstrap响应式布局

相关推荐

随机推荐