BootStrap框架入门
- 下载bootstrap源码 https://v3.bootcss.com/getting-started/
2.下载jquery.js文件：https://jquery.com/
3.新建项目，将bootstrap文件夹中的dist文件夹复制到项目包中，并重命名为bootstrap；
4.将jquery.js文件复制到js文件夹中。
5.布局容器
（1）.container 类用于固定宽度并支持响应式布局的容器
<!--container 类用于固定宽度并支持响应式布局的容器-->
<div class="container" style="background-color: #1B6D85; height: 200px;">
Hello,world!
</div>
6.栅格网格系统
BootStrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。栅格系统用于通过一系列的行（row）或列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。
网格系统的实现通过定义容器大小，平分12份（也有平分成24份或32份，但12份是最常见的），再调整内外边距，最后结合媒体查询，就制作出来强大的响应式网格系统。BootStrapu框架中的网格系统就是将容器平分成12份。
<div style="background-color: #AFD9EE;">4</div>
<div style="background-color: #843534;">8</div>
<hr/>
<div class="container" >
<!-- 行元素 -->
<div class= "row">
<!-- 列元素 col-xs-数值 col-sm-数值 col-md-数值 col-lg-数值 -->
<div class="col-md-4" style="background-color: #67B168;">4</div>
<div class="col-md-8" style="background-color: #C0A16B;">8</div>
</div>
</div>
注意：
列总和数不能超过12，大于12会自动将整个换到下行。
2.列偏移
在列元素上添加col-md-offset-【】其中【】是要偏移的组合数。原则是保证列与偏移的列数不超过12.
<div class="row">
<div class="col-md-1" style="background-color: #CE8483;">1</div>
<div class="col-md-1 col-md-offset-1" style="background-color: #CE8483;">1</div>
<div class="col-md-1" style="background-color: #CE8483;">1</div>
<div class="col-md-1 col-md-offset-5" style="background-color: #CE8483;">1</div>
</div>
3.列排序
改变列的顺序，改变左右浮动，设置浮动距离
添加类名col-md-push-【】col-md-pull-【】其中【】是要移动的组合数。
4.列嵌套
<div class="row">
<div class="col-md-6" style="background-color: #101010;">
<div class="row">
<div class="col-md-1" style="background-color: #CE8483;">1</div>
<div class="col-md-9" style="background-color: #55aa00;">1</div>
<div class="col-md-1" style="background-color: #ffff7f;">1</div>
<div class="col-md-1" style="background-color: #ffaaff;">1</div>
</div>
</div>
</div>
(1)标题
为了使非标题元素和标题使用相同的样式，特意定义了h1~h6的六个类名，同时后面可以使用副标题标签。
<h1>
h1.bootstrap heading
<small>
副标题
</small>
</h1>
<div class="h1">
bootstrap标题1
<span class="small">副标题</span>
</div>
（2）段落
通过lead来突出强调内容(作用是增大文本字号,加粗文本,而且对行高和margin也做相应的处理)
小字号
加粗
斜体
<p>通过lead来突出强调内容(作用是增大文本字号,加粗文本,而且对<i>行高</i>和margin也做<em>相应</em>的处理)</p>
<p class="lead">通过lead来突出<small>强调</small>内容(作用是<b>增大</b>文本字号,<strong>加粗</strong>文本,而且对行高和margin也做相应的处理)</p>
定义了一套类名，强调类名，强调类都是通过颜色来表示强调
.text-muted：提示，使用浅灰色
.text-primary：主要，使用蓝色
.text-success：成功，使用浅绿色
.text-info：通知信息，使用浅蓝色
.text-warning：警告，使用黄色
.text-danger：危险，使用褐色
（4）对齐效果
<p style="text-align: center;">bootstrap通过定义四个类名来控制文本的对齐风格</p>
<p class="text-left">左对齐-bootstrap通过定义四个类名来控制文本的对齐风格</p>
<p class="text-center">居中-bootstrap通过定义四个类名来控制文本的对齐风格</p>
<p class="text-right">居中-bootstrap通过定义四个类名来控制文本的对齐风格</p>
<p class="text-justify">居中-bootstrap通过定义四个类名来控制文本的对齐风格通过lead来突出强调内容(作用是增大文本字号,加粗文本,
而且对通过lead来突出强调内容通过lead来突出强调内容(作用是增大文本字号,加粗文本,而且对
(作用是增大文本字号,加粗文本,而且对通过lead来突出强调内容(作用是增大文本字号,加粗文本,而且对
</p>
8.列表
<!-- 去点列表 -->
<ul class="list-unstyled">
<li>首页</li>
<li>java</li>
<li>python</li>
<li>html</li>
</ul>
<!-- 内联列表 定义列表 -->
<ul class="list-inline">
<li>C++</li>
<li>Android</li>
</ul>
9.代码
<code>this is a simple code</code>
<p>使用<kbd>ctrl</kbd>+<kbd>s</kbd>保存内容</p>
<pre>
public class HelloWorld{
public static void main(String[] args){
System.out.println("HelloWorld...");
}
}
</pre>
<!-- 添加滚动条 -->
<pre class="pre-scrollable">
<ol>
<li>.....</li>
<li>.....</li>
<li>.....</li>
<li>.....</li>
<li>.....</li>
<li>.....</li>
<li>.....</li>
<li>.....</li>
<li>.....</li>
<li>.....</li>
<li>.....</li>
<li>.....</li>
</ol>
</pre>
BootStrap菜鸟教程：https://www.runoob.com/bootstrap/bootstrap-intro.html
（1）导航
（2）下拉菜单
（3）模态框
覆盖在父窗体中的子窗体
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
