GVKun编程网logo

前端框架之Bootstrap框架(bootstrap前端框架用法)

28

对于想了解前端框架之Bootstrap框架的读者,本文将是一篇不可错过的文章,我们将详细介绍bootstrap前端框架用法,并且为您提供关于06前端之Bootstrap框架、1-1.前端框架之boot

对于想了解前端框架之Bootstrap框架的读者,本文将是一篇不可错过的文章,我们将详细介绍bootstrap前端框架用法,并且为您提供关于06 前端之Bootstrap框架、1-1.前端框架之bootstrap、appium框架之bootstrap、Bootstrap - 前端框架的有价值信息。

本文目录一览:

前端框架之Bootstrap框架(bootstrap前端框架用法)

前端框架之Bootstrap框架(bootstrap前端框架用法)

下载地址:https://v3.bootcss.com/

需要获取的样式代码,可以直接从这些地方找到,然后复制

 

 一、HTML页面导入文件,因为Bootstrap要依赖于jquery,所以也要把jquery导进来

 

 二、布局容器

Bootstrap需要为页面内容和栅格系统包裹一个.container容器。有两种:

一、  container  左边和右边留有空白的容器布局

二、  container-fluid  类似于100%宽度,占据全部视口的容器

三、栅格系统

系统会自动将一行分为12列

行(row),列(column)

<!DOCTYPE html>
<html lang="en">
<head>
  <Meta charset="UTF-8">
  <title>Title</title>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
  <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

</head>
<body>

<!--导航条样式-->
<nav>
  <div>
    <!-- Brand and toggle get grouped for better mobile display -->
    <div>
      <button type="button"data-toggle="collapse"
              data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span>Toggle navigation</span>
        <span></span>
        <span></span>
        <span></span>
      </button>
      <ahref="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <divid="bs-example-navbar-collapse-1">
      <ul>
        <li><a href="#">Link <span>(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li>
          <a href="#"data-toggle="dropdown" role="button" aria-haspopup="true"
             aria-expanded="false">Dropdown <span></span></a>
          <ul>
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form>
        <div>
          <input type="text"placeholder="Search">
        </div>
        <button type="submit">Submit</button>
      </form>
      <ul>
        <li><a href="#">Link</a></li>
        <li>
          <a href="#"data-toggle="dropdown" role="button" aria-haspopup="true"
             aria-expanded="false">Dropdown <span></span></a>
          <ul>
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>


<div>
  <div>
    <!--左侧框-->
    <div>

      <div>
        <a href="#">
          Cras justo odio
        </a>
        <a href="#">Dapibus ac facilisis in</a>
        <a href="#">Morbi leo risus</a>
        <a href="#">Porta ac consectetur ac</a>
        <a href="#">Vestibulum at eros</a>
      </div>
    </div>

    <!--右侧框-->
    <div>
      <div>
        <divhttps://www.jb51.cc/tag/heading/" target="_blank">heading">
          <h3>图书管理系统
            <span></span>
          </h3>
        </div>

        <div>
          <!--搜索框-->
          <div>
            <div>
              <input type="text"placeholder="搜索">
              <span>
        <buttontype="button">搜索</button>
            </span>
            </div><!-- /input-group -->
          </div>
          <!--按钮-->
          <button type="button">新建</button>

          <br>
          <br>
          <br>


          <!--表格-->
          <table>
            <thead>
            <tr>
              <th>编号</th>
              <th>书名</th>
              <th>价格</th>
              <th>作者</th>
              <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>1</td>
              <td>三国演义</td>
              <td>199.99</td>
              <td>罗贯中</td>
              <td>
                <a href="">编辑</a>
                <a href="">删除</a>
              </td>
            </tr>
            <tr>
              <td>1</td>
              <td>三国演义</td>
              <td>199.99</td>
              <td>罗贯中</td>
              <td>
                <a href="">编辑</a>
                <a href="">删除</a>
              </td>
            </tr>
            </tbody>
          </table>
          <!--分页-->
          <div>
            <nav aria-label="Page navigation">
              <ul>
                <li>
                  <a href="#" aria-label="PrevIoUs">
                    <span aria-hidden="true">&laquo;</span>
                  </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="#" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                  </a>
                </li>
              </ul>
            </nav>
          </div>

        </div>


      </div>
    </div>

  </div>
</div>
</body>
</html>
图书馆系统

四、表格

table-bordered为表格和每个单元格增加边框

table-hover 为每一行对鼠标悬停状态做出相应

table-striped 给tbody内的每一行增加斑马条纹样式

 

 

 

总结

以上是小编为你收集整理的前端框架之Bootstrap框架全部内容。

如果觉得小编网站内容还不错,欢迎将小编网站推荐给好友。

原文地址:https://www.cnblogs.com/wangcuican/p/11508304.html

06 前端之Bootstrap框架

06 前端之Bootstrap框架

目录
  • 前端之Bootstrap框架
    • 一、简介
    • 二、引入方式
      • 本地引入(最完整的)
      • CDN引入
    • 三、布局容器
    • 四、栅格系统
    • 五、列偏移
    • 六、表格与表单
      • 6.1表格
      • 6.2表单form
    • 七、按钮
      • 预定义样式
    • 八、组件
      • 如何使用

前端之Bootstrap框架

一、简介

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。
该框架是很多前端框架的鼻祖 学会它几乎可以熟悉很多框架的原理

二、引入方式

地址:https://v3.bootcss.com/
bootstrap需要依赖于jQuery才能正常执行(动态效果)
PS: 第一次使用该框架的时候最好采用本地导入的方式,让pycharm记住bootstrap的关键字。

本地引入(最完整的)

1.引入jQuery
2.引入bootstrap的css文件
3.引入bootstrap的js文件
@H_301_65@

将下载完的文件夹拖到pycharm编程项目中即可。(推荐3.4版本非常稳定)

image

CDN引入

1.引入jQuery CDN
2.引入bootstrap css的 CDN
3.引入bootstrap js的 CDN
导入到HTML文件中的<head>即可,如下图
@H_301_65@

image

三、布局容器

下面进入第一个重要知识点,学会后就可以自己搭建页面了。
首先了解下多数浏览页面的左右两侧都有空白区域————称谓左右留白

container    左右留白
container-fluid   左右不留白
@H_301_65@

image


实际效果图:

image

四、栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列,即响应式布局
该系统能够自动监测浏览器窗口大小,从而根据大小来进行变化。

image


参数及使用:

row      行  # 一个row就是一行 一行是固定的12份
col-md-1    占几份
col-sm-1    占几份
col-xs-1    占几份
col-lg-1    占几份
@H_301_65@

实测:
代码:

点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

    <style>
      .c1{
          background-color: red;
          height: 200px;
          border: 5px solid black;
      }
    </style>


</head>
<body>
    <div>
      <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>
@H_301_65@

实际效果图:

image


这样只是在网页端是分布式布局,但是切换到移动端就变了,所以需要增加代码。

<div></div>
<div></div>
我这里将移动端页面改为4、8分成。
@H_301_65@

image


以下就是栅格系统需要掌握的代码参数

image


PS:对于小白来说,掌握这些就足够了!

五、列偏移

列偏移:就是将任意份数的一行,进行向左或向右移动的操作。

col-md-offset-3 向右移动3份
@H_301_65@

image

六、表格与表单

6.1表格

编写一个表格,如下折叠代码。

点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div>
        <div>
            // 向右移动3份,居中
            <div>
                // 文本直接text-center即可。
                <h2>用户数据表单</h2>
                // 添加表格的样式,用着三个即可。
                <table>
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Age</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>张三</td>
                            <td>18</td>
                        </tr>
                    </tbody>
                    <tbody>
                        <tr>
                            <td>2</td>
                            <td>李四</td>
                            <td>18</td>
                        </tr>
                    </tbody>
                    <tbody>
                        <tr>
                            <td>3</td>
                            <td>王五</td>
                            <td>18</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>
</html>
@H_301_65@
使用框架调整页面样式一般都是操作标签的class属性。
即table中的class,添加了多种样式。table-hover  悬浮
table-bordered  增加边框
table-striped  增加背景颜色
@H_301_65@

实际效果图如下:

image


增加颜色后的body代码如下:

body代码
<body>
    <div>
        <div>
<!--            向右移动3份,居中-->
            <div>
<!--                文本直接text-center即可。-->
                <h2>用户数据表单</h2>
<!--                添加表格的样式,用着三个即可。-->
                <table>
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>张三</td>
                            <td></td>
                        </tr>
                    </tbody>
                    <tbody>
                        <tr>
                            <td>2</td>
                            <td>李四</td>
                            <td></td>
                        </tr>
                    </tbody>
                    <tbody>
                        <tr>
                            <td>3</td>
                            <td>王五</td>
                            <td></td>
                        </tr>
                    </tbody>
                    <tbody>
                        <tr>
                            <td>4</td>
                            <td>赵六</td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>
@H_301_65@

实际效果图:

image

6.2表单form

在form表单的优化页面中,只需记住下面一行代码即可。

<input type="text"disabled>
form-control 优化页面
disbaled 禁止其与用户有任何交互
@H_301_65@

input输入框内阴影提示:

点击查看代码
<form>
  <div>
    <labelfor="exampleInputEmail3">Email address</label>
    <input type="email"id="exampleInputEmail3" placeholder="Email">
  </div>
  <div>
    <labelfor="exampleInputPassword3">Password</label>
    <input type="password"id="exampleInputPassword3" placeholder="Password">
  </div>
  <divhttps://www.jb51.cc/tag/Box/" target="_blank">Box">
    <label>
      <input type="checkBox"> Remember me
    </label>
  </div>
  <button type="submit">Sign in</button>
</form>
@H_301_65@

实际效果图如下:

image

七、按钮

为 a、button 或 input 元素添加按钮类(button class)即可使用 Bootstrap 提供的样式。
想让谁变成按钮,就在他标签内添加即可。

预定义样式

预定义样式代码
<!-- Standard button -->
<button type="button">(默认样式)Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button">(首选项)Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button">(成功)Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button">(一般信息)Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button">(警告)Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button">(危险)Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button">(链接)Link</button>
@H_301_65@

实际效果图如下:

image

八、组件

image

如何使用

复制图标下面的代码

不要和其他组件混合使用
图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。应该创建一个嵌套的 <span> 标签,并将图标类应用到这个 <span> 标签上。

只对内容为空的元素起作用
图标类只能应用在不包含任何文本内容或子元素的元素上。
@H_301_65@

综上以及学习bootstrap官网内容后,娱乐的代码如下:

点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap-theme.min.css">
    <script src="bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>
<nav>
  <div>
    <!-- Brand and toggle get grouped for better mobile display -->
    <div>
      <button type="button"data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span>Toggle navigation</span>
        <span></span>
        <span></span>
        <span></span>
      </button>
      <ahref="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <divid="bs-example-navbar-collapse-1">
      <ul>
        <li><a href="#">Link <span>(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li>
          <a href="#"data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span></span></a>
          <ul>
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form>
        <div>
          <input type="text"placeholder="Search">
        </div>
        <button type="submit">Submit</button>
      </form>
      <ul>
        <li><a href="#">Link</a></li>
        <li>
          <a href="#"data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span></span></a>
          <ul>
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
<div>
  <divhttps://www.jb51.cc/tag/heading/" target="_blank">heading">
    <h3>标题</h3>
  </div>
  <div>
    <div>
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><ahref="#" role="button">Learn more</a></p>
</div>
  </div>
</div>


<!-- Button trigger modal -->
<button type="button"data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<divid="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <divrole="document">
    <div>
      <div>
        <button type="button"data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4id="myModalLabel">Modal title</h4>
      </div>
      <div>
        ...
      </div>
      <div>
        <button type="button"data-dismiss="modal">Close</button>
        <button type="button">Save changes</button>
      </div>
    </div>
  </div>
</div>












    <div>
        <div>
            <div>
                <div>
                  <div>
                    <a href="#">
                      <img src="https://img1.baidu.com/it/u=1875739781,4152007440&fm=253&fmt=auto&app=120&f=JPEG?w=1024&h=576" alt="...">
                    </a>
                  </div>
                  <div>
                    <a href="#">
                      <img src="https://img1.baidu.com/it/u=1875739781,4152007440&fm=253&fmt=auto&app=120&f=JPEG?w=1024&h=576" alt="...">
                    </a>
                  </div>
                  <div>
                    <a href="#">
                      <img src="https://img1.baidu.com/it/u=1875739781,4152007440&fm=253&fmt=auto&app=120&f=JPEG?w=1024&h=576" alt="...">
                    </a>
                  </div>
                  <div>
                    <a href="#">
                      <img src="https://img1.baidu.com/it/u=1875739781,4152007440&fm=253&fmt=auto&app=120&f=JPEG?w=1024&h=576" alt="...">
                    </a>
                  </div>
                </div>

                <div>
                  <divrole="progressbar" aria-valueNow="45" aria-valuemin="0" aria-valuemax="100">
                    <span>45% Complete</span>
                  </div>
                </div>
            <div id="carousel-example-generic"data-ride="carousel">
  <!-- Indicators -->
  <ol>
    <li data-target="#carousel-example-generic" data-slide-to="0"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <divrole="listBox">
    <div>
      <img src="..." alt="...">
      <div>
        ...
      </div>
    </div>
    <div>
      <img src="..." alt="...">
      <div>
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <ahref="#carousel-example-generic" role="button" data-slide="prev">
    <spanaria-hidden="true"></span>
    <span>PrevIoUs</span>
  </a>
  <ahref="#carousel-example-generic" role="button" data-slide="next">
    <spanaria-hidden="true"></span>
    <span>Next</span>
  </a>
</div>
                <div>
                  <div>
                    <div>
                      <img src="https://img0.baidu.com/it/u=3112218522,2073304928&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=1026" alt="...">
                      <div>
                        <h3>Thumbnail label</h3>
                        <p>...</p>
                        <p><a href="#"role="button">Button</a> <a href="#"role="button">Button</a></p>
                      </div>
                    </div>
                  </div>
                    <div>
                    <div>
                      <img src="https://img0.baidu.com/it/u=3112218522,2073304928&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=1026" alt="...">
                      <div>
                        <h3>Thumbnail label</h3>
                        <p>...</p>
                        <p><a href="#"role="button">Button</a> <a href="#"role="button">Button</a></p>
                      </div>
                    </div>
                  </div>
                    <div>
                    <div>
                      <img src="https://img0.baidu.com/it/u=3112218522,2073304928&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=1026" alt="...">
                      <div>
                        <h3>Thumbnail label</h3>
                        <p>...</p>
                        <p><a href="#"role="button">Button</a> <a href="#"role="button">Button</a></p>
                      </div>
                    </div>
                  </div>
                </div>



                <a href="">点我</a>
                <input type="reset">
                <input type="reset">
                <input type="reset">
                <input type="reset">

                
                <h2>用户数据 <span></span></h2>
                <table>
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>NAME</th>
                            <th>PWD</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>jason</td>
                            <td>123</td>
                        </tr>
                    <tr>
                            <td>2</td>
                            <td>kevin</td>
                            <td>321</td>
                        </tr>
                    <tr>
                            <td>3</td>
                            <td>tony</td>
                            <td>222</td>
                        </tr>
                    </tbody>
                    <tbody></tbody>
                </table>
                <h2>用户注册 <iaria-hidden="true"></i></h2>
                <form action="">
                    <p>username:
                        <input type="text"value="jason" disabled>
                    </p>
                    <p>password:
                        <input type="text">
                    </p>
                    <p>
                        <input type="radio">男
                        <input type="radio">女
                        <input type="radio">其他
                    </p>
                    <p>
                        <select name="" id="">
                            <option value="">111</option>
                            <option value="">222</option>
                            <option value="">333</option>
                        </select>

                    </p>
                    <input type="submit">
                </form>

                <i></i>
                <span>Loading...</span>

                <i></i>
                <span>Loading...</span>

                <i></i>
                <span>Loading...</span>

                <i></i>
                <span>Loading...</span>

                <ihttps://www.jb51.cc/tag/pulse/" target="_blank">pulse fa-3x fa-fw"></i>
                <span>Loading...</span>

                <img src="..." alt="...">
                <img src="..." alt="...">
                <img src="..." alt="...">
            </div>
            
        </div>
    </div>

</body>
</html>
@H_301_65@

总结

以上是小编为你收集整理的06 前端之Bootstrap框架全部内容。

如果觉得小编网站内容还不错,欢迎将小编网站推荐给好友。

原文地址:https://www.cnblogs.com/panda-xin/p/15889500.html

1-1.前端框架之bootstrap

1-1.前端框架之bootstrap

前端框架之bootstrap

BootStrap 由Twitter的设计师Mark otto和Jacob Thornton合作开发,是一个简洁、直观、强悍的 CSS/HTML前端开发框架,让web开发更迅速、简单。 使用BootStrap 可以将它预先下载到电脑上并放入静态文件中,也可以通过直接在HTML文件里导入cdn链 接进行使用,cdn链接可以直接使用各种搜素哦引擎轻松获得。

Bootstrap 源码

https://github.com/twbs/bootstrap/archive/v3.4.1.zip

cdn

CDN:内容分发网络
为了加快对静态资源(图片、css文件、js文件)数据的访问速度
bootstrap涉及到动态效果需要使用jQuery

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

Bootstrap 中文文档

总结

以上是小编为你收集整理的1-1.前端框架之bootstrap全部内容。

如果觉得小编网站内容还不错,欢迎将小编网站推荐给好友。

原文地址:https://www.cnblogs.com/hhf1751342707/p/15732823.html

appium框架之bootstrap

appium框架之bootstrap

(闲来无事,做做测试..)最近弄了弄appium,感觉挺有意思,就深入研究了下。

看小弟这篇文章之前,先了解一下appium的架构,对你理解有好处,推荐下面这篇文章:testerhome

appium是开源项目,可以获得源码:appium-master

在eclipse中用maven导入会发现有2个项目:bootstrap和sauce_appium_junit。

sauce_appium_junit是一些测试用例的集合,帮助学习的。bootstrap就是appium架构中放在手机端的一个服务器。就从它开始吧。


bootstrap结构


如图所示为bootstrap的项目结构



bootstrap作用


bootstrap在appium中是以jar包的形式存在的,它实际上是一个uiautomator写的case包,通过PC端的命令可以在手机端执行。


bootstrap源码分析


首先程序的入口为Bootstrap类。所以从该类开始一步一步解释这个项目


Bootstrap.java

package io.appium.android.bootstrap;

import io.appium.android.bootstrap.exceptions.socketServerException;

import com.android.uiautomator.testrunner.UiAutomatorTestCase;

/**
 * The Bootstrap class runs the socket server. uiautomator开发的脚本,可以直接在pc端启动
 */
public class Bootstrap extends UiAutomatorTestCase {

  public void testRunServer() {
    SocketServer server;
    try {
      // 启动socket服务器,监听4724端口。
      server = new SocketServer(4724);
      server.listenForever();
    } catch (final SocketServerException e) {
      Logger.error(e.getError());
      System.exit(1);
    }

  }
}

该类继承自UiAutomatorTestCase。所以它才能通过adb shell uiautomator runtest AppiumBootstrap.jar -c io.appium.android.bootstrap.Bootstrap被执行。

该类很简单,就是启动线程,监听4724端口,该端口与appium通信。


然后走server.listenForever()方法。

SocketServer.java

/**
   * Listens on the socket for data,and calls {@link #handleClientData()} when
   * it''s available.
   * 
   * @throws SocketServerException
   */
  public void listenForever() throws SocketServerException {
    Logger.debug("Appium Socket Server Ready");
    //读取strings.json文件的数据
    UpdateStrings.loadStringsJson();
    // 注册两种监听器:AND和Crash
    dismissCrashAlerts();
    final TimerTask updateWatchers = new TimerTask() {
      @Override
      public void run() {
        try {
          // 检查系统是否有异常
          watchers.check();
        } catch (final Exception e) {
        }
      }
    };
    // 计时器,0.1秒后开始,每隔0.1秒执行一次。
    timer.scheduleAtFixedrate(updateWatchers,100,100);

    try {
      client = server.accept();
      Logger.debug("Client connected");
      in = new BufferedReader(new InputStreamReader(client.getInputStream(),"UTF-8"));
      out = new BufferedWriter(new OutputStreamWriter(client.getoutputStream(),"UTF-8"));
      while (keepListening) {
        // 获取客户端数据
        handleClientData();
      }
      in.close();
      out.close();
      client.close();
      Logger.debug("Closed client connection");
    } catch (final IOException e) {
      throw new SocketServerException("Error when client was trying to connect");
    }
  }


该方法中首先调用UpdateStrings.loadStringsJson();该方法如下:


UpdateStrings


/**
   * strings.json文件保存的是apk的strings.xml里的内容,在Bootstrap启动前由appium服务器解析并push到设备端的
   * 
   * @return
   */
  public static boolean loadStringsJson() {
    Logger.debug("Loading json...");
    try {
      final String filePath = "/data/local/tmp/strings.json";
      final File jsonFile = new File(filePath);
      // json will not exist for apks that are only on device
      // 你的case必须写明apk的路径,如果启动设备上已有的应用而case中没有app路径,此时json文件是不存在的
      // because the node server can''t extract the json from the apk.
      if (!jsonFile.exists()) {
        return false;
      }
      final DataInputStream dataInput = new DataInputStream(
          new FileInputStream(jsonFile));
      final byte[] jsonBytes = new byte[(int) jsonFile.length()];
      dataInput.readFully(jsonBytes);
      // this closes FileInputStream
      dataInput.close();
      final String jsonString = new String(jsonBytes,"UTF-8");
      // 将读取出来的信息赋给Find类中的属性,以做后用
      Find.apkStrings = new JSONObject(jsonString);
      Logger.debug("json loading complete.");
    } catch (final Exception e) {
      Logger.error("Error loading json: " + e.getMessage());
      return false;
    }
    return true;
  }

然后回到ServerSocket类的listenForever(),此时执行到dismissCrashAlerts();该方法作用是注册一些监听器,观察是否有弹出框或者AND和crash的异常。


public void dismissCrashAlerts() {
    try {
      new UiWatchers().registeranrAndCrashWatchers();
      Logger.debug("Registered crash watchers.");
    } catch (final Exception e) {
      Logger.debug("Unable to register crash watchers.");
    }
  }

此时listenForever()方法里执行到注册心跳程序,每隔0.1秒开始执行一遍上面注册的监听器来检查系统是否存在异常。


final TimerTask updateWatchers = new TimerTask() {
      @Override
      public void run() {
        try {
          // 检查系统是否有异常
          watchers.check();
        } catch (final Exception e) {
        }
      }
    };
    // 计时器,0.1秒后开始,每隔0.1秒执行一次。
    timer.scheduleAtFixedrate(updateWatchers,100);

然后启动数据通道,接受客户端发来的数据和返回结果给客户端。


client = server.accept();
      Logger.debug("Client connected");
      in = new BufferedReader(new InputStreamReader(client.getInputStream(),"UTF-8"));

接下来就是最重要的方法handleClientData();到此listenForever()方法的主要作用就完成了。现在来看handleClientData()方法做了啥。


/**
   * When data is available on the socket,this method is called to run the
   * command or throw an error if it can''t.
   * 
   * @throws SocketServerException
   */
  private void handleClientData() throws SocketServerException {
    try {
      input.setLength(0); // clear

      String res;
      int a;
      // (char) -1 is not equal to -1.
      // ready is checked to ensure the read call doesn''t block.
      while ((a = in.read()) != -1 && in.ready()) {
        input.append((char) a);
      }
      final String inputString = input.toString();
      Logger.debug("Got data from client: " + inputString);
      try {
        final AndroidCommand cmd = getCommand(inputString);
        Logger.debug("Got command of type " + cmd.commandType().toString());
        res = runcommand(cmd);
        Logger.debug("Returning result: " + res);
      } catch (final CommandTypeException e) {
        res = new AndroidCommandResult(WDStatus.UNKNowN_ERROR,e.getMessage())
            .toString();
      } catch (final JSONException e) {
        res = new AndroidCommandResult(WDStatus.UNKNowN_ERROR,"Error running and parsing command").toString();
      }
      out.write(res);
      out.flush();
    } catch (final IOException e) {
      throw new SocketServerException("Error processing data to/from socket ("
          + e.toString() + ")");
    }
  }

该方法中读取客户端发来的数据,利用getCommand()方法获得AndroidCommand对象,然后执行runcommand()方法,获取直接的结果。那么该方法的作用就转移到了runcommand()。所以现在就来看runcommand()方法是啥意思啦。


/**
   * When {@link #handleClientData()} has valid data,this method delegates the
   * command.
   * 
   * @param cmd
   *          AndroidCommand
   * @return Result
   */
  private String runcommand(final AndroidCommand cmd) {
    AndroidCommandResult res;
    if (cmd.commandType() == AndroidCommandType.SHUTDOWN) {
      keepListening = false;
      res = new AndroidCommandResult(WDStatus.SUCCESS,"OK,shutting down");
    } else if (cmd.commandType() == AndroidCommandType.ACTION) {
      try {
        res = executor.execute(cmd);
      } catch (final Exception e) {
        res = new AndroidCommandResult(WDStatus.UNKNowN_ERROR,e.getMessage());
      }
    } else {
      // this code should never be executed,here for future-proofing
      res = new AndroidCommandResult(WDStatus.UNKNowN_ERROR,"UnkNown command type,Could not execute!");
    }
    return res.toString();
  }
}

该方法首先做了判断,判断命令数据哪种类型,主要有关机命令和动作命令,我们主要关注动作命令,因为动作有很多种。所以来关注第一个else if中的AndroidCommandExecutor.execute()方法。主线又转移到了该方法中了,切去瞅一眼。

AndroidCommandExecutor.java

/**
   * Gets the handler out of the map,and executes the command.
   *
   * @param command
   *          The {@link AndroidCommand}
   * @return {@link AndroidCommandResult}
   */
  public AndroidCommandResult execute(final AndroidCommand command) {
    try {
      Logger.debug("Got command action: " + command.action());

      if (map.containsKey(command.action())) {
        return map.get(command.action()).execute(command);
      } else {
        return new AndroidCommandResult(WDStatus.UNKNowN_COMMAND,"UnkNown command: " + command.action());
      }
    } catch (final JSONException e) {
      Logger.error("Could not decode action/params of command");
      return new AndroidCommandResult(WDStatus.JSON_DECODER_ERROR,"Could not decode action/params of command,please check format!");
    }
  }

该方法中终于要执行命令的实体啦


if (map.containsKey(command.action())) {
        return map.get(command.action()).execute(command);
      } else {
        return new AndroidCommandResult(WDStatus.UNKNowN_COMMAND,"UnkNown command: " + command.action());
      }


关键是上面这几行代码,调用了map.get(command.action()).execute(command).看来要想弄懂这个命令的意思,肯定得知道map里存放的对象是哪些,那么在该类中找到map的初始化代码:


static {
    map.put("waitForIdle",new WaitForIdle());
    map.put("clear",new Clear());
    map.put("orientation",new Orientation());
    map.put("swipe",new Swipe());
    map.put("flick",new Flick());
    map.put("drag",new Drag());
    map.put("pinch",new Pinch());
    map.put("click",new Click());
    map.put("touchLongClick",new TouchLongClick());
    map.put("touchDown",new TouchDown());
    map.put("touchUp",new TouchUp());
    map.put("touchMove",new TouchMove());
    map.put("getText",new GetText());
    map.put("setText",new SetText());
    map.put("getName",new GetName());
    map.put("getAttribute",new GetAttribute());
    map.put("getDeviceSize",new GetDeviceSize());
    map.put("scrollTo",new ScrollTo());
    map.put("find",new Find());
    map.put("getLocation",new GetLocation());
    map.put("getSize",new GetSize());
    map.put("wake",new Wake());
    map.put("pressBack",new PressBack());
    map.put("dumpWindowHierarchy",new DumpWindowHierarchy());
    map.put("pressKeyCode",new PressKeyCode());
    map.put("longPressKeyCode",new LongPressKeyCode());
    map.put("takeScreenshot",new TakeScreenshot());
    map.put("updateStrings",new UpdateStrings());
    map.put("getDataDir",new GetDataDir());
    map.put("performMultiPointerGesture",new MultiPointerGesture());
    map.put("openNotification",new OpenNotification());
  }

豁然开朗,该map是<String,CommandHandler>形式的map。value值对应的都是一个个的对象,这些对象都继承与CommandHandler,里面都有execute方法,该方法就是根据命令的不同调用不同的对象来执行相关代码获取结果。从map的定义可以看出,appium可以操作手机的命令还不少,我用过的有scrollTo,updateStrings,getDataDir等,上面还有截图、打开通知栏、按下等还没用过,但通过这些命令你也可以了解appium可以做哪些事。


继承CommandHandler的对象有很多,我挑一个来讲讲它具体是干嘛的,其他的我以后会挨个讲,就挑click吧。

加入现在传过来的命令后缀是click的话,那么它会调用Click对象的execute方法。


Click.java


package io.appium.android.bootstrap.handler;

import com.android.uiautomator.core.UiDevice;
import com.android.uiautomator.core.UiObjectNotFoundException;
import io.appium.android.bootstrap.*;
import org.json.JSONException;

import java.util.ArrayList;
import java.util.Hashtable;

/**
 * This handler is used to click elements in the Android UI.
 * 
 * Based on the element Id,click that element.
 * 
 */
public class Click extends CommandHandler {

  /*
   * @param command The {@link AndroidCommand}
   * 
   * @return {@link AndroidCommandResult}
   * 
   * @throws JSONException
   * 
   * @see io.appium.android.bootstrap.CommandHandler#execute(io.appium.android.
   * bootstrap.AndroidCommand)
   */
  @Override
  public AndroidCommandResult execute(final AndroidCommand command)
      throws JSONException {
    if (command.isElementCommand()) {
      try {
        final AndroidElement el = command.getElement();
        el.click();
        return getSuccessResult(true);
      } catch (final UiObjectNotFoundException e) {
        return new AndroidCommandResult(WDStatus.NO_SUCH_ELEMENT,e.getMessage());
      } catch (final Exception e) { // handle NullPointerException
        return getErrorResult("UnkNown error");
      }
    } else {
      final Hashtable<String,Object> params = command.params();
      final Double[] coords = { Double.parseDouble(params.get("x").toString()),Double.parseDouble(params.get("y").toString()) };
      final ArrayList<Integer> posVals = absPosFromCoords(coords);
      final boolean res = UiDevice.getInstance().click(posVals.get(0),posVals.get(1));
      return getSuccessResult(res);
    }
  }
}

该类就一个execute方法这根独苗,execute方法中会先判断传入的参数对象是坐标值还是元素值,如果是元素值那么直接调用AndroidElement中的click方法,一会我们再去看这个方法。如果是坐标的话,它会干什么呢。它会调用UiDevice的click方法,用过UiAutomator的人都知道它是uiautomator包中的类。所以说appium在api16以上的机器上使用的uiautomator机制。貌似有人觉得这好像easy了点。那好吧,我们再分析一个touchDown命令,如果传过来的命令后缀是touchDown,那么它会调用TouchDown对象的execute方法。

map.put("touchDown",new TouchDown());

这个类里面的execute方法就有点意思啦。


TouchDown.java


package io.appium.android.bootstrap.handler;

import com.android.uiautomator.common.ReflectionUtils;
import com.android.uiautomator.core.UiObjectNotFoundException;
import io.appium.android.bootstrap.Logger;

import java.lang.reflect.Method;

/**
 * This handler is used to perform a touchDown event on an element in the
 * Android UI.
 * 
 */
public class TouchDown extends TouchEvent {

  @Override
  protected boolean executetouchEvent() throws UiObjectNotFoundException {
    printEventDebugLine("TouchDown");
    try {
      final ReflectionUtils utils = new ReflectionUtils();
      final Method touchDown = utils.getControllerMethod("touchDown",int.class,int.class);
      return (Boolean) touchDown.invoke(utils.getController(),clickX,clickY);
    } catch (final Exception e) {
      Logger.debug("Problem invoking touchDown: " + e);
      return false;
    }
  }
}

该方法里用到了反射,调用uiautomator里的隐藏api来执行按下操作。就不具体讲了,后面会挨个说一遍的。


总结


说了这么多废话,尝试着用序列图描述一遍吧。



Bootstrap - 前端框架

Bootstrap - 前端框架

Bootstrap介绍

2011年8月,Twitter的设计师Mark Otto和Jacob Thornton发布了一个前端开发工具:Bootstrap。2012年2月,Bootstrap 2.0发布,支持HTML5,CSS3,短小精悍。

快速上手

Step-1 Bootstrap依赖于jQuery,因此先下载最新的jQuery库。

Step-2 从Github下载Bootstrap 2.0源码。

Step-3 测试Bootstrap可用,在HTML中包含:

  1. jQuery:jquery-1.7.1.js
  2. Bootstrap CSS文件:bootstrap/css/bootstrap.css
  3. BootStrap Javascript文件:bootstrap/js/bootstrap.js
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="bootstrap/css/bootstrap.css" type="text/css" /> <title>Hello BootStrap</title> </head> <body> <h1>Hello BootStrap</h1> <ul class="nav nav-pills"> <li class="active"><a href="#">Regular link</a></li> <li class="dropdown" id="menu1"> <a class="dropdown-toggle" data-toggle="dropdown" href="#menu1">Dropdown<b class="caret"></b></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 class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> <script src="jquery-1.7.1.js"></script> <script src="bootstrap/js/bootstrap.js"></script> <script> $(".dropdown-toggle").dropdown() </script> </body> </html>

打开浏览器,有类似如下输出:

要注意文档类型用HTML5 doctype,即:

<!DOCTYPE html>

Bootstrap 详解

Bootstrap解压后的主要目录/文件:

  • ./css,包括 bootstrap.css, bootstrap.min.css
  • ./js,包括 bootstrap.js, bootstrap.min.js
  • ./img,包括 glyphicons-halflings.png,即Glyphicons的icon集合

手册分为以下几个类别介绍了Bootstrap:

  1. Scaffolding,介绍了文档布局方式。
  2. Base CSS,介绍了如何用CSS渲染HTML元素(如table, form, button等),以及使用由Glyphicons提供的icons。
  3. Componets,介绍了常见页面元素,如按钮(Buttons), 导航栏(Navigation),标签(Labels),徽标(Badges,如序列行前的数字),警告条(Alerts),进度条(Progress bars)等。
  4. Javascript plugins,介绍了多个Javascript扩展库。
  5. Using LESS,介绍了如何用LESS扩展Bootstrap。

以下笔记,也大致按此分类记录。

文档分块

Scaffolding(理解为页面布局)。Bootstrap把一个文档块(Block)分为12列,有固定(grid system)和浮动(Fluid grid system)两种。

固定块:

<div class="row"> <div class="span4">...</div> <div class="span8">...</div> </div>

浮动块和固定块类似,不过用row-fluid替换row。在row的嵌套上,两者有所区别。固定块:子列的.span*之和,等于父列的.span值(如父列为span6,可有2个span3的子列);浮动块:子列的.span*之和始终可为12(即100%)。

列偏移。 让两个span4分散在两端,中间空出1个span4的宽度,使用.offset:

<div class="row-fluid"> <div class="span4">...</div> <div class="span4 offset4">...</div> </div>

修改默认值

变量 默认值 说明
@gridColumns 12 列数
@gridColumsWidth 60px 列宽
@gridGutterWidth 20px 列间距

页面布局

固定布局的页面:

<body> <div class="container"> </div> </body>

浮动布局使用<div>:

<div class="container-fluid"> <div class="row-fluid"> <div class="span2"> <!-- nav, sidebar --> </div> <div class="span10"> <!-- page content --> </div> </div> </div>

Javascript扩展

Carousel(图片循环播放)

<div id="photos" class="carousel"> <div class="carousel-inner"> <div class="active item"><img src="images/t1.JPG" /> <div class="carousel-caption"> <h4>First Thumbnail label</h4> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget mlam id dolor id nibh ultricies vehicula ut id elit.</p> </div> </div> <div class="item"><img src="images/t2.JPG" /></div> </div> <a class="carousel-control left" href="#photos" data-slide="prev">&lsaquo;</a> <a class="carousel-control right" href="#photos" data-slide="next">&rsaquo;</a> </div>

modal

当需要弹出一个窗口让用户确认时,可以用alert()函数。但alert()只能输出简单的文本,在不同浏览器显示效果还不同。可以用BootStrap modal弹出一个界面一致的窗口,并在其中输出结构良好的文档,例如:

弹出小窗口后,会把背后的页面锁住,并呈现黑灰色。

使用modal需要3步:

  1. 使用普通的HTML元素定义窗口内容。
  2. 将一个HTML元素与窗口关联。
  3. 激活窗口。

例如以下的一个示例。

1. 定义窗口内容:

<div class="modal" id="mymodal"> <div class="modal-header"> <button class="close" data-dismiss="modal">x</button> <h3>Are you sure remove item from order ?</h3> </div> <div class="modal-body"> <p><img scr="URL"> Any HTML elements. </p> </div> <div class="modal-footer"> <a href="#" class="btn" data-dismiss="modal">Close</a> <a href="#" class="btn btn-primary">Delete</a> </div> </div> 

2. 关联窗口:

<a href="#mymodal" data-toggle="modal" class="btn btn-mini">删除商品</a>

3. 激活窗口:

$("#mymodal").modal({show:false});

modal 详解

从以上示例可见,窗口可以有几个部分:

<div class="modal" id="mymodal"> <div class="modal-header"></div> <div class="modal-body"></div> <div class="modal-footer"></div> </div>

控制modal显示和隐藏的方法:

  • $("#mymodal").modal("toggle")
  • $("#mymodal").modal("show")
  • $("#mymodal").modal("hide")

modal 技巧

Bootstrap modal使用有几个技巧。

modal在页面加载时自动隐藏:

<div class="modal hide" id="mymodal">

modal弹出和隐藏时有淡入淡出效果:

<div class="modal hide fade" id="mymodal">

CSS3 渐变

Bootstrap使用到CSS3渐变的特点,如在导航栏,摘取一段渐变代码:

background-color: #2c2c2c; background-image: -moz-linear-gradient(top, #333333, #222222); background-image: -ms-linear-gradient(top, #333333, #222222); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#222222)); background-image: -webkit-linear-gradient(top, #333333, #222222); background-image: -o-linear-gradient(top, #333333, #222222); background-image: linear-gradient(top, #333333, #222222); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=''#333333'', endColorstr=''#222222'', GradientType=0);

其他

利用Bootstrap写的一个导航栏,默认设置下就挺像Google的置顶导航栏:

参考

Bootstrap支持的icons,这些图标来自Glyphicons。

Bootstrap配色生成器 上传一张图片,根据图片色调,生成新的Bootstrap css文件(Generate your own Bootstrap color scheme from an image and customize to your taste)。

在线生成BootStrap新样式 提供可视化的BootStrap元素配置。

构建Twitter BootStrap 图灵社区翻译稿。

less中文版讲解 淘宝UED的成员整理的,非常简洁实用。

Free responsive admin template - 基于BootStrap的应用级theme。

使用Bootstrap的网站:

  • http://builtwithbootstrap.com Built With Bootstrap(展示用Bootstrap搭建的网站)
  • http://cn.pycon.org/2011/ PyCon China 2011(ver1.3.0)
  • https://jihua.in/ 计划.IN(网站作者是:http://ichuan.net/)
  • http://code.nasa.gov/project/ code.NASA

我们今天的关于前端框架之Bootstrap框架bootstrap前端框架用法的分享已经告一段落,感谢您的关注,如果您想了解更多关于06 前端之Bootstrap框架、1-1.前端框架之bootstrap、appium框架之bootstrap、Bootstrap - 前端框架的相关信息,请在本站查询。

本文标签: