Bootstrap简单介绍

最新推荐文章于 2024-03-11 09:38:33 发布

原创最新推荐文章于 2024-03-11 09:38:33 发布 · 556 阅读

2 ·

CC 4.0 BY-SA版权

JavaWeb 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了Bootstrap，一个流行的WEB前端框架，用于快速构建响应式、高大上的网站。Bootstrap包含全局CSS样式、栅格系统、组件和JS插件，简化了网页开发，特别是其栅格系统能适应不同分辨率设备，提升用户体验。通过学习Bootstrap，开发者可以利用预定义的类快速创建专业级的网页设计。

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

为什么学Bootstrap

它是一个做网页的框架（目前最流行的WEB前端框架），就是说你只需要写HTML标签调用它的类你就可以很快速的做一个高大上的网页，你不用担心兼容问题，提供了很多样式供你选择！
比如你需要做一个网站的导航对吧，你自己写的话你需要写很多代码，但是如果你使用bootstrap框架来写的话，只需要写好HTML标签然后调用类名就可以了！

作用：
用它提供的样式和组件快速写网站

你只需要引用一些定义好的类，也就是class名字，就可以创建出已经有非常漂亮的样式的网页，而且支持自适应，是一个很不错的框架。

简单点说：是一个快速搭建网站前台页面的开源项目（基于Jquery）。你只需要了解相关的class、标签名称等所代表的意思，然后在构建页面的时候，导入bootstrap的JS、css等，它就会去表现相应的效果出来：
比如HTML说明：缩略语；当鼠标悬停在缩写和缩写词上时就会显示完整内容，Bootstrap实现了对HTML 元素的增强样式。缩略语元素带有title属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针。当你需要段落文字某个单词或者词语需要有上面的那种效果，你就那样按照那种格式写就好了，附加的class=“initialism”是让字号更小一点，也可以不要。反过来说：如果你不试用bootstrap的东西或者其他类似的框架，那你就得自己写这样的效果，开发时间长。再比如Jquery的easyui，也是差不多道理。

什么是响应式页面

适应不同的分辨率显示不同样式,提高用户的体验

BootStrap的中文网
http://www.bootcss.com
下载BootStrap
BootStrap结构
- 全局CSS
  - bootStrap中已经定义好了一套CSS的样式表
- 组件
  - BootStrap定义的一套按钮,导航条等组件
- JS插件
  - BootStrap定义了一套JS的插件,这些插件已经默认实现了很多种效果

BootStrap的入门开发

	<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
		<link rel="stylesheet" href="../css/bootstrap.css" />
		
		<!--需要引入JQuery-->
		<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
		
		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
		<script type="text/javascript" src="../js/bootstrap.js" ></script>
		
		<meta name="viewport" content="width=device-width, initial-scale=1">

BootStrap的布局容器

container 类用于固定宽度并支持响应式布局的容器

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

container-fluid类用于 100% 宽度，占据全部视口（viewport）的容器。

<div class="container-fluid">
  ...
</div>

栅格系统

Bootstrap 栅格系统的工作原理：
- “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。

通过“行（row）”在水平方向创建一组“列（column）”。
你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding

** BootStrap的栅格系统**

响应式设计: 这种设计依赖于CSS3中的媒体查询
栅格样式:
- 设备分辨率大于1200 使用lg样式
- 设备分辨率大于992 < 1200 使用md样式
- 设备分辨率大于768 < 992 使用sm样式
- 设备分辨率小于768使用xs样式
BootStrap的全局CSS
- 定义了一套CSS
  - 对页面中的元素进行定义
  - 列表元素,表单,按钮,图片…

总结

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

全局CSS样式: css样式
- 栅格系统:
  - 将屏幕划分成12个格子,12列
  - class=‘row’ 当前是行
  - 行里面放的是列 col-屏幕分辨率-数字 (每一种分辨率后的数字总和必须是等于12,如果超过12,另起一行)
  - col-lg-数字: 在超宽屏幕上使用
  - col-md-数字: 在中等屏幕上,PC电脑
  - col-sm-数字: 在平板电脑上
  - col-xs-数字: 在手机上
组件: 导航条 , 进度条, 字体
javascript插件 : 轮播图
复制粘贴
什么是响应式: 会根据不同的分辨率去显示不同页面结构,提高用户体验