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