Bootstrap
文章平均质量分 84
我是一颗好李子
还是简简单单笔记
展开
-
Bootstrap组件——【按钮(预定义样式类、边框颜色、大小、激活和禁用状态 、按钮标签)、按钮组(定义按钮组、工具栏按钮组、大小、嵌套按钮、垂直排列)、下拉菜单(定义下拉菜单、下拉菜单样式)】
使用.btn-outline-*类可以没置按钮的边框,*可以从prirnary、secondary、success、danger.warning、info、light和dark中进行选择。Bootstrap提供了btn来定义按钮,btn定义了基本的按钮样式类。Bootstrap提供了.btn-group-lg,.btn-group-sm类作用在.btn-group类的容器,可以控制按钮组下的每个子按钮,实现样式缩放。使用.btn-lg、.btn-sm类样式,可分别实现大规格按钮、小规格按钮的定义。原创 2022-11-07 22:58:00 · 5211 阅读 · 1 评论 -
Bootstrap——制作个人简历网页、工具类【边框(添加、删除、颜色、圆角)、清除浮动、颜色(文本、链接、背景)、display属性、浮动、定位、文本对齐】
考虑到Bootstrap提供的.border类默认边框颜色是淡灰色,在实际开发中如果想要修改边框颜色,可以使用.border-*来设置想要的场景颜色。可以使用.text-white-数值和.text-black-数值来设置颜色的透明度效果,后面的数值表示的是透明度。Bootstrap提供了十几个辅助工具类,包括边框、清除浮动、颜色、display、浮动、定位、文本对齐等。Bootstrap提供了边框类样式,可以快速地添加、删除边框,也可以设置边框的颜色,边框的圆角。也可以设置某一个方向上的边框。原创 2022-11-07 14:19:05 · 9263 阅读 · 4 评论 -
Bootstrap——表格(基本实例、表头选项、条纹状表格、带边框的表格、无边框的表格、鼠标指针悬停、紧凑表格、状态类、响应式表格)
状态类设置的是、或元素样式,使用.table-*来设置,可选值包括success、active、primary、secondary、danger、warning、info、light、dark等,同时状态类也适用于反转色调。Bootstrap中提供了一系列表格布局样式,利用该样式可以帮助开发者快速开发出美观的表格,作用于元素的表格样式如下表所示。上表中,.table是表格的一个基类,如果想要加其他的样式,都要在.table的基础上去添加。例:表格背景颜色示例。原创 2022-11-05 15:19:41 · 10341 阅读 · 0 评论 -
Bootstrap——flex布局(定义弹性盒子、排列方向、内容排列、项目对齐、自身对齐、自动对等、等宽变换、自动边距、包裹、排序、对齐内容)
使用flexbox容器上的.justiiy-content-*类可以改变flex子元素在主轴上的对齐(默认x轴开始,如果flex-direction:column则为y轴开始)*可以是从start(浏览器默认值)、end、center、between或around。改变Flex子容器在Flex容器中的包裹方式(可以实现弹性布局),其中包括无包裹.flex-nowrap类(浏览器默认)、包裹.flex-wrap类,或者反向包裹.flex-wrap-reverse类。任何一个容器都可以指定为Flex布局。原创 2022-10-10 22:23:00 · 4282 阅读 · 0 评论 -
Bootstrap——列表(无序列表、有序列表、定义列表)、代码(code、pre、kbd、samp、var)、图片(响应式图片、图片缩略图、图片对齐方式)
除了CSS3提供的border-radius属性可以实现,在Bootstrap中定义了.img-thumbnail类可以使图片具有圆角且1px边界的边框样式。也可以通过设置max-width:100%,height:auto样式,来实现图片响应式效果。Bootstrap定义了.list-unstyled类样式,使用它可以移除默认的.list-style样式,并且设置左侧填充为0。(2)使用文本类.text-left、.text-center、.text-right,分别实现水平居中、居中和居右对齐。原创 2022-10-09 14:09:16 · 2632 阅读 · 0 评论 -
Bootstrap——排版(标题、段落、强调、缩略语、引用)
HTML5定义了若干个标签强调的标签,有、、、、、、等,在Bootstrap4中同样也可以使用,用来为元素添加强调样式。(3)固定不同级别标题字体大小,一级为2.5rem,二级为2rem,三级为1.75rem,四级为1.5rem,五级为1.25rem,六级为1rem。和都可以实现下画线效果,但是前者通常与一起使用。和都可以实现删除效果,但是更具有语义化,能更形象的描述删除意思。原创 2022-10-09 13:26:15 · 1733 阅读 · 0 评论 -
Bootstrap网格系统工作原理、网格系统前缀、利用网格系统实现导航栏效果、栅格系统中的列嵌套、栅格系统中的列偏移、栅格系统中的自动布局列、栅格系统中的重排序、模仿淘宝网站商品展示的页面效果
栅格系统:使用.offset-md-*类将列向右侧偏移, 主要是通过使用.offset-md-*获取到当前元素并且增加了当前元素左侧的边距(margin)来实现的。栅格系统提供了基本的前缀,用于在不同宽度的屏幕中实现不同的排列方式,列的类名可以写多个,也就是可以同时设置.col-*、.col-sm-*、.col-md-*、.col-lg-*和.col-xl-*类名。实现的主要思路: 我们在现有的div.col-md-*元素的内部,再去添加一个新的div.row元素和一系列的div.col-md-*元素。原创 2022-10-01 15:17:13 · 1339 阅读 · 0 评论 -
Bootstrap布局(一)
当移动端浏览器展示PC端网页内容时,由于移动端设备屏幕比较小,布局视口不能像PC端浏览器那样完美地展示网页,网页在手机的浏览器中会出现左右滚动条,用户需要左右滑动才能查看完整的一行内容。视口(Viewport)最早是由苹果公司在推出iPhone手机时发明的,其目的是为了让iPhone的小屏幕尽可能完整显示整个网页,它是浏览器显示页面内容的屏幕区域。视觉视口是指用户正在看到的网站的区域,这个区域的宽度等同于移动设备的浏览器窗口的宽度。布局视口是指网页的宽度,一般移动端浏览器都默认设置了布局视口的宽度。原创 2022-09-29 13:01:37 · 2740 阅读 · 0 评论 -
初识Bootstrap
对于开发者而言,减少了大量重复的工作,提高了工作的效率;响应式设计Bootstrap是由美国Twitter公司开发的一种前端框架,用来快速开发响应式布局、移动设备优先的Web前端页面。响应式页面指的是同一页面在不同屏幕尺寸下实现不同的布局,从而使一个页面兼容不同的终端。Bootstrap基于HTML、CSS、JAVASCRIPT,它简洁灵活,使得Web开发更加快捷,是目前最受欢迎的前端框架之一。CSS样式表:Bootstrap自带了全局的CSS样式,并预先定义了基本的HTML元素样式、可扩展的class。原创 2022-09-27 23:48:08 · 503 阅读 · 0 评论