BootStrap框架入门

2022-01-05 09:06:53 阅读：231 来源： 互联网

标签：bootstrap 入门框架 BootStrap lead ..... 加粗文本类名

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

BootStrap框架入门

BootStrap框架入门