BootStrap

最新推荐文章于 2024-08-31 06:39:46 发布

原创最新推荐文章于 2024-08-31 06:39:46 发布 · 302 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap

bootstrap 专栏收录该内容

2 篇文章

订阅专栏

本文介绍 BootStrap 中的排版技巧，包括标题、段落、表格、表单和按钮的样式设置方法。同时讲解了不同类型的按钮样式及表格的美化方式。

模拟实现标题

例如下面这两段代码的效果是一样的

<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);
    }