BootStrap
来源:互联网 发布:梧州网络问政 编辑:程序博客网 时间:2024/05/18 07:40
模拟实现标题
例如下面这两段代码的效果是一样的
<h1>标题一</h1><span class="h1">标题一</span><!--在大标题旁边添加小标题--><h1>标题一<small>小标题</small></h1>
BootStrap排版
P段落
段落p标签:
1.默认14px;
2.行高:20px;
3.底部外边距:10px;
大小写
.text-lowercase
.text-uppercase
.text-capitalize 大写
<p class="text-lowercase">HELLO!</p> <p class="text-uppercase">HELLO!</p> <p class="text-capitalize">hello!</p>
表格
以下是对一些常用表单属性的举例:
<table class="table table-striped table-bordered table-hover"> <thead> <tr> <td>标题1</td> <td>标题2</td> <td>标题3</td> <td>标题4</td> </tr> </thead> <tr class="waring"> <td>花花</td> <td>花花</td> <td>花花</td> <td>花花</td> </tr> <tr class="info"> <td>小胡</td> <td>小胡</td> <td>小胡</td> <td>小胡</td> </tr> <tr class="danger"> <td>呱呱</td> <td>呱呱</td> <td>呱呱</td> <td>呱呱</td> </tr> <tr class="success"> <td>咚咚</td> <td>咚咚</td> <td>咚咚</td> <td>咚咚</td> </tr> <tr class="active"> <td>咚咚</td> <td>咚咚</td> <td>咚咚</td> <td>咚咚</td> </tr> </table>
表格
举例说明:
<form class="form-inline">//使表格内容在一行显示 <div class="form-group"> <label class="sr-only" for='haha'>这是一个输入框:</label> //隐藏提示信息 <input type="" id="haha" placeholder="这是一个输入框" class="form-control input-sm"> </div> <div class="form-group has-warning"> //使提示信息变颜色 <label for='haha' class="control-label">这是一个输入框:</label> <select class="form-control"> <option>北京</option> <option>北京</option> <option>北京</option> <option>北京</option> </select> </div>
图标
<button class="btn btn-default">Click</button> <button class="btn active">Click</button> <button class="btn btn-default btn-lg">Click</button> <button class="btn btn-default btn-sm">Click</button> <button class="btn btn-success">Click</button> <button class="btn btn-primary">Click</button> <button class="btn btn-info">Click</button> <button class="btn btn-warning">Click</button> <button class="btn btn-danger">Click</button> <button class="btn btn-link">Click</button> <button class="btn btn-block">Click</button> <br> <button class="btn disabled="disabled">Click</button> <a href="" class="btn btn-danger">Click</a>
对应效果直接上图:
ViewPort
在说ViewPort这个属性之前,我们先了解一下,在PC端和移动端像素显示的区别:
PC端像素为我们设计的页面上显示的大小:
(1)手持设备没有进行缩放的时候,
1pc终端像素=1手机端物理单位;
(2)当页面放大的时候,1pc终端像素会覆盖好几个手机端物理像素
(3)当页面缩小时,1手机端物理单位又会覆盖好几个终端像素
参考了说说移动前端中的视口
移动前端中常说的 viewport (视口)就是浏览器显示页面内容的屏幕区域。其中涉及几个重要概念是 dip ( device-independent pixel 设备逻辑像素 )和 CSS 像素之间的关系。这里首先了解以下几个概念。
layout viewport(布局视口)
一般移动设备的浏览器都默认设置了一个viewport 元标签,定义一个虚拟的layout viewport(布局视口),用于解决早期的页面在手机上显示的问题。iOS, Android基本都将这个视口分辨率设置为 980px,所以pc上的网页基本能在手机上呈现,只不过元素看上去很小,一般默认可以通过手动缩放网页。
visual viewport(视觉视口)和物理像素
visual viewport(视觉视口)备物理屏幕的可视区域,屏幕显示器的物理像素,同样尺寸的屏幕,像素密度大的设备,硬件像素会更多。例如iPhone的物理像素:
iPhone5 :640 * 1136
iPhone6:750 * 1334
iPhone6 Plus:1242 * 2208
ideal viewport(理想视口)和 dip (设备逻辑像素)
ideal viewport(理想视口)通常是我们说的屏幕分辨率。
dip (设备逻辑像素)跟设备的硬件像素无关的。一个 dip 在任意像素密度的设备屏幕上都占据相同的空间。
比如MacBook Pro的 Retina (视网膜)屏显示器硬件像素是:2880 * 1800。当你设置屏幕分辨率为 1920 * 1200 的时候,ideal viewport(理想视口)的宽度值是1920像素, 那么 dip 的宽度值就是1920。设备像素比是1.5(2880/1920)。设备的逻辑像素宽度和物理像素宽度(像素分辨率)的关系满足如下公式:
逻辑像素宽度*倍率 = 物理像素宽度
而移动端手机屏幕通常不可以设置分辨率,一般都是设备厂家默认设置的固定值,换句话说 dip 的值就是 ideal viewport(理想视口)(也就是分辨率)的值,比如,iPhone的屏幕分辨率:
iPhone5 :分辨率 320 * 568,物理像素 640 * 1136,@2x
iPhone6:分辨率 375 * 667,物理像素 750 * 1334,@2x
iPhone6 Plus :分辨率 414 * 736,物理像素1242 * 2208,@3x,(注意,实际显示图像等比降低至1080×1920,具体原因查看:http://www.css88.com/archives/5972)
CSS像素
CSS像素(px)用于页面布局的单位。样式的像素尺寸(例如 width: 100px)是以CSS像素为单位指定的。CSS像素与 dip 的比例即为网页的缩放比例,如果网页没有缩放,那么一个CSS像素就对应一个 dip(设备逻辑像素) 。
使用viewport元标签控制布局
首先看一下viewport元标签极其属性:
这里是每个属性的详细介绍:
属性名 取值 描述
width
width属性被用来控制layout viewport(布局视口)的宽度,layout viewport(布局视口)宽度默认值是设备厂家指定的。iOS, Android基本都将这个视口分辨率设置为 980px。我们可以 width=320 这样设为确切的像素数,也可以设为device-width这一特殊值,一般为了自适应布局,普遍的做法是将width设置为device-width,width=device-width 也就是将layout viewport(布局视口)的宽度设置 ideal viewport(理想视口)的宽度。网页缩放比例为100%时,一个CSS像素就对应一个 dip(设备逻辑像素),而layout viewport(布局视口)的宽度,ideal viewport(理想视口)的宽度(通常说的分辨率),dip 的宽度值是相等的。
height
与width类似,但实际上却不常用。
initial-scale
initial-scale用于指定页面的初始缩放比例:
initial-scale=1 表示将layout viewport(布局视口)的宽度设置为 ideal viewport(理想视口)的宽度,initial-scale=1.5 表示将layout viewport(布局视口)的宽度设置为 ideal viewport(理想视口)的宽度的1.5倍。
maximum-scale
maximum-scale用于指定用户能够放大的最大比例。
假设页面的默认缩放值initial-scale是1,那么用户最终能够将页面放大到这个初始页面大小的3倍。
minimum-scale
类似maximum-scale的描述,不过minimum-scale是用来指定页面缩小比例的。通常情况下,不会定义该属性的值,页面太小将难以阅读。
user-scalable
user-scalable来控制用户是否可以通过手势对页面进行缩放。该属性的默认值为yes,可被缩放,你也可以将该值设置为no,表示不允许用户缩放网页。
在高分辨率手机一个像素代表多个像素点,就会导致边框和文字大小变粗,那么如何解决这个问题?
var metaEl = doc.createElement('meta'); //判断是否是视网膜屏 var scale = isRetina ? 0.5:1; //动态生成meta标签 metaEl.setAttribute('name','viewport'); metaEl.setAttribute('content','initial-scale='+scale+',maximum-scale='+scale+',minimum-scale='+scale+',user-scalable=no'); if(docEl.firstElementChild){ document.documentElement.firstElementChild.appendChild(metaEl); }else{ var wrap = doc.createElement('div'); wrap.appendChild(metaEl); document.write(wrap.innerHTML); }
- Bootstrap
- BootStrap
- Bootstrap
- bootstrap
- Bootstrap
- bootstrap$
- Bootstrap
- Bootstrap
- Bootstrap
- Bootstrap
- Bootstrap
- Bootstrap
- bootstrap
- bootstrap
- Bootstrap
- Bootstrap
- Bootstrap
- bootstrap
- 技术分享连载(五十三)
- FineReport
- 计算机视觉随谈
- 企业招聘大数据人才 看重的是哪些方面?
- tomcat的server locations修改
- BootStrap
- malloc/free和new/delete
- Java核心库—IO(三)
- iPhone X 适配手Q H5 页面通用解决方案
- ionic2 判断是否是第一次登陆应用是否实现启动页的显示
- 二分图大讲堂——彻底搞定最大匹配数(最小覆盖数)、最大独立数、最小路径覆盖、带权最优匹配
- 打印空引用不会报空指针异常的原因
- kafka生产者消费者简单实例
- mysql单点库到集群库的迁移