bootstrap 起步笔记 常用类名属性

html窗口配置

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

 initial-scale=1  初始比例

 user-scalable=no  是否可以手动缩放

 

导航

导航navbar  导航默认样式navbar-default  导航固定顶部navbar-fixed-top   导航固定底部navbar-fixed-bottom   导航右对齐navbar-right

 

图片自适应

img-responsive

 

滤镜效果

背景图片加滤镜效果原理：背景图片上加div, 给div一个背景颜色，给颜色降低不透明度

 

按钮

 <button type="button" class="btn btn-default">默认按钮样式</button>

 

按钮hover淡入效果

.btn{transition:all 0.3s;}

 

表单默认样式

<input type="text" class="form-control" placeholder="输入内容“/>

<textarea class="form-control" placeholder="输入内容“ rows="4"></textarea>

<input type="submit" class="form-control" value="提交“/> //提交按钮

按钮css样式   input[type="submit"]{background-color:#000;color:#fff;}

表单下拉选择

<div class="from-group">
    <label for="xy">选择 </label>
    <select id="xy" class="from-control">
        <option>...</option>
        <option>...</option>
        <option>...</option>
    </select>

</div>

 文本居中

<div class="text-center"></div>

在css中添加如下内容 可以分别定制不同屏幕的显示样式：

/* 大屏幕 ：大于等于1200px*/
@media (min-width: 1200px) { ... }

/*默认*/
@media (min-width: 980px){...}

/* 平板电脑和小屏电脑之间的分辨率 */
@media (min-width: 768px) and (max-width: 979px) { ... }
 
/* 横向放置的手机和竖向放置的平板之间的分辨率 */
@media (max-width: 767px) { ... }
 
/* 横向放置的手机及分辨率更小的设备 */
@media (max-width: 480px) { ... }

以下这些可以通过媒体查询结合大型、小型和中型设备，实现内容对设备的显示和隐藏

class  设备   

.visible-xs 额外的小设备（小于 768px）可见
.visible-sm 小型设备（768 px 起）可见
.visible-md 中型设备（768 px 到 991 px）可见
.visible-lg 大型设备（992 px 及以上）可见
.hidden-xs 额外的小设备（小于 768px）隐藏
.hidden-sm 小型设备（768 px 起）隐藏
.hidden-md 中型设备（768 px 到 991 px）隐藏
.hidden-lg 大型设备（992 px 及以上）隐藏