精华内容
下载资源
问答
我要提问
  • bootstrap.min.css与bootstrap.css有什么区别？
    万次阅读
    2020-01-31 19:04:30

    bootstrap.css 和 boostrap.min.css 的区别就是：前者是未压缩的，后者是压缩过的。

    一般情况下，未压缩的用于开发环境，如果程序出错方便调试。而压缩过的用生生产环境，大大减少网络数据传输量，便之更快更节约流量……

    boostrap.min.css也是完整的库，只不过通过工具压缩，令相同的代码所占空间更小，从而提升web性能，减少宽带的压力，然而这是以文件的可读性为代价的。当你打开min文件之后会发现代码挤在一起几乎没办法阅读。

    压缩的方法就是删除了所有换行和空格

    更多相关内容

  • Bootstrap（CSS库）

     热门讨论 2011-12-29 16:13:48
    Bootstrap包是个相对简单的程序库，但也提供了优雅的HTML和CSS规范。它与CSS框架Blueprint存在很多相似之处。 值得一提的是，Bootstrap并不会在Twitter平台上运行，Twitter只是促进了它的开发，并将它公布出来。 ...
    收起

  • EffortlessUI:类似于CSS组件的Bootstrap组件库

     2021-03-18 19:19:35
    Create React App入门 该项目是通过引导的。 可用脚本 在项目目录中，可以运行： npm start 在开发模式下运行应用程序。打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。您还将在控制台中看到任何棉绒...
    收起
    JavaScript

  • PhotoGallery:基于PHP，HTML，CSS，bootstrap，JS的自适应照片库网站

     2021-04-05 07:46:03
    基于PHP，HTML，CSS，bootstrap，JS的自适应照片库网站。 屏幕截图和功能 展示 互动主页 完全响应！ 更新菜单栏 创建自己的类别！ 显示您类别中的照片！ 您可以编辑照片 使用编辑选项以全分辨率查看照片 由TM创建
    收起
    PHP

  • HTML-CAMP:用于学习HTML，CSS和BOOTSTRAP的存储库

     2021-03-28 01:50:02
    用于学习HTML，CSS和BOOTSTRAP的存储库 1- Create an HTML Page 2- Install bootstrap through CDN, External CSS 3- Bootstrap Grid 4- Create A Nav-Bar Why we use <!DOCTYPE html>? Doctype stands for ...
    收起
    HTML

  • 响应式Web开发项目教程（HTML5+CSS3+Bootstrap）源码.7z

     2021-06-10 18:53:00
    适合刚学习web前端以及正在学习的新手
    收起

  • Bootstrap的CSS样式

     2021-09-15 16:50:18
    1 布局 （1）container类 能够实现响应式 （2）contain-fluid类 宽度始终为100% 2 栅格系统 （1）col-xs-1：手机 （2）col-sm-1：平板 （3）col-md-1：PC 列偏移：col-md-offset-1 3 无样式列表 ...

    1 布局

    （1）container类
    能够实现响应式

    （2）contain-fluid类
    宽度始终为100%

    2 栅格系统

    （1）col-xs-1：手机

    （2）col-sm-1：平板

    （3）col-md-1：PC

    列偏移：col-md-offset-1

    3 无样式列表

    （1）list-unstyled：去掉ul默认样式

    （2）list-inline：将ul子元素放于同一行

    4 表格类

    给table添加的类：

    （1）table：表格基础类

    （2）table-striped：隔行变色

    （3）table-hover：鼠标悬停效果

    （4）table-condensed：缩小内边距为原来的一半

    （5）table-bordered：使表格有边框

    给tr或td添加的类：

    （1）.activate：鼠标悬停在行或单元格上时所设置的颜色

    （2）.success：标识成功或积极的动作

    （3）.info：表示普通的提示信息或动作

    （4）.warning：标识警告或需要用户注意

    （5）.danger：表示危险或潜在的带来负面影响的动作

    响应式表格：

    table-responsive：当屏幕尺寸小于768时，可以在表格下面出现滚动条

    5 按钮

    设置类即可
    （1）btn类：按钮的样式

    （2）btn-default类：悬停效果

    （3）btn-primary：首选项效果

    （4）btn-success：成功效果

    （5）btn-info：一般信息效果

    （6）btn-warning：警告效果

    （7）btn-danger：危险效果

    设置尺寸
    （1）btn-lg：变大

    （2）btn-sm：变小

    （3）btn-xs

    将按钮变为块元素：btn-block

    设置按钮被激活时的状态：active

    6 图片

    （1） img-round：圆角效果

    （2）img-circle：圆形

    （3）img-thumbnail：边框

    （4）img-responsive：图片变为响应式

    7 三角符号

    caret类

    8 快速浮动

    （1）pull-left

    （2）pull-right

    9 内容块居中

    center-block

    10 响应式工具

    （1）visible-xs/sm/md/lg:在不同的设备上显示

    （2）hiddem-xs/sm/md/lg:仅此大小隐藏

    收起
    展开全文
    html

  • bootstrap栅格系统简介，CSS库的引用

     2020-12-13 18:39:05
    以Bootstrap为例介绍如何使用CCS库

    官网：https://getbootstrap.com/
    开始引用：
    在bootstrap官网点击getstarted找到CSS样式的link
    在这里插入图片描述
    copy此link到html的head标签中即可开始引用bootstrap模块里面的组件；
    可在Components里面查找自己需要的组件，比如下面的alert组件，找到Examples
    在这里插入图片描述
    在这里插入图片描述

    <!DOCTYPE html>
<html>
	<head>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
	</head>
	<body>
    	<div class="alert alert-primary" role="alert">
  			primary alert—check it out!
		</div>
	</body>
</html>

    在这里插入图片描述

    栅格系统和响应机制
    将页面分为12等分，每个元素可以配置占用的比例，比如下面的div会根据页面大小动态调整大小，但是在页面上所占的比例始终是一样的
    在这里插入图片描述
    在这里插入图片描述

    <!DOCTYPE html>
<html>
	<head>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
        <style>
        	.row > div {
            	padding:20 px;
            	border: 2px solid black;
            }
        </style>
	</head>
	<body>
    	<div class="container">
  			<div class="row">
  				<div class="col-3">
  					朝辞白帝彩云间，
				</div>
                <div class="col-3">
  					千里江陵一日还。
				</div>
                <div class="col-3">
  					两岸猿声啼不住，
				</div>
                <div class="col-3">
  					轻舟已过万重山。
				</div>
			</div>
		</div>
	</body>
</html>

    还可以配置为页面大小不一时显示不同的效果，页面比较大时在一行上显示；当页面缩小到一点尺寸时一个div占一行
    在这里插入图片描述

    在这里插入图片描述

    <!DOCTYPE html>
<html>
	<head>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
        <style>
        	.row > div {
            	padding:20 px;
            	border: 2px solid black;
            }
        </style>
	</head>
	<body>
    	<div class="container">
  			<div class="row">
  				<div class="col-lg-3 col-sm-12">
  					朝辞白帝彩云间，
				</div>
                <div class="col-lg-3 col-sm-12">
  					千里江陵一日还。
				</div>
                <div class="col-lg-3 col-sm-12">
  					两岸猿声啼不住，
				</div>
                <div class="col-lg-3 col-sm-12">
  					轻舟已过万重山。
				</div>
			</div>
		</div>
	</body>
</html>
    收起
    展开全文

  • Bootstrap 图标库下载

     2020-02-29 13:22:36
    Bootstrap Icons：Bootstrap 有史以来第一次拥有自己的图标库，并且是专门为 Bootstrap 的组件和文档定制开发的。 Bootstrap Icons 的设计初衷是与 Bootstrap 组件配合使用，从表单到导航组件等。Bootstrap Icons ...
    收起

  • 基于Bootstrap3的纯CSS滑动开关按钮组件

     2019-12-13 07:06:16
    TiTatoggle是一款基于Bootstrap3的纯CSS滑动开关按钮组件。该滑动按钮组件没有使用Javascript，它的HTML结构和原生的Bootstrap checkbox组件结构基本相同，使用起来非常方便。它还提供了多种主题样式：IOS样式和...
    收起

  • CSS_and_Bootstrap_Responsive_Portfolio:单元 02 CSS 和 Bootstrap 作业

     2021-05-30 11:48:47
    带有描述项目的 README 的 GitHub 存储库 每个页面上的导航栏必须一致。 每个页面上的导航栏必须包含指向主页/关于、联系人和作品集页面的链接。 所有链接都必须有效。 - 完毕 必须使用语义html。 - 完毕 每个页面...
    收起
    HTML

  • bootstrap-slider：Bootstrap 3和Bootstrap 4的滑块控件

     2021-01-29 19:55:06
    请记住在加载Bootstrap CSS和JQuery之后加载插件代码。 jQuery是可选的，无论有没有插件，该插件都可以运行。 下面看一下如何与非JQuery接口进行交互的示例。 支持的浏览器 我们仅支持现代浏览器！！！ 基本上，...
    收起

  • Bootstrap Icons开源SVG图标库

     2021-07-06 14:13:56
    Bootstrap开源的SVG图标库，此图标库起初专门...Bootstrap Icons是SVG图标库，因此它们可以快速、轻松地扩展，并且可以配合CSS的使用进行个性化定制。根据自己的设置，可以通过多种方式将Bootstrap Icons添加到项目：
    收起

  • 基于Bootstrap的纯CSS3箭头按钮样式

     2019-12-13 03:45:34
    这是一款基于Bootstrap的纯CSS3箭头按钮样式。该按钮通过修改原生Bootstrap的按钮样式，来生成指向左侧或右侧的箭头按钮。
    收起

  • 网页设计：:artist_palette:有关CSS，Bootstrap，jQuery和React的注释的整理，链接到其他存储库和基本CSS3...

     2021-02-17 10:17:37
    简单CSS3动画和CSS艺术 课程结业证书 相关资料库 孤独的格兰姆 应用程序是一个基本的社交媒体应用程序，它使用多个RESTful API来获取用户和数据数据，然后再使用React渲染它们。 网页 存储库包含一些实践网页的列表...
    收起

  • saranshduggal:使用 HTML、CSS 和 Bootstrap，我能够创建一个网站来总结我迄今为止的技能和成就

     2021-05-31 04:51:01
    它包括各种风格组件和 Javascript 库，可提高网站的美感。 示例包括打字机效果、particle.js、typed-it.js、多种悬停效果和视差效果。 通过结合 Bootstrap，可以在各种尺寸的设备上查看该网站。 网站链接：bit.ly/...
    收起

  • CSS：Bootstrap4 安装使用

     2019-06-16 20:01:21
    Bootstrap v4下载（压缩包包括bootstrap.min.css和bootstrap.min.js） https://getbootstrap.com/docs/4.3/getting-started/download/ jquery.min.js下载 https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js ....

    1、下载文件安装到服务器

    Bootstrap v4下载（压缩包包括bootstrap.min.css和bootstrap.min.js）

    https://getbootstrap.com/docs/4.3/getting-started/download/

    jquery.min.js下载

    https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js

    popper.min.js下载

    https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js

    2、使用Bootstrap 4 CDN

    国内推荐使用 Staticfile CDN 上的库：
    Bootstrap4 CDN

    <!-- 新 Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
 
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
 
<!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
 
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>

    此外，你还可以使用以下的 CDN 服务：

    国内推荐使用 : https://www.staticfile.org/
国际推荐使用：https://cdnjs.com/
    收起
    展开全文
    HTML

  • CSS工具类样式库 bootstrap utils

     千次阅读 2018-11-29 22:14:08
    Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with BootstrapCDN and a template starter page. ...
    收起

  • bootstrap-css-utils:一些用于Bootstrap的实用CSS类（间距，显示等）

     2021-05-23 00:35:24
    Bootstrap CSS Utils是一些方便CSS帮助器类的集合，您可以使用它们来补充。 注意：这些类旨在与Bootstrap正常配合使用，但是如果您愿意，也可以单独使用它们。 目录 安装 凉亭 导入包： bower install bootstrap-...
    收起

  • 表单元件库组件、框架、web前后端Bootstrap、边框图表组件、数据可视化、后台模板、html、前端代码、js、...

     2021-07-02 11:29:11
    表单元件库组件、框架、web前后端Bootstrap、导航栏、边框、穿梭框、输入框、步骤条、图表组件、数据可视化、后台模板、html、前端代码、js、css 适用范围：PC端，前端页面展示 适用软件: H-builder 、VSCode、...
    收起

  • 纯CSS Bootstrap单选框和复选框美化特效

     2019-12-13 02:23:12
    icheck-bootstrap是一款纯CSS Bootstrap单选框和复选框美化特效插件。通过该插件，你可以对原生的bootstrap单选框和复选框进行美化，应用不同的主题样式，甚至可以制作扁平风格的单选框和复选框。
    收起

  • Responsive-WebPage:以HTML，CSS，Bootstrap，JQuery，OwlCarousel等开发的网页。为实践而开发

     2021-05-16 09:29:32
    Armentum分配 内置HTML，CSS，JavaScript，Bootstrap，Jquery的自适应网站主页。 入门 标头 轮播 卡部 新闻与博客 客户部分滑块 接触部分 ...下载此存储库：git clone...| | bootstrap.min.css | | | +---fontawesome | |
    收起

  • Bootstrap黑色主题分页导航样式

     2019-12-13 02:03:44
    这是一款黑色主题的Bootstrap分页导航样式。该分页导航样式通过简单的CSS代码，将原始的bootstrap分页美化为好看的黑色主题导航样式。
    收起

  • Bootstrap css ,js 前台开发, 样式库

     2016-09-05 15:17:41
    bootstrap css ,js 前台开发,样式库
    收起

  • bootstrap-themes：Bootstrap的主题

     2021-01-29 18:05:37
    该存储库包含免费和开源主题，这些主题是为使用Bootstrap v4或更高版本构建的网站创建的。 目录 包含什么 DevExpress炽烈浆果 | | DevExpress Office白色 | | DevExpress紫色 | | 入门 文件夹包含嵌套文件夹，其...
    收起

  • bootstrap.min.css &&.css

     2021-01-08 17:32:03
    min.css &&.css比较不同点总结 不同点 min.css .css ...而压缩过的用于生产环境，大大减少网络数据传输量，加载速度...  boostrap.min.css也是完整的库，只不过通过工具压缩，令相同的代码所占空间更小，从
    收起
    经验分享

  • vue中引入css第三方库的两种方法（以bootstrap.css为例）

     2022-03-22 09:20:34
    方法1：在存放静态资源的assets里面新建一个文件夹css，把bootstrap.css放到新建的文件夹css中，然后在App.vue页面引入bootstrap.css 【通过import引入，vue脚手架会进行非常严格的检查】 方法2：在public...
    收起
    vue.js 前端

  • html+css实战1-仿bootstrap写一个简单css库

     2019-02-11 21:13:36
    通过仿写一部分bootstrap库的功能，理解如何去实现一个css库，并且学会如何去使用这个库去完成各种页面布局
    收起

  • Responsive-static-website-using-html-css-bootstrap:这是一个响应Swift的网站，我使用前端库引导程序来使...

     2021-05-11 04:51:09
    响应式静态网站使用html-css-bootstrap 这是一个响应Swift的网站，我使用前端库引导程序进行创建。 本网站上使用的资料： HTML5，CSS3，BOOTSTRAP，用于图标的字体，Google字体 专业： 使用固定背景（包装纸），...
    收起
    HTML

  • Bootstrap的css样式初步了解

     千次阅读 2020-04-08 12:18:16
    这里写目录标题Bootstrap的简介为什么要使用BootstrapBootstrap的兼容性Bootstrap使用在那些些地方三级目录 Bootstrap的简介 大家好!我是：Bootstrap来自Twitter公司，是目前最流行的前端框架，它是...Bootstrap库...
    收起
    javascript jquery

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 37,829
精华内容 15,131
热门标签
关键字：

常用的css库bootstrap