【芝山物联】HTML5与CSS3自学笔记

本文记录了学习HTML5与CSS3过程中遇到的一些值得注意的东西，同时共享给大家。本文为节约时间，主要以参考

链接的形式发布。

2018-01-20

关于CSS3的Transform属性 > CSS3 transform 属性
HTML5中的detail标签 > HTML <detail> 标签
HTML5中的progress标签 > HTML 5 <progress> 标签
HTML5中的meter标签 > HTML 5 <meter> 标签
HTML5中的time标签 > HTNM 5 <time> 标签

该标签不会有任何特殊显示效果。

2018-03-15

Boostrap中的标签（label）组件的使用 > Bootstrap 标签

2018-03-16

基于Bootstrap的简易下拉菜单

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        MEUN<span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">item-1</a></li>
        <li><a href="#">item-2</a></li>
        <li><a href="#">item-3</a></li>
    </ul>
</div>

在此还可以为下拉菜单中的li标签或ul标签添加其他几种类

.dropdown-menu-left 强制菜单左对齐于容器（默认）。

.dropdown-menu-right 强制菜单右对齐于容器。

.dropdown-header 创建标题菜单项

.divider 在菜单内创建一个分隔符

.disabled 禁用菜单项
例如：
<div class="btn-group">
    <button class="btn btn-primary">Choose one...</button>
    <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
        <span class="sr-only">Trigger Dropdown Menu</span>
    </button>
    <ul class="dropdown-menu">
        <li class="dropdown-header">Section 1</li>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li class="disabled"><a href="#">Item 3</a></li>
        <li class="divider"></li>
        <li class="dropdown-header">Section 2</li>
        <li><a href="#">Item 1</a></li>
        <li class="disabled"><a href="#">Item 2</a></li>
    </ul>
</div> 
效果如下图所示
2018-03-18

Bootstrap快速制表 > Bootstrap—轻松制作漂亮表格（table）

Social Buttons for Bootstrap > Social Buttons for Bootstrap

2018-03-19

BootCSS官网上滚图标分析 > JQuery 页面如何快速滚动到顶部？

【芝山物联】HTML5与CSS3自学笔记

猜你喜欢