• BootStrap 学习笔记二


    BootStrap学习笔记一:

    学习工具:BootStrap中文文档:http://v3.bootcss.com/css/#type-lists

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 为了让 IE 浏览器运行最新的渲染模式 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>BootStrap 学习第第二步</title>
    <link rel="stylesheet" href="static/css/bootstrap.min.css">
    </head>
    <body>
    <!-- 列表 -->
    <ul><!-- class="list-unstyled" -->
        <li>step 1</li>
        <li>step 2</li>
        <li>step 3</li>
        <li>常用的几种list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | 
            <ul><!-- class="list-inline 横排显示  -->
                <li>disc:默认值 实心圆</li>
                <li>circle:空心圆</li>
                <li>square:实心方块 </li>
                <li>decimal:阿拉伯数字 </li>
                <li>lower-roman:小写罗马数字  </li>
                <li>upper-roman:大写罗马数字 </li>
                <li>lower-alpha:小写英文字母 </li>
                <li>upper-alpha:大写英文字母 </li>
                <li>none:无项目符号 </li>
            </ul>
        
        </li>
    </ul>
    
    <ol><!-- list-style-type: 与ul的可选项差不多 -->
        <li>有序1</li>
        <li>有序2</li>
        <li>有序3</li>
        <li>有序4</li>
        <li>有序5</li>
        <li>有序6</li>
    </ol>
    
    <dl class="dl-horizontal"><!-- 带有描述语句的列表-->
                                <!-- dl-horizontal  可以让 <dl> 内的短语及其描述排在一行 -->
        <dt>title 1</dt>
        <dd>content content content contentcontentcontent  content  content content content 1</dd>
        <dt>title 2</dt>
        <dd>content 2</dd>
        <dt>title 3</dt>
        <dd>content 3</dd>
        <dt>title 4</dt>
        <dd>content 4</dd>
    </dl>
    
    <!-- 代码 -->
    <div class="container">
        <code>内联样式的代码片段</code><br/>
        For example, <code>&lt;section&gt;</code> should be wrapped as inline.<br/>
        <kbd>键盘输入</kbd><br/>
        To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
    To edit settings, press <kbd>ctrl + ,</kbd><br/>
    <var>标记变量</var><br/>
    <var>y</var> = <var>m</var><var>x</var> + <var>b</var><br/>
    vs<br/>
    <em>y=mx+b</em>
    <br/>
    <samp>程序输出</samp><br/>
    <samp>This text is meant to be treated as sample output from a computer program.</samp>
    </div>
    </body>
    <script type="text/javascript" src="static/js/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="static/js/bootstrap.min.js"></script>
    </html>

     个人学习,仅作记录!未完待续。。。。。。

  • 相关阅读:
    angualr清除定时器
    flex布局常用属性
    将数组分割为几个等长度的子数组(使用slice)
    vue+element搭建的后台管理系统
    世界这么大,我想去看看!!!
    angularJs自定义指令(directive)实现滑块滑动
    适用初学者:vue2.0构建单页应用最佳实战
    笔记本win10安装node的尖酸历程。。。。。。
    js对数组处理(数组里边相同元素提取成map)
    快速搞定用Vue+Webpack搭建前端项目(学习好久了,该写点东西了......)
  • 原文地址:https://www.cnblogs.com/hzwl-2015/p/4255209.html
Copyright © 2020-2023  润新知