其他分享
首页 > 其他分享> > BootStrap框架入门

BootStrap框架入门

作者:互联网

BootStrap框架入门

  1. 下载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,入门,框架,BootStrap,lead,.....,加粗,文本,类名
来源: https://blog.csdn.net/qq_45556665/article/details/122302959