为移动端而设计的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系列：UWP界面布局进阶8
StackPanel StackPanel能够以水平或垂直的方式整齐地排列位于其内部的元素.通过设置StackPanel的Orientation属性可以定义内部元素的排列方式,当将Orientatio ...
- angular 路由项目例子
angular 路由是我在工作中体验非常便捷的一点, 这是详细的API ,查看API 可以了解很多东西, https://github.com/angular-ui/ui-router/wiki/Qu ...
- Oracle 12c Sharding测试过程中的问题解决
Sharding测试过程中的问题解决 1. 环境部署 软件的版本需要12.2.0.0.3及以上的版本 在配置GSM的时候报错信息不会很直观的展示出来,这对于安装部署有很大阻碍. 2. 数据导入 Dup ...
- 五. Python基础(5)--语法
五. Python基础(5)--语法 1 ● break结束的是它所在的循环体, continue是让它所在的循环体继续循环 # 打印: 1 10 2 10 3 10 4 10 5 10 6 10 7 ...
- C/C++知识补充(2) C/C++操作符/运算符的优先级 & 结合性
, 逗号操作符 for( i = 0, j = 0; i < 10; i++, j++ ) ... 从左到右 Precedence Operator Description Example ...
- 第二章 使用unittest模块扩展功能测试
2.1使用功能测试驱动开放一个最简单的应用 # functional_tests.py # -*- coding: utf-8 -*- from selenium import webdriver b ...
- Java NIO：浅析I/O模型（转）
原文链接:http://www.cnblogs.com/dolphin0520/p/3916526.html 以下是本文的目录大纲: 一.什么是同步?什么是异步? 二.什么是阻塞?什么是非阻塞? 三. ...
- poj1742（多重背包分解+01背包二进制优化）
Description People in Silverland use coins.They have coins of value A1,A2,A3...An Silverland dollar. ...
- 禁止textarea拉伸
添加css属性: style="resize:none" ;
- WIN10-缩放与布局
HKEY_CURRENT_USER\Control Panel\Desktop\WindowMetrics\AppliedDPI230%----- 221225%----- 218220%----- ...