Ionic学习笔记1_基本布局

zoukankan html css js c++ java

Ionic学习笔记1_基本布局

<body>

                                     bar里嵌入子元素：title,button,button-bar和 input

      <div class="bar bar-header bar-dark item-input-inset">

                 <h1 class="title">Header</h1>                      布局？ item-input-inset, item-input-wrapper

                 <label class="item-input-wrapper">

　　　　　　　　　　　　<a class="button button-clear icon ion-search"></a>

                             <input class="light-bg" type="text" placeholder="qingshuru">

                 </label>

                 <a class="button button-clear icon ion-ios-gear"></a>

      </div>

      

      <div class="bar bar-subheader bar-stable">

                 <div class="button-bar">

                             <a class="button button-balanced">button1</a>

                             <a class="button button-clear">button2</a>

                 </div>

      </div>

      

      <div class="scroll-content has-header has-subheader">

                 <h1 class="title">Content</h1>

      </div>

      

      <div class="bar bar-footer bar-calm">

                 <div class="button-bar">

                       <i class="icon ion-home" style="font-size:50px;"></i>    声明图标大小及位置

                             <a class="button button-balanced icon icon-right ion-document-text">button3</a>

                             <a class="button button-clear">button4</a>

                 </div>

      </div>

</body>

1.1. .bar

标题文字 -.title样式，通常使用h1元素

按钮     -.button样式，通常使用button 或a元素作为按钮

工具栏: -.button-bar样式,使用div元素作为工具栏

1.1.1. 在.bar元素中嵌入input元素

在标题栏中嵌入搜索栏

v 在条块元素上应用.item-input-inset样式

v 将input包裹在应用.item-input-wrapper样式的元素内

      <div class="bar bar-header bar-energized item-input-inset">

         <a class="button button-clear icon-right ion-android-arrow-dropdown">北京</a>

                 <label class="item-input-wrapper">

                             <input class="light-bg" type="text" placeholder="qingshuru">

                 </label>

      </div>

<label class="item-input-wrapper">

<a class="button button-clear icon ion-search"></a>

<input class="light-bg" type="text" placeholder="qingshuru">

</label>

1.1.2. button

按钮应用.button样式，常使button 或a元素作为按钮

嵌入图标

               <a class="button"> <i class="icon ion-home"></i>Home </a>

<a class="button icon-left ion-home"> Home </a>

<div class="button icon ion-plus"></div>

<button class="button button-calm button-block">Home</button>           button显示成块元素

² button-block

               button显示成块元素 <button class="button button-calm button-block">button-light</button>

1.2. Ionic色彩、图标和边距

前景，背景，边框及内边距偏移



内边距统一为10px

1.3. .content和.scroll-content

<div class="scroll-content has-header padding ">

                 <i class="icon ion-arrow-up-a calm">图标</i>

                 <i class="icon ion-arrow-up-a balanced"></i>

                 <div class="balanced-bg light">背景字体</div>

                 <div class="padding-left">

　　　　<div class="energized-bg light">偏移</div>

</div>

</div>

内容容器样式：

 .content – 相对定位

 .scroll-content - 绝对定位，内容元素占满整个屏幕

1.3.1. .hasheader

1.3.2. .ion 图标

.icon - 将元素声明为图标

.ion-{icon-name} - 声明要使用的具体图标，图标及具体名称，需要访问ionics.com

<any style="font-size:100px;"> 图标的大小：

       <i class="icon ion-search"></i>

</any>

1.3.3. .list .item

         .list定义列表容器，使用.item定义列表成员：

v 容器外观定制 .list元素

边框，缩进，阴影

v 列表外观定制 .item元素

分组，配色，边框

插入文本、徽章、图标、图像（头像、缩略图或大图）、按钮等各种样式的元素

设置图文位置排版

v 简单应用

1)       .item : 嵌入文本

h1~h6/p标签插入不同规格的文本

嵌入文本、徽章

文本可扩展多行，徽章可设置背景及字

2)       .item :嵌入图标

.item元素上声明图标位置。使用.item-icon-left和.item-icon-right声明

.item元素内插入图标 list-inset

3)       .item : 嵌入头像

头像被设置为40x40固定大小

.item元素上声明头像位置。使用.item-avatar-left和.item-avatar-right声明

.item元素内使用img标签插入头像

4)       .item : 嵌入缩略图

缩略图被定义为80px大小，比头像大，适合新闻图片。

.item元素上声明缩略图位置。缩略图可以位于列表的左侧或右侧，分别使用.item-thumbnail-left和.item-thumbnail-right声明

.item元素内使用img标签插入头像。

img标签放到.item内容的开头！

5)       .item : 嵌入大图 item-image

6)       .item :中使用按钮button

.item上声明按钮位置。可以位于列表的左侧或右侧，分别使用.item-button-left和.item-button-right声明

.item元素内插入按钮

v 例1文本列表(单列)。

                        <ul class="list list-inset">

                                   <li class="item">课程</li>

                                   <li class="item">         h1~h6/p标签插入不同规格的文本

                                               <h2>国务院常务会议部署推进公司注册资本登记制度改革</h2>

                                               <p>中国青年报</p>

                                   </li>

                                   

                                   <li class="item">

                                               Mega Man <i class="badge positive-bg light">15</i>

                                   </li>

                           <li class="item item-button-right">

                <button class="button icon-left ion-home">按钮</button>

                Enter home address

             </li>

        <li class="item">

           <button class="button button-calm button-block">button-light</button>

        </li>

                                   

                                   <li class="item item-icon-left item-icon-right">

                   <i class="icon ion-location"></i>

                   <h2>入住城市：当前位置 </h2>

                                               <h2>地址 </h2>

                    <i class="icon ion-ios-arrow-right"></i>

             </li>

                                   

                                   <li class="item item-thumbnail-left">

                                               <img src="img/a-1.jpg">

                                               <h2>热点 <i class="badge positive-bg light">15</i> </h2>

                                               <h2>大黄鸭在北京两个月创收超两亿元今日离京</h2>

                                               <p>中国经营报</p>

                                   </li>

                                   

            <li class="item item-avatar">

                <img src="img/a-1.jpg">

                <h2>Thomasguy</h2>

                <p>真的好好吃啊...</p>

            </li>

                                   

                                   <li class="item item-image">

                                               <img src="img/bmw.jpg">

                                   </li>

                       </ul>

v 例2使用 div 和 a 显示 item

<div class="list ">

                 <a href="#" class="item">课程</a>

                 <a href="#" class="item">

                             <h2>国务院常务会议部署推进公司注册资本登记制度改革</h2>

                             <p>中国青年报</p>

                 </a>

                 <a href="#" class="item">

                             Mega Man <i class="badge positive-bg aght">15</i>

                 </a>

                             <a class="item item-icon-left" href="#">

                                 <i class="icon ion-person-stalker"></i>         图标

                                 Friends

                                 <span class="badge badge-assertive">0</span> 徽章

                             </a>

                                   <a class="item item-icon-left" href="#">

                                       <i class="icon ion-mic-a"></i>

                                       Record album

                                       <span class="item-note"> Grammy</span>      说明

                                   </a>

<div class="item item-button-right">

    Call Ma

    <button class="button button-positive">      按钮带图标

      <i class="icon ion-ios-telephone"></i>

    </button>

</div>

<a class="item item-avatar" href="#">             索罗图

      <img src="venkman.jpg">

      <h2>Venkman</h2>

      <p>Back off, man. I'm a scientist.</p>

</a>

<a class="item item-thumbnail-left" href="#">

      <img src="cover.jpg">

      <h2>Pretty Hate Machine</h2>

      <p>Nine Inch Nails</p>

</a>

</div>

v 列表分隔符 item-divider

使用 item-divider 类来为列表创建分隔符，默认情况下，列表项以不同的背景颜色和字体加粗来区分

v 内嵌列表 list list-inset

与常规列表区别是，它设置了外边距（marign）,类似于选项卡。

内嵌列表是没有阴影效果的，滚动时效果会更好

v 例3使用分组

1.3.4. 卡片 card

针对移动端的应用，卡片会根据屏幕大小自适应大小。可以很灵活的控制卡片的显示效果，甚至实现动画效果。卡片一般放在页面顶部，当然也可以实现左右切换的功能. 卡片(card)默认样式带有box-shadow(阴影)，由于性能的原因，和他类似的元素像 list list-inset 并没有阴影。如果你有很多的卡片，每个卡片都有很多子元素，建议使用内嵌列表（inset list）。

. card 可以让list和左右有一些边距

. item-divider元素定义list的头和尾

<div class="list card">

                                   <div class="item item-divider">

                                               I'm a Header in a Card!

                                   </div>

                                   <div class="item item-text-wrap">

                                               This is a basic Card with some text.

                                               <a href="#" class="item item-icon-left">

                                                          <i class="icon ion-home"></i>

                                                          Enter home address

                                               </a>

                                               <a href="#" class="item item-icon-left">

                                                          <i class="icon ion-ios-telephone"></i>

                                                          Enter phone number

                                               </a>

                                               <a href="#" class="item item-icon-left">

                                                          <i class="icon ion-wifi"></i>

                                                          Enter wireless password

                                               </a>

                                   </div>

                                   <div class="item item-divider">

                                               I'm a Footer in a Card!

                                   </div>

                       </div>

卡片展现

开始使用了 list card 元素，并使用了 item-avatar , item-body 元素用于展示图片和文本信息，底部使用 item-divider 类。

<div class="list card">

<div class="item item-avatar">

    <img src="mcfly.jpg">

    <h2>Marty McFly</h2>

    <p>November 05, 1955</p>

</div>

<div class="item item-body">

    <img class="full-image" src="delorean.jpg">

    <p>

      菜鸟教程 -- 学的不仅是技术，更新梦想！<br>

      菜鸟教程 -- 学的不仅是技术，更新梦想！

    </p>

    <p>

      <a href="#" class="subdued">1 喜欢</a>

      <a href="#" class="subdued">5 评论</a>

    </p>

</div>

<div class="item tabs tabs-secondary tabs-icon-left">

    <a class="tab-item" href="#">

      <i class="icon ion-thumbsup"></i>喜欢

    </a>

    <a class="tab-item" href="#">

      <i class="icon ion-chatbox"></i> Comment

    </a>

    <a class="tab-item" href="#">

      <i class="icon ion-share"></i>   分享

    </a>

</div>

</div>

1.3.5. 表单输入

list 类同样可以用于 input 元素。item-input 和 item 类指定了文本框及其标签

1)        item item-input

                           <label class="item item-input">

                                       <i class="icon ion-android-person positive"></i>

                                       <input type="text" placeholder="请输入您的用户名">     placeholder 属性设置输入字段预期值的提示信息

                           </label>

                           <label class="item item-input item-stacked-label">              item-stacked-label堆叠标签通常位于输入框的头部

                                       <span class="input-label">Email</span>                 输入框属性：input-label

                                       <input type="text" placeholder="me@vucek.com">

                           </label>

<label class="item item-input item-floating-label">     item-floating-label浮动标签类似于堆叠标签，有一个动画的效果

    <span class="input-label">First Name</span>

    <input type="text" placeholder="First Name">

</label>

            <label class="item item-input item-input-inset">

                <textarea placeholder="Comments"></textarea>

            </label>

内嵌表单

默认情况下每个输入域宽度都是100%，使用 list list-inset 或 card 类设置表单的内边距(padding)， card 类带有阴影。

<div class="list list-inset">

<label class="item item-input">

    <i class="icon ion-search placeholder-icon"></i>     带图标的输入框

    <input type="text" placeholder="Search">

</label>

</div>

内嵌输入域

使用 list-inset 设置内嵌实体列表。使用 item-input-inset 样式可以内嵌一个按钮。

<div class="list">

<div class="item item-input-inset">

    <label class="item-input-wrapper">

      <input type="text" placeholder="Email">

    </label>

    <button class="button button-small"> Submit </button>

</div>

</div>

头部输入框

输入框可放置在头部，并可添加提交或取消按钮。

<div class="bar bar-header item-input-inset">

<label class="item-input-wrapper">

    <i class="icon ion-ios-search placeholder-icon"></i>

    <input type="search" placeholder="搜索">

</label>

<button class="button button-clear">

    取消

</button>

</div>

2)        ionic Toggle(切换开关)

切换开关类似与 HTML 的 checkbox 标签，切换开关可以使用 toggle-assertive 来指定颜色。

<label class="toggle">

   <input type="checkbox">

   <div class="track">

     <div class="handle"></div>

   </div>

</label>

该实例有是多个切换开关列表。注意，每个选项的 item 类后需要添加 item-toggle 类。

<ul class="list">

                           <li class="item item-toggle">

                                       字符计数

                                       <label class="toggle toggle-balanced">

                                                  <input type="checkbox" checked>

                                                  <div class="track">

                                                              <div class="handle"></div>

                                                  </div>

                                       </label>

                           </li>

</ul>

3)        ionic checkbox（复选框）

和普通的 Checkbox 效果上其实相差不大，只是样式上有所不同。

每个选项的 item 类后需要添加 item-checkbox 类。可以使用 checkbox-assertive 来指定颜色。

<ul class="list">

<li class="item item-checkbox">

     <label class="checkbox">

       <input type="checkbox">

     </label>

     记住密码

</li>

                           <li class="item item-checkbox item-button-right">

                                       <label class="checkbox">

                                                  <input type="checkbox" checked >

                                       </label>

                                       <h2>Shopping</h2>

             <a class="button button-clear icon ion-ios-arrow-right"></a>

                           </li>

</ul>

4)        ionic 单选框

ionic 当选按钮与标准 type="radio" 的 input元素类似。

每个 item-radio 中的 type="radio" 的 input 元素的 name 属性都相同。radio-icon 类用于是否显示图标。

ionic 在单选项中使用了 <label> 元素，使其更易点击。

                     <div class="list">

                                <div class="item item-divider"><b>请选择支付方式</b></div>

                                 <label class="item item-radio">

                                            <input type="radio" name="group" value="go" checked="checked">

                                            <div class="item-content">支付宝客户端支付</div>

                                            <i class="radio-icon ion-checkmark balanced"></i>

                                 </label>

                                 <label class="item item-radio">

                                            <input type="radio" name="group"   value="python" >

                                            <div class="item-content">支付宝网页支付</div>

                                            <i class="radio-icon ion-checkmark balanced"></i>

                                 </label>

                     </div>

5)        ionic Range

ionic Range 是一个滑块控件，ionic 为 Range 提供了很多种默认的样式。可以在许多种元素里使用它比如列表或者 Card 。

<div class="range">

<i class="icon ion-volume-low"></i>

<input type="range" name="volume">

<i class="icon ion-volume-high"></i>

</div>

                     <div class="list">

                                 <div class="item item-divider">铃声和提醒</div>

                                 <div class="item range range-positive">

                                            <i class="icon ion-ios-volume-low"></i>

                                            <input type="range" name="volume" min="0" max="100" value=30>

                                            <i class="icon ion-ios-volume-high"></i>

                                 </div>

                     </div>

6)        ionic select

ionic select 的 select 相比原生的要更加美观些。但是弹出的可选选项样式是浏览器默认的。

在PC电脑的浏览器上，你会看到传统的下拉界面，Android 上会弹出单选按钮选项，iOS 有个滚轮操作界面。

<div class="list">

                                 <label class="item item-input item-select">

                                            <div class="input-label">前端技术</div>

                                            <select>

                                                        <option>HTML</option>

                                                        <option selected>CSS</option>

                                                        <option>JavaScript</option>

                                            </select>

                                 </label>

<div class="item item-input item-select">

    <div class="input-label"> Lightsaber </div>

    <select>

      <option>Blue</option>

      <option selected="">Green</option>

      <option>Red</option>

    </select>

</div>

1.3.6. 选项卡 : .tabs

ionic tab(选项卡) 是水平排列的按钮或者链接，用以页面间导航的切换。它可包含文字和图标的组合

选项卡容器使用了 tabs 类，每个选项卡使用 tab-item 类。默认情况下，选项卡是文本的，并没有图标。默认情况，选项卡颜色为默认，可设置以下不同颜色样式：tabs-default ，tabs-light ，tabs-stable ，tabs-positive ，tabs-calm ，tabs-balanced ，tabs-energized ，tabs-assertive ，tabs-royal ，tabs-dark。要隐藏选项卡栏，可使用 tabs-item-hide 类。

<ul class="tabs tabs-positive"> tabs-top

                       <li class="tab-item active">Chinese</li>

                       <li class="tab-item">English</li>

                       <li class="tab-item">Japanese</li>

                       <li class="tab-item">Russian</li>

            </ul>

tabs-icon-top顶部图标+文字选项卡。tabs-icon-only可设置只显示图标选项卡,ttabs-icon-left 类可设置左侧图标+文字选项卡。

            <div class="tabs tabs-stable tabs-icon-top">

                       <a class="tab-item active">

                                   <i class="icon ion-ios-home-outline"></i>首页

                       </a>

                       <a class="tab-item">

                                   <i class="icon ion-ios-email-outline"></i>信息

                       </a>

                       <a class="tab-item has-badge">

                                   <i class="icon ion-ios-eye-outline"></i>发现

                                   <i class="badge badge-positive ">12</i>

                       </a>

            </div>

条纹样式选项卡

在带有 tabs 的样式名的元素上添加 tabs-striped 来实现像 Android 风格的 tabs。也可以添加 tabs-top 来实现选项卡在页面顶部。

条纹选项卡颜色可通过 tabs-background-{color} 和 tabs-color-{color} 来控制， {color} 值可以是：default, light, stable, positive, calm, balanced, energized, assertive, royal, 或 dark。

注意：如果要再选项卡上设置头部标题，需要使用 has-tabs-top 类。

            <div class="tabs-striped tabs-top tabs-dark tabs-icon-only tabs-background-positive tabs-color-light ">

                       <div class="tabs">

                                   <a class="tab-item active" href="#">

                                               <i class="icon ion-ios-telephone"></i> Test

                                   </a>

                                   <a class="tab-item" href="#">

                                               <i class="icon ion-ios-clock"></i> Favorites

                                   </a>

                       </div>

            </div>

1.3.7. Grid布局

它采用了弹性盒子模型(Flexible Box Model) 。而且在移动端，基本上的手机都支持。row 样式指定行，col 样式指定列。

同等大小网格

带有 row 的样式的元素里如果包含了 col 的样式，col 就会设置为同等大小。如 row 的样式包含了 5 个 col 样式，每个 col 的宽度为 20%。

<div class="row">

                                   <div class="col">.col</div>

                                   <div class="col">.col</div>

                                   <div class="col">.col</div>

                                   <div class="col">1<br>2<br>3<br>4</div>

                       </div>

                       <div class="row">

                                   <div class="col col-33 positive-bg">.col</div>指定列宽

                                   <div class="col col-33 col-offset-33 dark-bg">.col</div> 列可以设置左侧偏移量

                       </div>

纵向对齐包含顶部，中间部分，底部，可以应用到每一行的列，或者指定的某列。

                       <div class="row row-top ">   row-center row-bottom

                                   <div class="col col-top col-50 positive-bg light">

                                               <div>机票</div>

                                   </div>

                                   <div class="col col-25 assertive-bg light">

                <img src="img/a-2.jpg" />

                <br>你好

            </div>

                                   <div class="col col-25 calm-bg light">

                                               <div>用车</div>

                                   </div>

                       </div>

<div class="row">

<div class="col col-top">.col</div>

<div class="col col-center">.col</div>

<div class="col col-bottom">.col</div>

<div class="col">1<br>2<br>3<br>4</div>

</div>

响应式网格

手持设备屏幕在切换时，例如横屏，竖屏等。就需要设置每行的网格可以实现根据不同宽度自适应大小。

.responsive-sm    小于手机横屏

.responsive-md   小于平板竖屏

.responsive-lg      小于平板横屏

<div class="row responsive-sm">

<div class="col">.col</div>

<div class="col">.col</div>

<div class="col">.col</div>

<div class="col">.col</div>

</div>

查看全文

相关阅读:
Computer Browser服务自动停止
 Group By中Case分类统计
 C#判断网络状态
 Win7中VC6打开文件报错(转)
SqlBulkCopy(大数据量拷贝)
vc6开发ActiveX并发布全攻略(二)(转)
VC6 Activex控件调试
 VC MessageBox
常用基本AT指令
 WinForm自动重启

原文地址：https://www.cnblogs.com/dengzy/p/5388418.html

Ionic学习笔记1_基本布局

1.1. .bar

1.1.1. 在.bar元素中嵌入input元素

1.1.2. button

1.2. Ionic色彩、图标和边距

1.3. .content和.scroll-content

1.3.1. .hasheader

1.3.2. .ion 图标

1.3.3. .list .item

1.3.4. 卡片 card

1.3.5. 表单输入

1.3.6. 选项卡 : .tabs

1.3.7. Grid布局