您的位置：首页 > Web前端 > BootStrap

bootstrap（一）

2019-07-04 19:58 1126 查看

一、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 首字母大写

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航