当前位置：凯发ag旗舰厅登录网址下载 > 前端技术 > html >内容正文

html

bootstrap前端组件库构建管理 -凯发ag旗舰厅登录网址下载

发布时间：2023/12/14 html 14 豆豆

凯发ag旗舰厅登录网址下载收集整理的这篇文章主要介绍了 bootstrap前端组件库构建管理小编觉得挺不错的,现在分享给大家,帮大家做个参考.

建立可伸缩的甚至是响应式组件的方式：弹性盒、网格和多栏布局、媒体查询
为了建立响应式设计（已经广受浏览器支持），我们一般最常探测的特征是视口宽度，而且我们可以使用min-width、max-width和width媒体特征，在视口宽度大于或者小于某个大小——或者是恰好处于某个大小——的时候，应用css。

为了让 css 中的尺寸设置更加直观，我们将全局的 box-sizing 从 content-box 调整为 border-box。这样可以确保 padding 的设置不会影响计算元素的最终宽度，但是会导致某些第三方软件（例如 google maps 和 google custom search engine）出现问题。
bootstrap是基于html、css、javascript 开发的简洁、直观、强悍的前端开发框架，使得 web 开发更加快捷。使用grunt来构建css、javascript，并用jekyll来写作文档。

grunt是node.js中一个javascript的任务管理器，可用来打造构建系统。也可以使用其他工具与技术来构建bootstrap

bootstrap的版本
默认版本、支持flexbox的版本、仅包含网格系统的版本

bootstrap内置一个移动优先、12栏布局的响应网格系统

bootstrap 的所有 javascript 插件都依赖 jquery，因此 jquery 必须在 bootstrap 之前引入，就像在基本模版中所展示的一样。在 bower.json 文件中列出了 bootstrap 所支持的 jquery 版本。

bootstrap的功能有很多

grunt

安装node.js和npm之后系统全局安装grunt
bootstrap的软件包中自带构建流程。
使用任务管理器创建bootstrap项目的构建流程：将sass代码编译为css代码、处理javascript代码、运行静态web服务器来测试结果，可以把流程复用到自己的新项目中

sass

bootstrap v4 版本使用 node sass 工具将 sass 源码文件编译为 css 文件（已包含在我们的构建流程中了）。如果你需要自己编译 sass 源码的话，为了保证最终生成的 css 与官方保持一致，你所使用的 sass 编译器至少要支持 node sass 所支持的所有功能。推荐dart sass
https://sass.bootcss.com/
规则嵌套提供代码效率
@变量
混入
操作：自带一些颜色函数，e.g：darken
文件引入，模块化css文件

javascript

几乎所有的 bootstrap 插件都可以通过带有 data 属性的 html 元素单独开启和配置（我们推荐 javascript api 为首选方式）。请确保仅在单个 html 元素上使用同一个插件的 data 属性（例如，你不能通过同一按钮触发工具提示和模态框。）

$(document).off('.alert.data-api')

使用 bootstrap 自带的 npm 脚本来构建文档、编译源码、运行测试等。

bootstrap 为大多数插件的独特行为提供了自定义事件。
事件的命名以不定式或过去分词形式出现，例如，在事件开始时触发的事件名时不定式形式的（例如 show），在事件完成时触发的事件名是过去分词形式的（例如 shown）。
所有方法都可以接受三种参数形式：对象类型的参数、字符串类型的参数（将被当作是某个方法的名称）或没有参数（将以默认行为启动插件）：
所有不定式形式命名的事件都提供 preventdefault() 功能。这就赋予了你在动作开始之前将其停止的能力。如果事件处理函数的返回值是 false，将自动调用 preventdefault()。
一旦 javascript 被禁用，bootstrap 的插件没有优雅降级的方案。如果你很关心在这种情况下的用户体验，请使用标签并向你的用户解释情况（以及重新启用 javascript 的方法），和/或添加你自己的降级方案。

前端开发选择组件库很重要，需要考虑是否含有所需组件、代码量级、技术配合等因素
bootstrap、element-ui、ant design的核心区别在于组件库。
bootstrap是基于jquery的dom操作的，vue有vnode的概念不是很契合。
一篇很细节的jquery的dom操作博客
ps:现在有bootstrapvue
但是element-ui、ant design原生就是用vue实现的组件库。
也可以组合使用

react就选bootstrap

一些语法

媒体查询

css媒体查询为你提供了一种应用css的方法，仅在浏览器和设备的环境与你指定的规则相匹配的时候css才会真的被应用
all
print
screen
speech

@media media-type and (media-feature-rule) {/* css rules go here */ }@media screen and (width: 600px) {body {color: red;} }

and、not、only、or 逗号

辅助类

bootstrap 提供了一些帮助器类，以便更快地实现对移动设备友好的开发。这些可以通过媒体查询结合大型、小型和中型设备，实现内容对设备的显示和隐藏。
.visible-xs
.hidden

栅栏系统

使用行列构建页面超出最大列宽12会换行行类可以写多个表示不同分辨率下显示
offset偏移和纳入列宽，大于12也会换行
push/pull列的微调不受总和12的限制

bootstrap栅栏系统css中的col-xs-、col-sm-、col-md-* 的意义：
.col-xs- 超小屏幕手机 (<768px)
.col-sm- 小屏幕平板 (≥768px)
.col-md- 中等屏幕桌面显示器 (≥992px)
.col-lg- 大屏幕大桌面显示器 (≥1200px)

补充

调整高度后可以使用 div.clearfix避免影响下面的行

dl水平短语列表下的dt dd 默认是分别占据一行的, 如果有class=“dl-horizontal” 下dt dd在一行
table tr td 表格使用class=table table-striped table-bordred添加样式
striped 斑马线 hove鼠标焦点 condensed 压缩
给tr添加背景色class=active | success | info | warning | danger
表格字数超长默认换行,不换行滑动使用外部容器 .table-responsive

form表单内部的提交的价值对添加form-group

代码示例

媒体查询

visible-md-8 hidden-xs pc端显示手机端隐藏

<!doctype html> <html> <head> <meta charset="utf-8"> <title>一个模板</title> <style> * {box-sizing: border-box; }body {width: 90%;margin: 2em auto;font: 1em/1.3 arial, helvetica, sans-serif; }a:link, a:visited {color: #333; }nav ul, aside ul {list-style: none;padding: 0; }nav a:link, nav a:visited {background-color: rgba(207, 232, 220, 0.2);border: 2px solid rgb(79, 185, 227);text-decoration: none;display: block;padding: 10px;color: #333;font-weight: bold; }nav a:hover {background-color: rgba(207, 232, 220, 0.7); }.related {background-color: rgba(79, 185, 227, 0.3);border: 1px solid rgb(79, 185, 227);padding: 10px; }.sidebar {background-color: rgba(207, 232, 220, 0.5);padding: 10px; }article {margin-bottom: 1em; } @media screen and (min-width: 40em) {article {display: grid;grid-template-columns: 3fr 1fr;column-gap: 20px;}nav ul {display: flex;}nav li {flex: 1;} } </style> </head> <body><div class="wrapper"><header><nav><ul><li><a href="">about</a></li><li><a href="">contact</a></li><li><a href="">meet the team</a></li><li><a href="">blog</a></li></ul></nav></header><main><article><div class="content"><h1>veggies!</h1><p>...</p></div><aside class="related"><p>...</p></aside></article><aside class="sidebar"><h2>external vegetable-based links</h2><ul><li>...</li></ul></aside></main><footer><p>©2019</p></footer></div></body> </html>

网格系统

网格系统通过一系列包含内容的行和列来创建页面布局
行必须放置在.container元素内，列放在行里面

<!doctype html> <html lang="en"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>media queries: a simple mobile first design, adding a grid component</title><style>* {box-sizing: border-box;}body {width: 90%;margin: 2em auto;font: 1em/1.3 arial, helvetica, sans-serif;}a:link,a:visited {color: #333;}nav ul,aside ul {list-style: none;padding: 0;}nav a:link,nav a:visited {background-color: rgba(207, 232, 220, 0.2);border: 2px solid rgb(79, 185, 227);text-decoration: none;display: block;padding: 10px;color: #333;font-weight: bold;}nav a:hover {background-color: rgba(207, 232, 220, 0.7);}.related {background-color: rgba(79, 185, 227, 0.3);border: 1px solid rgb(79, 185, 227);padding: 10px;}.sidebar {background-color: rgba(207, 232, 220, 0.5);padding: 10px;}article {margin-bottom: 1em;}.grid {list-style: none;margin: 0;padding: 0;display: grid;gap: 20px;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));}.grid li {border: 1px solid #666;padding: 10px;}@media screen and (min-width: 40em) {article {display: grid;grid-template-columns: 3fr 1fr;column-gap: 20px;}nav ul {display: flex;}nav li {flex: 1;}}@media screen and (min-width: 70em) {main {display: grid;grid-template-columns: 3fr 1fr;column-gap: 20px;}article {margin-bottom: 0;}footer {border-top: 1px solid #ccc;margin-top: 2em;}}</style></head><body><div class="wrapper"><header><nav><ul><li><a href="">about</a></li><li><a href="">contact</a></li><li><a href="">meet the team</a></li><li><a href="">blog</a></li></ul></nav></header><main><article><div class="content"><h1>veggies!</h1><p>veggies es bonus vobis, proinde vos postulo essum magis kohlrabiwelsh onion daikon amaranth tatsoi tomatillo melon azuki beangarlic.</p><p>gumbo beet greens corn soko endive gumbo gourd. parsley shallotcourgette tatsoi pea sprouts fava bean collard greens dandelionokra wakame tomato. dandelion cucumber earthnut pea peanut sokozucchini.</p><ul class="grid"><li><h2>card 1</h2><p>turnip greens yarrow ricebean rutabaga endive cauliflower sealettuce kohlrabi amaranth water spinach avocado daikon napacabbage asparagus winter purslane kale.</p></li><li><h2>card 2</h2><p>celery potato scallion desert raisin horseradish spinachcarrot soko.</p></li><li><h2>card 3</h2><p>lotus root water spinach fennel kombu maize bamboo shoot greenbean swiss chard seakale pumpkin onion chickpea gram corn pea.</p></li><li><h2>card 4</h2><p>brussels sprout coriander water chestnut gourd swiss chardwakame kohlrabi beetroot carrot watercress.</p></li><li><h2>card 5</h2><p>corn amaranth salsify bunya nuts nori azuki bean chickweedpotato bell pepper artichoke.</p></li></ul></div><aside class="related"><p>all these veggies are brought to you by the<a href="https://veggieipsum.com/">veggie ipsum generator</a>.</p></aside></article><aside class="sidebar"><h2>external vegetable-based links</h2><ul><li><ahref="https://www.thekitchn.com/how-to-cook-broccoli-5-ways-167323">how to cook broccoli</a></li><li><a href="https://www.bbcgoodfood.com/glossary/swiss-chard">swiss chard</a></li><li><ahref="https://www.bbcgoodfood.com/recipes/collection/christmas-parsnip">christmas parsnip recipes</a></li></ul></aside></main><footer><p>©2019</p></footer></div></body> </html>