框架Bootstrap

最新推荐文章于 2024-09-25 11:48:51 发布

Rocke369

最新推荐文章于 2024-09-25 11:48:51 发布

阅读量218

点赞数

CC 4.0 BY-SA版权

分类专栏：框架

本文链接：https://blog.youkuaiyun.com/qq_39314291/article/details/82229704

框架专栏收录该内容

2 篇文章

订阅专栏

博客介绍了Bootstrap这一流行的HTML、CSS和JS框架，用于开发响应式、移动优先的WEB项目。包含下载配置Bootstrap环境的官网及中文译站，还介绍了搭建环境CDN，重点阐述了重要技术栅格系统的参数，以及文本操作如对齐、改变大小写等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Bootstrap 是目前最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

1 下载配置Bootstrap环境
官网 https://getbootstrap.com/
中文译站 http://www.bootcss.com/

2 搭建环境CND

<!-- 兼容IE8以下的IE浏览器-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 适配移动设备-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- bootstrap 样式CDN-->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- bootstrap 基于的jQuery框架-->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- bootstrap js CDN-->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

重要技术：栅格系统

<div class="container-fluid">
  <div class="row">
      <div class="col-xs-6 col-sm-4 col-md-4">3列变2列布局</div>
      <div class="col-xs-6 col-sm-4 col-md-4">3列变2列布局</div>
      <div class="col-xs-6 col-sm-4 col-md-4">3列变2列布局</div>
  </div>
</div>

参数：
container-fluid 自适应宽度（100%）
container 固定宽度
col-xs- 手机屏幕（<768px）
col-sm- 平板（≥768px）
col-md- 常规桌面（≥992px）
col-lg- 大屏显示器（≥1200px）
col-xs-offset-2 列偏移
col-sm-offset-2
col-md-offset-2
列排序
col-md-push-5 将已分配的列，往后（push）推动
col-md-pull-5 pull往前推动
隐藏/显示
hidden-xs 将列在超小屏幕中隐藏

文本操作：对齐

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

改变大小写

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>