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:#">[email protected]</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><section></code> should be wrapped as inline.<!--<小于,>大于-->
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>
今天就到这了,还有一部分没有贴出来的功能就后面再更新了