bootstrap学习总结

           废话不多说,经过两天的学习和了解,就简单的梳理下我所掌握到的知识:

首先引入,<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">网页引入,当然还有jQuery文件的导入

<link href="/..../.bootstrap.min.css" type="text/css" rel="stylesheet">下载后,外部倒入

一,栅格系统

随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列.

行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
    按照屏幕大小分为四种前缀:.col-xs-,.col-sm-,.col-md-,.col-lg-(xsmall,最小;sm,small小;md,middle,中;lg,large,大)
    这里采用的是middle的:
    css:
    <style>
          .row{
            margin-bottom: 20px;
        }
        .row .row{
            margin-top: 10px;
            margin-bottom: 0;
        }
        [class*="col-"]{
            padding-top: 15px;
            padding-bottom: 15px;
            background-color: #eee;
            background-color: rgba(86,61,124,.15);
            border: 1px solid #ddd;
            border: 1px solid rgba(86,61,124,.2);
        }
    </style>
    html:
        <div class="container"><!--container-fluid让其宽度充满-->
            <div class="row">
                <div class="col-md-1">col-md-1</div>
                <div class="col-md-1">col-md-1</div>
                <div class="col-md-1">col-md-1</div>
                <div class="col-md-1">col-md-1</div>
                <div class="col-md-1">col-md-1</div>
                <div class="col-md-1">col-md-1</div>
                <div class="col-md-1">col-md-1</div>
                <div class="col-md-1">col-md-1</div>
                <div class="col-md-1">col-md-1</div>
                <div class="col-md-1">col-md-1</div>
                <div class="col-md-1">col-md-1</div>
                <div class="col-md-1">col-md-1</div>
            </div>

            <div class="row">
                <div class="col-md-3">col-md-3</div>
                <div class="col-md-3">col-md-3</div>
                <div class="col-md-3">col-md-3</div>
                <div class="col-md-3">col-md-3</div>
            </div>

            <!--offset:位移,位移的距离单位为一个-->
            <div class="row">
                <div class="col-md-4 col-md-offset-1">col-md-4</div>
            </div>

            <!--嵌套-->
            <div class="row">
                <div class="col-md-9">
                    col-md-9
                    <div class="row">
                        <!--交换位置-->
                        <div class="col-md-3 col-md-push-8">col-md-3</div>
                        <div class="col-md-8 col-md-pull-3">col-md-8</div>
                    </div>
                </div>
            </div>
        </div>

嵌套和交换位置就放在一起截图了

二,排版

<h1>你好</h1>
            <div class="h1">你好</div><!--效果一样,但是没有h1的含义-->

<h4>你好<small>你好呀</small></h4><!--small副标题原标题80%左右的大小,字体变淡-->

<p>ndskaljdlskajdl<abbr title="">圣诞节快乐撒娇离开</abbr></p><!--abbr缩略语,title必须加,title名随便-->

<p class="lead">ndskaljdlskajdl</p><!--变大,颜色变浅-->

<p>ndskaljdlskajdl<mark>sdakjljdslkal</mark></p><!--带标记的-->

sdakjljdslkal是带有淡淡的颜色框的

<!--还有的class:文本text-left,text-right,text-right;    
            文本大小写以及首字母大写:text-lowercase,text-uppercase,text-capitalize
            -->

<del>sss</del>
            <s>dsss</s><!--del和s样式一样,语义:被删除,无用文本-->
            <ins>sss</ins>
            <u>sss</u><!--样式一样,语义:插入,带下划线-->

<address><!--地址-->

              <strong>Twitter, Inc.</strong><br><!--strong着重-->
              1355 Market Street, Suite 900<br>
              San Francisco, CA 94103<br>
              <abbr title="Phone">P:</abbr> (123) 456-7890
            </address>
            <address>
              <strong>Full Name</strong><br>
              <a href="mailto:#">first.last@example.com</a>
            </address>
            <blockquote><!--引用,通过赋予 .blockquote-reverse 类可以让引用呈现内容右对齐的效果-->
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
              <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer><!--换行功能-->
            </blockquote>

这里的样式没出来,后期检查
        </div>
        <ul class="list-unstyled"><!--没有样式的无序列表-->
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>

三,代码

<div class="container">
            <code>&lt;section&gt;</code> should be wrapped as inline.<!--&lt小于,&gt大于-->

            To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
            To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd><!--<kbd>标记用户通过键盘输入的内容-->

            <pre class="pre-scrollable"><!--添加滚动条,高度大于350px时-->
            
            
            
            
            
            
            
            
            sss
            
            
            
            
            
            sss
            
            
            
            
            
            
            sss
            </pre>
        </div>

今天就到这了,还有一部分没有贴出来的功能就后面再更新了