移动框架技术R - 第九章

基本布局样式布局代码<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"><titl

Anita-Sun

449人浏览 · 2022-06-01 16:06:09

Anita-Sun · 2022-06-01 16:06:09 发布

基本布局样式

布局

在这里插入图片描述

代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>.bar的基本布局</title>
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
  </head>
  <body >
      <div class="bar bar-header bar-positive">
        这里是头部
      </div>
      <div class="bar bar-subheader bar-stable">
        这里是副标题
      </div>
       <!--添加内容的位置-->
      <div class="bar bar-footer bar-positive">
        这里是底部
      </div>
  </body>
</html>

子元素

在这里插入图片描述

<h1 class="title">新闻</h1>
<a class="button">搜索</a>
<div class="button-bar">体育</div>

为定稿块嵌入子元素

在这里插入图片描述

<div class="bar bar-header bar-energized item-input-inset">
    <label class="item-input-wrapper">
        <input type="text" placeholder="输入用户名搜索">
    </label>
</div>

内容区域

在这里插入图片描述

颜色

在这里插入图片描述

<li class="item light light-border dark-bg">
    light
</li>

徽章

在这里插入图片描述

<div class="list">
    <a class="item item-icon-left" href="#">
        <i class="icon ion-email"></i>
        新消息
        <span class="badge badge-assertive">5</span>
    </a>
</div>

图标

在这里插入图片描述

<i class="icon ion-search" style="font-size: 20px"></i>

按钮

在这里插入图片描述

<a class="button button-light">button-light</a>

在这里插入图片描述

<a class="button button-royal button-block">button-block</a>

<!-- button-outline 透明按钮 -->
<a class="button button-royal button-outline">button-block</a>
<!-- button-clear 不显示背景和边框 -->
<a class="button button-royal button-clear ">button-clear</a>

在这里插入图片描述

<div class="button-bar">
    <a class="button button-royal ion-star icon-left">收藏</a>
    <a class="button button-calm ion-chevron-right icon-right">更多</a>
</div>

列表

列表分隔符
在这里插入图片描述

<div class="list">
    <a class="item" href="#">item</a>
    <!-- 列表分隔符 -->
    <div class="item item-divider" href="#">item-divider</div>
    <a class="item" href="#">item</a>
    <a class="item" href="#">item</a>
    <a class="item" href="#">item</a>
    <a class="item" href="#">item</a>
</div>

在这里插入图片描述

<div class="list">
    <a class="item item-icon-left" href="#">
        <i class="icon ion-android-person-add"></i>
        添加好友
    </a>
    <a class="item item-icon-left" href="#">
        <i class="icon ion-android-people"></i>
        群聊
    </a>
</div>

在这里插入图片描述

<div class="list">
    <div class="item item-divider" href="#">A</div>
    <a class="item item-avatar" href="#">
      <img src="img/demo9-14/abby.jpg">
        Abby
    </a>
</div>

在这里插入图片描述

<div class="card">
    <a class="item item-thumbnail-right" href="#">
        <img src="img/demo9-15/一条狗的使命.jpg">
        <h2>《一条狗的使命》</h2>
        <p>影片以汪星人的视角展现狗狗和人类的微妙情感</p>
    </a>
</div>

表单

在这里插入图片描述

<ul class="list">
    <li class="item item-divider" href="#">普通输入框</li>
    <li class="item item-input">
        <span class="input-label">用户名</span>
        <input type="text" placeholder="请输入用户名">
    </li>
    <li class="item item-divider" href="#">带图标的输入框</li>
    <li class="item item-input">
        <i class="icon ion-search"></i>
        <input type="text" placeholder="请输入搜索内容">
    </li>
    <li class="item item-divider" href="#">堆叠标签式输入框</li>
    <li class="item item-input item-stacked-label">
        <span class="input-label">Email</span>
        <input type="text" placeholder="me@itcast.cn">
    </li>
</ul>

在这里插入图片描述

<ul class="list">
    <li class="item item-divider royal-bg" href="#">复选框</li>
    <li class="item item-checkbox">
        <label class="checkbox ">
            <input type="checkbox" checked>
        </label>
        铃声
    </li>
    <li class="item item-checkbox">
        <label class="checkbox">
            <input type="checkbox">
        </label>
        振动
    </li>
    <li class="item item-divider royal-bg" >开关</li>
    <li class="item item-toggle">
        通知
        <label class="toggle toggle-positive">
            <input type="checkbox" checked>
            <div class="track">
                <div class="handle"></div>
            </div>
        </label>
    </li>
    <li class="item item-divider royal-bg" >单选按钮</li>
    <li class="item item-radio">
        <input type="radio" name="sex"  checked>
        <div class="radio-content">
            <div class="item-content">
                女
            </div>
            <i class="radio-icon ion-checkmark"></i>
        </div>
    </li>
    <li class="item item-radio">
        <input type="radio" name="sex">
        <div class="radio-content">
            <div class="item-content">
               男
            </div>
            <i class="radio-icon ion-checkmark"></i>
        </div>
    </li>
</ul>

在这里插入图片描述

<ul class="list">
    <li class="item item-divider royal-bg" href="#">选择框</li>
    <li class="item item-input item-select">
        <label class="input-label">
            请选择
        </label>
        <select>
            <option>北京</option>
            <option>上海</option>
            <option>广州</option>
            <option>深圳</option>
        </select>
    </li>
    <li class="item item-divider royal-bg" href="#">滑动条</li>
    <li class="item range">
        <i class="icon ion-volume-low"></i>
        <input type="range" class="range-dark">
        <i class="icon ion-volume-high"></i>
    </li>
</ul>

在这里插入图片描述

<div class="tabs tabs-stable tabs-color-dark tabs-striped">
    <a class="tab-item active tab-item-balanced">
       <b>消息</b>
    </a>
    <a class="tab-item ">
        <b>联系人</b>
    </a>
    <a class="tab-item disabled" >
        <b>动态</b>
    </a>
</div>

在这里插入图片描述

<div class=" tabs tabs-top tabs-dark tabs-icon-top" style="top:0px">
        <a class="tab-item active tab-item-balanced" href="#">
            <i class="icon ion-chatbubble-working"></i>
            消息
        </a>
        <a class="tab-item" href="#">
            <i class="icon ion-person-stalker"></i>
            联系人
        </a>
        <a class="tab-item" href="#">
            <i class="icon ion-social-tux"></i>
            动态
        </a>
</div>

栅格类系统样式

基本行与列

在这里插入图片描述

<div class="row">
    <div class="col royal-bg">.col</div>
    <div class="col dark-bg">.col</div>
    <div class="col energized-bg">.col</div>
    <div class="col calm-bg">.col</div>
    <div class="col positive-bg">.col</div>
</div>

指定列宽

在这里插入图片描述

<div class="row">
    <div class="col col-50 balanced-bg">.col.col-50</div>
    <div class="col positive-bg">.col</div>
    <div class="col assertive-bg">.col</div>
</div>
<div class="row">
    <div class="col col-75 energized-bg">.col.col-75</div>
    <div class="col dark-bg">.col</div>
</div>
<div class="row">
    <div class="col calm-bg">.col</div>
    <div class="col royal-bg">.col</div>
</div>

在这里插入图片描述

指定列偏移

在这里插入图片描述

<div class="row">
    <div class="col col-33 col-offset-33 positive-bg">.col</div>
    <div class="col calm-bg col-offset-10">.col</div>
</div>

列表纵向对齐

在这里插入图片描述

<body>
    <div class="row">
        <div class="col balanced-bg">默认效果<br>*<br>*<br>*</div>
        <div class="col">.col</div>
        <div class="col">.col</div>
        <div class="col">.col</div>
    </div>
    <div class="row">
        <div class="col balanced-bg">元素对齐<br>*<br>*<br>*</div>
        <div class="col col-top">.col-top</div>
        <div class="col col-center">.col-center</div>
        <div class="col col-bottom">.col-bottom</div>
    </div>
    <div class="row row-top">
        <div class="col balanced-bg">.row-top<br>*<br>*<br>*</div>
        <div class="col">.col</div>
        <div class="col">.col</div>
        <div class="col">.col</div>
    </div>
    <div class="row row-center">
        <div class="col balanced-bg">.row-center<br>*<br>*<br>*</div>
        <div class="col">.col</div>
        <div class="col">.col</div>
        <div class="col">.col</div>
    </div>
    <div class="row row-bottom">
        <div class="col balanced-bg">.row-bottom<br>*<br>*<br>*</div>
        <div class="col">.col</div>
        <div class="col">.col</div>
        <div class="col">.col</div>
    </div>
</body>

响应式栅格

在这里插入图片描述

<div class="row">
    <div class="col">col-1</div>
    <div class="col">col-2</div>
    <div class="col">col-3</div>
    <div class="col">col-4</div>
</div>
<div class="row responsive-sm">
    <div class="col">col-1</div>
    <div class="col">col-2</div>
    <div class="col">col-3</div>
    <div class="col">col-4</div>
</div>