bootstrap（一）

最新推荐文章于 2022-01-14 15:18:27 发布

不会长胖的女孩

最新推荐文章于 2022-01-14 15:18:27 发布

阅读量147

点赞数

分类专栏： bootstrap 文章标签： bootstrap

本文链接：https://blog.csdn.net/weixin_44097082/article/details/94646602

版权

bootstrap 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

一、bootstrap的导入

<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>

注意：要先导入jquery.min.js 再导入bootstrap.min.js
在这里插入图片描述

二、以移动设备为优先

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
屏幕与设备的屏幕一致，初始缩放为1:1，禁止用户缩放

三、排版颜色

```
<body style="background:gray;"></body>
```

 <div class="container-fluid" style="background:#ffffff;"></div>

<h1 class="page-header text-center">产品展示</h1>
<h2 class="page-header text-right"><small>新闻</small><big>内容</big></h2>

 <del>这是一个段落</del></p>
<p class="text-uppercase">bootstrap大写  </p>
<p class="text-lowercase">Bootstrap小写</p>
<p class="text-capitalize"> bootstrap首字母大写</p>
 <!-- h1 36px  h2  30px h3 24px h4 18px h5 14px h6 12px  page-header设置页头，给标题加一个分割线 -->
 <!-- small 副标题 小一号 big 副标题 大一号  strong推荐使用的加粗 em推荐使用的 del删除线 -->

<h3 class="page-header">列表</h3>
<ul class="list-unstyled list-inline">    
 <!-- list-unstyled去列表之前的符号，去掉原有的格式 -->
 <!-- list-inline 纵向变横向 -->

<ul class="list-unstyled list-inline">
<!-- list-unstyled去列表之前的符号，去掉原有的格式 -->

 <dl class="dl-horizontal">
     <dt>标题</dt>
     <dd>标题解释</dd>

</dl>
 <!-- dl-horizontal设置变成横向排列 -->

 <table class="table table-bordered table-hover table-striped table-condensed">
 <!-- .table 表格的一个基类，如果加其他的样式，都在.table的基础上 -->
 <!-- .table-bordered 给表格加上外边框 -->
 <!-- .table-hover 鼠标悬停效果，鼠标移到行或单元格变色 -->
 <!-- .table-striped 斑马线效果隔行换色  -->
 <!-- .table-condensed变得紧凑一些 --> </table>

在这里插入图片描述 8. container固定宽度1170px
container-fluid宽度为100%
text-left左对齐 text-right 右对齐
text-center 中间对齐
英文大小写问题：text-uppercase 大写 text-lowercase 小写 text-capitalize 首字母大写