为移动端而设计的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类游戏是笔者 ...
随机推荐
- nyoj-0469-擅长排列的小明 II(找规律)
nyoj-0469-擅长排列的小明 II 思路:递推分析:为了简便起见,我们用Ai代表第i个数字 , 由于A1一直是1,所以A2只能是2或3.假设dp[n]表示1->n这个序列的方案数 ...
- Win10系列：UWP界面布局基础3
在实际项目开发中,为控件属性赋值时经常会遇到属性值在设计时处于未知状态,而只有在应用程序运行时才能获取到.这种情况下,直接赋值方法是无法满足的,可以使用XAML标记扩展(Markup Extensio ...
- UVa 11825 - Hackers' Crackdown DP, 枚举子集substa = (substa - 1)&sta 难度: 2
题目 https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&a ...
- log4j不输出日志的解决方案
参考:http://blog.csdn.net/qq994406030/article/details/53433159 主要是log4j.properties log权限和log输出方式没配好.
- getopts的使用方法
getopts的使用 语法格式:getopts [option[:]] [DESCPRITION] VARIABLE option:表示为某个脚本可以使用的选项 ":":如果某个选 ...
- 将远程mysql服务器数据导出 csv 并发送到我的本机
1.在SQL上执行查询并导出操作 '; 2.发送到本机 SQL>system sz idIsNull2.csv;
- Maven 加载ojdbc14.jar报错，解决方法
因为oracle的ojdbc.jar是收费的,所以maven的中央仓库中没有这个资源,只能通过配置本地库才能加载到项目中去. 首先下载 ojdbc14 https://pan.baidu.com/s ...
- RandomStringUtils的使用
//产生5位长度的随机字符串,中文环境下是乱码 RandomStringUtils.random(5); //使用指定的字符生成5位长度的随机字符串 RandomStringUtils.random( ...
- matlab运行中出现“Caught "std::exception" Exception message is: Message Catalog MATLAB:builtins was not loaded from the file."
在我运行过程中,经常爆出这一不确定是什么的问题,经排查后发现,原来是fopen 文件后,没有及时fclose导致的.
- POJ - 3252 A - Round Numbers
The cows, as you know, have no fingers or thumbs and thus are unable to play Scissors, Paper, Stone' ...