Bootstrap项目实战——架构视角介绍使用

最新推荐文章于 2024-07-20 15:49:14 发布

强哥blog

最新推荐文章于 2024-07-20 15:49:14 发布

阅读量8.2k

点赞数 2

分类专栏：随笔日记文章标签： bootstrap 前端框架架构学习框架方法 bootstrap实战

本文链接：https://blog.csdn.net/qq_36263601/article/details/74181631

版权

这篇博客详细介绍了如何使用Bootstrap进行项目实战，从搭建页面骨架、设置编码规范到构建响应式栅格系统、导航通栏、轮播图、选项卡等功能。博主强调了在不同屏幕尺寸下保持页面展示效果的重要性，还提到了Bootstrap的JS插件、自定义字体图标和深度自定义Bootstrap样式的方法。

摘要由CSDN通过智能技术生成

Bootstrap项目实战

1. 搭建Bootstrap页面骨架及项目目录结构

├─ /xxxxxxx/ ··················· 项目所在目录
└─┬─ /css/ ······················· 我们自己的CSS文件
  ├─ /font/ ······················ 使用到的字体文件
  ├─ /img/ ······················· 使用到的图片文件
  ├─ /js/ ························ 自己写的JS脚步
  ├─ /lib/ ······················· 从第三方下载回来的库【只用不改】
  ├─ /favicon.ico ················ 站点图标
  └─ /index.html ················· 入口文件

1.1.约定编码规范

1.1.1.HTML约定

在head中引入必要的CSS文件，优先引用第三方的CSS，方便我们自己的样式覆盖
在body末尾引入必要的JS文件，优先引用第三方的JS，注意JS文件之间的依赖关系，比如bootstrap.js依赖jQuery，那就应该先引用jquery.js 然后引用bootstrap.js

1.1.2.CSS约定

除了公共级别样式，其余样式全部由模块前缀
尽量使用直接子代选择器，少用间接子代避免错杀

1.2.HTML5文档结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>页面标题</title>
</head>
<body>

</body>
</html>

1.3.Viewport设置

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">

html中插入视口设置，可以通过emmet meta:vp 插入

1.4.浏览器兼容模式

<meta http-equiv="X-UA-Compatible" content="IE=edge">

html中插入兼容模式设置，可以通过emmet meta:compat 插入

1.5.favicon（站点图标）

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">

html中插入图标链接，可以通过emmet link:favicon 插入

1.6.引入相应的第三方文件

<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="my.css">
...
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
<script src="my.js"></script>

1.7.在我们默认的样式表中将默认字体设置为：

body{
  font-family: "Helvetica Neue", 
                Helvetica, 
                Microsoft Yahei, 
                Hiragino Sans GB, 
                WenQuanYi Micro Hei, 
                sans-serif;
}

2.完成页面空结构

先划分好页面中的大容器，然后在具体看每一个容器中单独的情况

<body>
  <!-- 头部区域 -->
  <header></header>
  <!-- /头部区域 -->
  <!-- 广告轮播 -->
  <section></section>
  <!-- /广告轮播 -->
  <!-- 特色介绍 -->
  <section></section>
  <!-- /特色介绍 -->
  <!-- 立即预约 -->
  <section></section>
  <!-- /立即预约 -->
  <!-- 产品推荐 -->
  <section></section>
  <!-- /产品推荐 -->
  <!-- 新闻列表 -->
  <section></section>
  <!-- /新闻列表 -->
  <!-- 合作伙伴 -->
  <section></section>
  <!-- /合作伙伴 -->
  <!-- 脚注区域 -->
  <footer></footer>
  <!-- /脚注区域 -->
</body>

3.构建顶部通栏

<header>
  <div class="topbar"></div>
</header>

3.1.container类

用于定义一个固定宽度且居中的版心

<div class="topbar">
  <div class="container">
    <!--
      此处的代码会显示在一个固定宽度且居中的容器中
      该容器的宽度会跟随屏幕的变化而变化
    -->
  </div>
</div>

3.2.栅格系统

Bootstrap中定义了一套响应式的网格系统，
其使用方式就是将一个容器划分成12列，
然后通过col-xx-xx的类名控制每一列的占比

3.2.1.row类

因为每一个列默认有一个15px的左右外边距
row类的一个作用就是通过左右-15px屏蔽掉这个边距

<div class="container">
  <div class="row"></div>
</div>

3.2.2.col-**-*类

col-xs-[列数]：在超小屏幕下展示几份
col-sm-[列数]：在小屏幕下展示几份
col-md-[列数]：在中等屏幕下展示几份
col-lg-[列数]：在大屏幕下展示几份
xs : 超小屏幕手机 (<768px)
sm : 小屏幕平板 (≥768px)
md : 中等屏幕桌面显示器 (≥992px)
lg : 大屏幕大桌面显示器 (≥1200px)

<div class="row">
  <div class="col-md-2 text-center"></div>
  <div class="col-md-5 text-center"></div>
  &

最低0.47元/天解锁文章

强哥blog

关注

2
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap项目实战——架构视角介绍使用

微金所项目实战1. 搭建Bootstrap页面骨架及项目目录结构├─ /xxxxxxx/ ··················· 项目所在目录└─┬─ /css/ ······················· 我们自己的CSS文件 ├─ /font/ ······················ 使用到的字体文件 ├─ /img/ ······················· 使用到的
复制链接

扫一扫

专栏目录