为移动端而设计的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类游戏是笔者 ...
随机推荐
- Win10系列：VC++绘制几何图形3
在绘制三角形之前,首先需要创建一个三角形,打开D2DBasicAnimation.h头文件,在D2DBasicAnimation类中添加如下的代码: private: //声明成员变量obje ...
- learning ddr write leveling
- sqlalchemy（一）常用连接参数及包
简介: 本文默认你已经有了一定的数据库基础.我们不喜欢写原生SQL语句,那个写着费劲,日常开发时候,我们怎么CRUD数据库呢?一般使用ORM,对象关系映射(英语:Object Relational M ...
- npm webpack vue-cli
npm.webpack.vue-cli 快速上手版 Node.js npm 什么是Node.js 以及npm 简单的来说 Node.js 就是运行在服务端的JavaScript,基于Chro ...
- loadrunner json参数化
因为json格式有{},所以LR参数化时如果也用默认的{}的话,会冲突,这样脚本运行时就无法识别,导致不能正确的读取参数化文件里的内容,此时把参数化的{}改成其他符号即可,比如<>
- windows消息传送(自定义消息和WM_COPYDATA)
通过SendMessge实现的进程间通信. 0x01 自定义消息 1,WINDOWS中自定义消息的定义和使用: (1)在WNDOWS中消息分系统消息和自定义消息.系统消息定义从0到0x3FF,使用0x ...
- python笔记2-变量
变量 存东西所用 #定义变量 name='feifei'#定义变量,字符串 age=18.9#整型或者小数定义变量不需要加引号 print(name) print(age) name2="w ...
- Centos7创建用户su登录后显示为 bash-4.1$
useradd name [root@localhost data]# su name bash-4.2$ [root@localhost ~]# cp -a /etc/skel/. /home/na ...
- jquery元素插入、删除、清空、找父子级元素
1)jquery元素插入 <!--位置1--> <div id='test'> <!--位置2--> <div>测试</div> <! ...
- windows 访问局域网共享文件
直接在浏览器或资源管理器输入路径就OK file://10.16.73.129/FinTech/soft