bootstrap是什么能做什么基本使用

最新推荐文章于 2024-04-30 15:44:23 发布

张三也爱问为什么

最新推荐文章于 2024-04-30 15:44:23 发布

阅读量1.4k

点赞数 2

文章标签： bootstrap 前端框架

本文链接：https://blog.csdn.net/sadkhkuhkjasga/article/details/103481062

版权

临时先放这专栏收录该内容

26 篇文章 1 订阅

订阅专栏

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 强调</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<small>本行内容是在标签内</small><br>
<strong>本行内容是在标签内</strong><br>
<em>本行内容是在标签内，并呈现为斜体</em><br>
<p class="text-left">向左对齐文本</p>
<p class="text-center">居中对齐文本</p>
<p class="text-right">向右对齐文本</p>
<p class="text-muted">本行内容是减弱的</p>
<p class="text-primary">本行内容带有一个 primary class</p>
<p class="text-success">本行内容带有一个 success class</p>
<p class="text-info">本行内容带有一个 info class</p>
<p class="text-warning">本行内容带有一个 warning class</p>
<p class="text-danger">本行内容带有一个 danger class</p>
</body>
</html>

在这里插入图片描述

作用：
用它提供的样式和组件快速写网站
你只需要引用一些定义好的类，也就是class名字，就可以创建出已经有非常漂亮的样式的网页，而且支持自适应，是一个很不错的框架。
简而言之：你只需要了解相关的class、标签名称等所代表的意思，然后在构建页面的时候，导入bootstrap的JS、css等，它就会去表现相应的效果出来。

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架

Bootstrap 3 的设计目标是移动设备优先，然后才是桌面设备。

为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如下所示：

width 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览，那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。 initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。在移动设备浏览器上，通过为 viewport meta 标签添加 user-scalable=no 可以禁用其缩放（zooming）功能。通常情况下，maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕，就能让您的网站看上去更像原生应用的感觉全部代码：

网格系统，不同的设备，给不同的显示

在这里插入图片描述
媒体查询
媒体查询是非常别致的"有条件的 CSS 规则"。它只适用于一些基于某些规定条件的 CSS。如果满足那些条件，则应用相应的样式。
Bootstrap 中的媒体查询允许您基于视口大小移动、显示并隐藏内容。下面的媒体查询在 LESS 文件中使用，用来创建 Bootstrap 网格系统中的关键的分界点阈值。
/* 超小设备（手机，小于 768px） /
/ Bootstrap 中默认情况下没有媒体查询 /
/ 小型设备（平板电脑，768px 起） /
@media (min-width: @screen-sm-min) { … }
/ 中型设备（台式电脑，992px 起） /
@media (min-width: @screen-md-min) { … }
/ 大型设备（大台式电脑，1200px 起） */
@media (min-width: @screen-lg-min) { … }
我们有时候也会在媒体查询代码中包含 max-width，从而将 CSS 的影响限制在更小范围的屏幕大小之内。
@media (max-width: @screen-xs-max) { … }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { … }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { … }
@media (min-width: @screen-lg-min) { … }

Bootstrap里很多定义好的类样式，直接用，能非常快搭建一个前端网站
https://www.runoob.com/bootstrap/bootstrap-tables.html建议从这个网站阅读。
能直接用一些定义好的图标

可以在线编辑
https://www.runoob.com/try/bootstrap/layoutit/

张三也爱问为什么

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap是什么能做什么基本使用

Bootstrap是一个做网页的框架（目前最流行的WEB前端框架之一），就是说你只需要写HTML标签调用它的类你就可以很快速的做一个高大上的网页，你不用担心兼容问题，提供了很多样式供你选择！比如你需要做一个网站的文本显示对吧，你自己写的话你需要写很多代码，但是如果你使用bootstrap框架来写的话，只需要写好HTML标签然后调用类名就可以了！代码展示如下：<!DOCTYPE html&...
复制链接

扫一扫