Web前端：Bootstrap响应式布局简单使用

最新推荐文章于 2022-12-02 12:43:29 发布

無_爲

最新推荐文章于 2022-12-02 12:43:29 发布

阅读量162

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/a526001650a/article/details/118341139

版权

Web前端专栏收录该内容

18 篇文章 1 订阅

订阅专栏

1.创建html模版，并引入Bootstrap的样式：
<!doctype html> <!-- html5类型 -->
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">  <!-- 页面编码 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">  <!-- 使用IE最高版本 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">  <!-- 视口宽度与设备一致 -->
    <!-- 上面3个meta标签得放在<head>最前面 -->
    <title>...</title>
    
    <!-- 引入Bootstrap依赖 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，得放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。也可以根据需要只加载单个插件。 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>  
  </head>
  <body>
    <html标签 class="Bootstrap样式名" /> //使用Bootstrap样式
  </body>
</html>

2.容器样式：
(1)container容器样式(固定宽度，宽度分为12等份)：
<html标签 class="container">  <!-- 使用container容器 -->
  ...
</html标签>

(2)container-fluid容器样式(填满屏幕，宽度随屏幕变化)：
<html标签 class="container-fluid">  <!-- 使用container-fluid容器 -->
  ...
</html标签>

3.列样式：
(1)列平均等份样式：
.col-xs-份数   //屏幕宽度为<768px的列样式
.col-sm-份数   //屏幕宽度为>=768 且 <992px的列样式
.col-md-份数   //屏幕宽度为>=992px 且 <1200px的列样式
.col-lg- 份数  //屏幕宽度为>=1200px的列样式
示例：
<html标签1 class="col-md-2 col-lg-1" /> //可以添加多个，用于适配不同屏幕宽度的设备，多个以空格隔开

(2)列偏移样式：
.col-md-offset-数值   //将标签偏移，偏移份数 = 12 - 数值
示例：
<html标签1 class="col-md-offset-2" /> //此标签向右偏移10份(12-2=10)

(3)列排序样式：
.col-md-push-数值   //将标签往右侧推指定份数
.col-md-pull-数值   //将标签往左侧拉指定份数
示例：
<html标签1 class="col-md-push-2" /> //此标签往右侧推2份

4.指定屏幕下显示或隐藏：
.hidden-xs    //屏幕宽度<768px的隐藏，其他分辨率下显示
.hidden-sm    //屏幕宽度>=768 且 <992px的隐藏，其他分辨率下显示
.hidden-md    //屏幕宽度>=992px 且 <1200px的隐藏，其他分辨率下显示
.hidden-lg    //屏幕宽度>=1200px的隐藏，其他分辨率下显示
示例：
<html标签1 class="hidden-xs" /> //此标签在屏幕宽度<768px时隐藏

5.具体样式见官网：
https://v3.bootcss.com/css/#grid

無_爲

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web前端：Bootstrap响应式布局简单使用

1.创建html模版，并引入Bootstrap的样式：<!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 使用IE最高版本 --&gt.
复制链接

扫一扫

专栏目录