1. 第一个项目
- 在桌面创建项目的文件夹；
- 把项目的文件夹拖入vscode；
- 把bootstrap导入文件夹；
- 新建html 文件夹；
- 创建index.html 文件；
- 给index文件导入 html 的基本样式；
- 给index文件导入Bootstrap的 css 基本样式 2个；
- 给index文件导入Bootstrap的 js 基本样式；
- 下载 jQuery 并导入；
运行结果
2. 网页制作框架
col-md-4：一行占 4/12
一个 div 中 后面数字一定加起来要等于12，否则将会另起一行
<div class="container">
<div class="row">
<div class="col-md-4">1</div>
<div class="col-md-4">2</div>
<div class="col-md-4">3</div>
</div>
<div class="row">
<div class="col-md-3">a</div>
<div class="col-md-9">b</div> /*在div.row中占9/12*/
</div>
</div>
框架如下
在列中再加行
<div class="container">
<div class="row">
<div class="col-md-4">1</div>
<div class="col-md-4">2</div>
<div class="col-md-4">3</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="col-md-3">a1</div>
<div class="col-md-9">a2</div>
</div>
</div>
<div class="col-md-9">b</div>
</div>
</div>
我们在列中再加一行
<div class="container">
<div class="row">
<div class="col-md-4">1</div>
<div class="col-md-4">2</div>
<div class="col-md-4">3</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="col-md-3">a1</div>
<div class="col-md-9">a2</div>
</div>
<div class="row">
<div class="col-md-3">a1</div>
<div class="col-md-9">a2</div>
</div>
</div>
<div class="col-md-9">b</div>
</div>
</div>
3. 针对不同的屏幕做自适应
4. 重置行高度
在你想要换行，高度不一致的地方重置时加上 div.clearfix
未添加
<div class="container">
<div class="row">
<div class="col-md-6" height: 100px;">1</div>
<div class="col-md-6"">2</div>
<div class="col-md-6"">3</div>
<div class="col-md-6"">4</div>
</div>
</div>
添加后
<div class="container">
<div class="row">
<div class="col-md-6" height: 100px;">1</div>
<div class="col-md-6"">2</div>
<div class="clearfix"></div>
<div class="col-md-6"">3</div>
<div class="col-md-6"">4</div>
</div>
</div>
5. 移动offset列的位置
<div class="container">
<div class="row">
<div class="col-md-3 col-md-offset-1">1</div>
<div class="col-md-3 col-md-offset-5">2</div>
</div>
</div>
col-md-offset-n: 实际上改变的是 margin-left
所以 col-md-offset-n + col-md-m 的n+m<12, 不然换行。
6. 微调列的位置
<div class="container">
<div class="row">
<div class="col-md-3 col-md-push-1">1</div>
<div class="col-md-3 col-md-pull-1">2</div>
</div>
</div>
col-md-push-n: 向右推
col-md-pull-m：向左拉
n, m 只能是整数，否则移动失效。
实质是将元素设置为position，进行左右移动，移动距离同col-md-offset-…,但不换行。
7. small标题
<div class="container">
<div class="row">
<div class="col-md-12" style="background-color: blueviolet;">
<h1 style="text-align: center;">
培源最帅！！！<small>废话</small>
</h1>
</div>
</div>
</div>
8. bootstrap中改变行高和字体
<body style="line-height: 40px; font-size:20px;">
<div class="container">
<div class="row">
<div class="col-md-12">
<p>Lorem iro placeat, quaerat omnis, repudiandae autem nesciunt esse eligendi laboriosam laborum illo veritatis laudantium sapiente.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil aliquid est saepe sequi aut vel vero placeat, quaerat omnis, repudiandae autem nesciunt esse eligendi laboriosam laborum illo veritatis laudantium sapiente.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil aliquid est saepe sequi aut vel vero placeat, quaerat omnis, repudiandae autem nesciunt esse eligendi laboriosam laborum illo veritatis laudantium sapiente.</p>
</div>
</div>
</div>
</body>
运行结果：
<body style="line-height: 40px; font-size: 20px;">在body中加入
line-height：改变行高；
font-size: 改变字体大小；
9. bootstrap中添加段落lead.
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<p>Lorem iro placeat, quaerat omnis, repudiandae autem nesciunt esse eligendi laboriosam laborum illo veritatis laudantium sapiente.</p>
<p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil aliquid est saepe sequi aut vel vero placeat, quaerat omnis, repudiandae autem nesciunt esse eligendi laboriosam laborum illo veritatis laudantium sapiente.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil aliquid est saepe sequi aut vel vero placeat, quaerat omnis, repudiandae autem nesciunt esse eligendi laboriosam laborum illo veritatis laudantium sapiente.</p>
</div>
</div>
</div>
</body>
在想要突出的段落标签中加入 lead 标签 <p class="lead">
9. bootstrap中强调词句.
强调词<mark></mark>
句划线<ins></ins>
<div class="container">
<div class="row">
<div class="col-md-12">
<p>Lorem iro placeat, quaerat omnis, repudiandae autem nesciunt esse eligendi laboriosam laborum illo veritatis laudantium sapiente.</p>
<p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil aliquid est saepe sequi aut vel vero placeat, quaerat omnis, repudiandae autem nesciunt esse eligendi laboriosam laborum illo veritatis laudantium sapiente.</p>
<p>Lorem ipsum <mark>Lorem, ipsum dolor.</mark> <ins>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, totam quis. Eveniet inventore eius dolorum illum vel rerum doloremque repudiandae saepe, beatae nobis ut fugit cumque fuga provident dolorem possimus!</ins> dolor sit amet consectetur adipisicing elit. Nihil aliquid est saepe sequi aut vel vero placeat, quaerat omnis, repudiandae autem nesciunt esse eligendi laboriosam laborum illo veritatis laudantium sapiente.</p>
</div>
</div>
</div>
运行结果：
10. bootstrap中文字居中
text-center：文字在盒子中居中；
text-right: 文字在盒子中靠右；
text-left：文字在盒子中靠左；
以上都是class属性，而非style样式
<div class="container">
<div class="row">
<div class="col-md-12 text-center" style="background-color: blueviolet;">
<h1>
培源最帅！！！<small>废话</small>
</h1>
</div>
</div>
</div>
以上效果与下面相同
<div class="container">
<div class="row">
<div class="col-md-12" style="background-color: blueviolet;text-align: center;">
<h1>
培源最帅！！！<small>废话</small>
</h1>
</div>
</div>
</div>
11. 文字样式
- 斜体
<em></em> - 小号
<small></small> - 着重
<strong></strong>
12. 无序列表和有序列表
<ol></ol>：有序列表
<ul></ul>： 无序列表
子列表都为<li></li>
<div class="container">
<div class="row">
<ol>
<li>a</li>
<li>b</li>
<li>c
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
</ol>
</div>
</div>
a, b, c是有序
1， 2， 3是 c的 无序 子列表
在实际应用中往往用无样式的列表
- 解决方法一：
加入<ul class="list-unstyled">标签
<div class="container">
<div class="row">
<ol class="list-unstyled">
<li>a</li>
<li>b</li>
<li>c
<ul class="list-unstyled">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
</ol>
</div>
</div>
2. 解决方法二：引入reset文件。
实质是
<style>
ol,
ul {
list-style: none;
padding: 0;
}
</style>
12. 编写带有描述的短语列表
dl : directed list
dt : directed title
dd: directed document
-
定义：
<dl> <dt> <dd>是一组合标签，使用了dt dd最外层就必须使用dl包裹，此组合标签我们也又叫表格标签，与table表格类似组合标签，故名我们也叫dl表格。
<dl><dt></dt><dd></dd></dl>为常用标题+列表型标签。如没有对dl dt dd标签初始CSS样式，默认dd列表内容会一定缩进。 -
用法：
<dl>
<dt>列表标题</dt>
<dd>列表内容</dd>
<dd>列表内容</dd>
...
</dl>
首先dt和dd是放于dl标签内，标签dt与dd处于dl下相同级。也就是dt不能放入dd内，dd不能放入dt内。在dl下，dt与dd处于同级标签。DD标签可以若干。同时不能不加dl地单独使用dt标签或dd标签。
我们实践使用dl dt dd标签最多地方，通常是具有标题，而标题下对应有若干列表简单的（栏目标题+对应标题列表）和标题对应下面有内容。
13. 水平短语列表
加入<dl class="dl-horizontal">标签
<div class="container">
<div class="row">
<dl class="dl-horizontal">
<dt>姓名</dt>
<dd>大帅B</dd>
</dl>
<dl class="dl-horizontal">
<dt>电话</dt>
<dd>123456789</dd>
</dl>
<dl class="dl-horizontal">
<dt>住址</dt>
<dd>皇家别院</dd>
</dl>
</div>
</div>
14. 代码样式效果
<div class="container">
<div class="row">
<div class="col-md-12">
<p>
复制使用 <kbd>ctrl+c</kbd>
换行使用 <code><br/></code>
</p>
</div>
</div>
</div>
kbd: <kbd></kbd>
<: <符号；
>：>符号；
code: <code></code>:Bootstrap 的内联样式
15. 创建表格
- td是table data cell的缩写
- tr是table row的缩写
Bootstrap的table样式：
<table class="table table-striped">：斑马线样式<table class="table table-bordered">：边框样式<table class="table table-hover">：鼠标移上时背景颜色样式
例：斑马线样式
<div class="container">
<div class="row">
<div class="col-md-12">
<table class="table table-striped">
<tr>
<td>id</td>
<td>content</td>
</tr>
<tr>
<td>1</td>
<td>培元</td>
</tr>
<tr>
<td>2</td>
<td>帅</td>
</tr>
<tr>
<td>3</td>
<td>低调</td>
</tr>
</table>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<table class="table table-bordered table-hover">
<tr class="active">
<td>id</td>
<td>content</td>
</tr>
<tr class="success">
<td>1</td>
<td>培元</td>
</tr>
<tr class="danger">
<td>2</td>
<td>帅</td>
</tr>
<tr class="warning">
<td>3</td>
<td>低调</td>
</tr>
</table>
</div>
</div>
</div>
- 收缩表格
<table class="table table-condensed">宽高变窄
16. table 水平响应式
在手机端 table-responsive
<div class="container">
<div class="row">
<div class="col-md-12">
<table class="table table-bordered table-hover ">
<tr class="active">
<td>id</td>
<td>content</td>
</tr>
<tr class="success">
<td>1</td>
<td>培元</td>
</tr>
<tr class="danger">
<td>2</td>
<td>帅</td>
</tr>
<tr class="warning">
<td>3</td>
<td>低调低调低调低调低调低调低调低调低调低调低调低调低调低调低调低调低调低调低调低调低调低调低调低调低调低调低调</td>
</tr>
</table>
</div>
</div>
</div>
换行
<div class="container">
<div class="row">
<div class="col-md-12 table-responsive">
<table class="table table-bordered table-hover ">
<tr class="active">
<td>id</td>
<td>content</td>
</tr>
<tr class="success">
<td>1</td>
<td>培元</td>
</tr>
<tr class="danger">
<td>2</td>
<td>帅</td>
</tr>
<tr class="warning">
<td>3</td>
<td>低调低调低调低调低调低调低调低调低调低调低调低调低调低调低调低调低调低调低调低调低调低调低调低调低调低调低调</td>
</tr>
</table>
</div>
</div>
</div>
左右拖动
17. 创建form表单
<div class="container">
<div class="row">
<div class="col-md-12">
<form>
<div class="form-group">
<lable for="name">name:</lable>
<input type="text" id="name" name="name" placeholder="name" class="form-control">
</div>
<div class="form-group">
<lable for="pw">password:</lable>
<input type="text" id="pw" name="pw" placeholder="pw" class="form-control">
</div>
<div class="form-group">
<lable for="content">content:</lable>
<textarea id="content" class="form-control"></textarea>
</div>
</form>
</div>
</div>
</div>
实质上是将input的width设置为100%
将form的宽度设置为300px之后即成为下图所示
<div class="form-group">
<lable for="pw">password:</lable>
<input type="text" id="pw" name="pw" placeholder="pw" class="form-control">
</div>
以上代码在vscode中 只要输入form-group即可
<div class="form-group">
<lable for="content">content:</lable>
<textarea id="content" class="form-control"></textarea>
</div>
以上代码只需输入b-form-textarea即可 textarea也能找到
