为移动端而设计的bootstrap的使用
一、下载
--bs
---css
----bootstrap.css
----bootstrap.min.css
---fonts
---js
----bootstrap.js
----jquery.js
----bootstrap.min.js
二、使用
引入css,js文件
<script src="bs/js/jquery.js"></script>
<script src="bs/js/bootstrap.js"></script>
<script src="bs/js/docs.min.js"></script>
三、特点
1、移动端优先 @media(min-width: 960px)
2、布局容器 container
3、栅格系统 1140px分成12份
4、列偏移
5、holder.js <img src="holder.js/100%x200" alt="">
6、优先级 若自己写的css文件和bootstrap的css文件标签和样式重名，但是想先用自己的css样式，在后面加 ！important，如：
.row{
margin-top: 20px！important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bs/css/bootstrap.css">
<script src="bs/js/jquery.js"></script>
<script src="bs/js/bootstrap.js"></script>
<script src="bs/js/docs.min.js"></script>
<style>
.row{
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="holder.js/100%x200" alt="">
</div> <div class="col-md-offset-4 col-md-4">
<img src="holder.js/100%x200" alt="">
</div>
</div>
<div class="row">
<div class="col-md-6">
<img src="holder.js/100%x200" alt="">
</div> <div class="col-md-6">
<img src="holder.js/100%x200" alt="">
</div>
</div>
</div> </body>
</html>
四、常用案列
1、table表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bs/css/bootstrap.css">
<script src="bs/js/jquery.js"></script>
<script src="bs/js/bootstrap.js"></script>
<script src="bs/js/docs.min.js"></script>
<style>
.container{
margin-top: 50px;
}
</style>
</head>
<body>
<div class="container">
<table class="table table-bordered table-hover 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>
</div> </body>
</html>
2、表格行内样式 class： active，info.......
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bs/css/bootstrap.css">
<script src="bs/js/jquery.js"></script>
<script src="bs/js/bootstrap.js"></script>
<script src="bs/js/docs.min.js"></script>
<style>
.container{
margin-top: 50px;
}
</style>
</head>
<body>
<div class="container">
<table class="table table-bordered">
<tr class="active">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="info">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="warning">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="danger">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="success">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div> </body>
</html>
3、按钮的各种样式
4、图形形状，圆形，矩形等
5、表单 form-group form-control
6、导航条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bs/css/bootstrap.css">
<script src="bs/js/jquery.js"></script>
<script src="bs/js/bootstrap.js"></script>
<script src="bs/js/docs.min.js"></script>
<style>
/*.container{*/
/*margin-top: 50px;*/
/*}*/
</style>
</head>
<body>
<div class="container">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header">
<button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mynav"></button>
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="mynav">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul> <form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</nav>
</div> </body>
</html>
7、分页
8、进度条 -----------组件
9、模态框
10、Carousel 切换图片******************
11、推荐书籍阅览：
我是医生不是人 -----------莆田系医院内幕
为移动端而设计的bootstrap的使用的更多相关文章
- TV端产品设计法则和分析
对TV端产品设计的分析太特么少了.翻遍网络,大多也是针对UI设计的分析,这篇从产品设计的角度,梳理下现有的TV端产品设计法则,顺道做点分析.(前方多图,高能预警) 目录: 1. TV端产品使用场景 2 ...
- 那些过目不忘的无线端交互设计（DRIBBBLE GIF动态图）
Dribbble精选:Dribbble上令人惊叹的无线端交互设计!来自全球牛人们的奇思妙想,新颖动人的交互在这一张张GIF动态图上一览无余!当然界面一样打动人心,腾出手点赞的同时!记得另存哟:) 作者 ...
- 回顾2017系列篇（二）：移动端APP设计趋势
移动端APP在2017年经历了诸多的变化, 人工智能.聊天式的界面.响应式设计.虚拟现实(VR)和增强现实(AR)让设计师不断面临新的挑战.研究表明,用户每天耗费在手机和平板上的平均时长为158分钟, ...
- python操作三大主流数据库(4)python操作mysql④python服务端flask和前端bootstrap框架结合实现新闻展示
python操作mysql④python服务端flask和前端bootstrap框架结合实现新闻展示 参考文档http://flask.pocoo.org/docs/0.11/http://flask ...
- Axure中移动端原型设计方法（附IPhoneX和IPhone8最新模板）
Axure中移动端原型设计方法(附IPhoneX和IPhone8最新模板) 2018年4月16日luodonggan Axure中基于设备模板的移动端原型设计方法(附IPhoneX和IPhone8最新 ...
- 从服务端架构设计角度，深入理解大型APP架构升级
随着智能设备普及和移动互联网发展,移动端应用逐渐成为用户新入口,重要性越来越突出.但企业一般是先有PC端应用,再推APP,APP 1.0版的功能大多从现有PC应用平移过来,没有针对移动自身特点考虑AP ...
- TERSUS无代码开发(笔记05)-简单实例电脑端页面设计
案例笔记电脑端页面设计 1.新建项目(请假管理qjgl) 2.开发软件界面介绍(常用的功能按键) 3.目录中显示元件对象 4.对元件对象的操作主要方式是双击(双击哪个元件, ...
- 移动APP服务端API设计应该考虑到的问题
2014年,移动APP的热度丝毫没有减退,并没有像桌面软件被WEB网站那样所取代, 不但如此,越来越多的传统应用.网站也都开始制作自己的移动APP,也就是我们常说的IOS客户端.android客户端. ...
- 谈一款MOBA游戏《码神联盟》的服务端架构设计与实现
一.前言 <码神联盟>是一款为技术人做的开源情怀游戏,每一种编程语言都是一位英雄.客户端和服务端均使用C#开发,客户端使用Unity3D引擎,数据库使用MySQL.这个MOBA类游戏是笔者 ...
随机推荐
- sigmoid belief network boltszmann machine
because of explaining away, the hidden weights in sigmoid belief network is no longer independent
- redux源码解析(深度解析redux+异步demo)
redux源码解析 1.首先让我们看看都有哪些内容 2.让我们看看redux的流程图 Store:一个库,保存数据的地方,整个项目只有一个 创建store Redux提供 creatStore 函数来 ...
- 将excel数据分块多线程导入
参考链接:http://blog.csdn.net/liqi_q/article/details/53032027
- C++ string类insert用法总结
body, table{font-family: 微软雅黑; font-size: 13.5pt} table{border-collapse: collapse; border: solid gra ...
- uitableviewcell textlabel detailtextLabel 换行的位置及尺寸问题
我们在使用uitableView的时候,一些简单的cell样式其实是不需要自定义的,但是系统的方法又似乎又无法满足需要,这时候我们就需要在系统上做一些改变来达到我们的需求: 像这种cell,简单分析下 ...
- Problem B 一元二次方程类
Description 定义一个表示一元二次方程的类Equation,该类至少具有以下3个数据成员:a.b和c,用于表示方程“a*x*x + b*x +c = 0”.同时,该类还至少具有以下两个成员函 ...
- 牛客多校第四场 F Beautiful Garden
链接:https://www.nowcoder.com/acm/contest/142/F来源:牛客网 题目描述 There's a beautiful garden whose size is n ...
- netty---------write flush两个方法到底做了什么？
上一篇已经看到:unsafe的read方法,把channel中的数据read到byteBuff中的byteBuffer里.那么根据猜想,下面要进行的应该是nio 的 channel的write(byt ...
- mvc Model验证总结及常用正则表达式
本文属转载,来源: http://www.byywee.com/page/M0/S868/868615.html 关于Model验证官方资料: http://msdn.microsoft.com/zh ...
- <Spark><Spark Streaming>
Overview Spark Streaming为用户提供了一套与batch jobs十分相似的API,以编写streaming应用 与Spark的基本概念RDDs类似,Spark Streaming ...