为移动端而设计的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类游戏是笔者 ...
随机推荐
- Jenkins详细安装与构建部署使用教程
版权声明:本文为博主林炳文Evankaka原创文章,转载请注明出处http://blog.csdn.net/evankaka 目录(?)[+] Jenkins是一个开源软件项目,旨在提供一个开 ...
- 《Python》 计算机基础
一.计算机基础: cpu:中央处理器,相当于人的大脑,运算中心,控制中心. 内存:暂时存储数据,与CPU交互. 优点:内存读取速度快. 缺点:容量小,造价高,断电即消失. 硬盘:长期存储数据. 优点: ...
- Cracking The Coding Interview 5.6
//Write a program to swap odd and even bits in an integer with as few instructions as possible (e.g. ...
- jq demo—图片翻页展示效果 animate()动画
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- h5视频配置
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 使用ext httpProxy代理获取列表但列表展示不全的问题解决
今天项目中遇到一个奇葩的事情,使用ext的jsonstore通过httpproxy代理想要获取一个列表,页面显示是有五条数据的但是却只展示了2条,于是各种排查,后台确定无误后开始检查前台,发现浏览器中 ...
- L319 Zigbee test coding- field test fail-base on EFR32MG1
1 Test coding Zigbee test of Tx power and frequency for every channel. Testing Procedure1) Power up ...
- Python 生成器函数
def func(): print("我叫周润发") return "林志玲" # return在函数中表示返回的意思 ret = func() print(& ...
- 莫烦tensorflow(4)-placeholder
import tensorflow as tf input1 = tf.placeholder(tf.float32)input2 = tf.placeholder(tf.float32) outpu ...
- 设置idea文件类型