Bootstrap

最新推荐文章于 2024-03-22 17:16:56 发布

原创最新推荐文章于 2024-03-22 17:16:56 发布 · 673 阅读

1 ·

CC 4.0 BY-SA版权

笔记同时被 2 个专栏收录

20 篇文章

订阅专栏

web前端

10 篇文章

订阅专栏

在h5中使用
1.格式：<html lang="zh-CN">
2.移动设备优先
为了确保适当的绘制和触屏缩放，需要在<head> 之中添加 viewport 元数据标签。

 <meta name="viewport" content="width=device-width, initial-scale=1">

视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

全局CSS样式
3.激活状态按钮处于激活状态时通过:active实现 <a>元素通过.active类实现
4.输入框焦点 :focus状态赋予box-shadow属性
5.校验状态 .has-warning .has-error .has-success
添加图标位置 .has-feedback 写在div中
写在span中 .glyphicon .glyphicon-ok//对勾 .glyphicon-warning-sign //警告 glyphicon-remove //错误
form-control-feedback //设置位置
6.图片为图片添加.img-responsive类可以让图片支持响应式布局(实质是为图片设置了max-width:100%;height:auto;)
图片形状 .img-rounded //圆角 .img-circle //圆形 .img-thumbnail //圆角边框注：IE8不支持CSS3中的圆角属性

组件的使用
7.下拉菜单

<div class="dropdown">
            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
                Drop
                <spqn class="caret"></span>
                </button>
        <ul class="dropdown-menu" role="memu" aria-lablelledby="dropdownMenu1">
                <li role="presentation">Action</li>
                <li role="presentation">Another</li>
            </ul>
    </div>

![下拉列表](https://img-blog.youkuaiyun.com/20161117090818720) 8.向上弹出

<div class="btn-group dropup">
  <button type="button" class="btn btn-default">Dropup</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

9.分页

<nav>
  <ul class="pagination">
    <li><a href="#">&laquo;</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">&raquo;</a></li>
  </ul>
</nav>
```![分页组件](https://img-blog.youkuaiyun.com/20161117093305896)
可控制大小




<div class="se-preview-section-delimiter"></div>

![可控页码大小](https://img-blog.youkuaiyun.com/20161117094043186)
10.控制条




<div class="se-preview-section-delimiter"></div>

60%

“`
进度条
style=”width:可变参数”