BootStrap框架入门

2024-02-13 16:28:40

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>

（2）container-fluid 类用于100% 宽度，占据全部视口（viewport）的容器
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>

注意：
1.列组合
列总和数不能超过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.列嵌套
在一个列中添加一个或者多个行（row）容器，然后在行容器中插入列。

<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>

7.常用样式
(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>

（3）强调
定义了一套类名，强调类名，强调类都是通过颜色来表示强调
.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>

10.Bootstrap插件
BootStrap菜鸟教程：https://www.runoob.com/bootstrap/bootstrap-intro.html
（1）导航
（2）下拉菜单
（3）模态框
覆盖在父窗体中的子窗体

码农公寓

BootStrap框架入门

相关文章