《响应式页面设计》_项目5bootstrap公共样式任务5.1任务5.2任务5.3.pptxVIP

;1、设置边框;边框适用于图像、按钮或任何其他元素，颜色一般应用文本颜色、背景颜色，本次任务使用边框通用定义类、颜色定义类来快速设置元素的边框、颜色。;style

span{

display:inline-block;

width:75px;

height:75px;

margin:5px;

border:1pxsolid;

background:#F5F5F5;

}

/style;Bootstrap提供了一些用于强调文本的类，通过颜色来展示意图，不同的类展示了不同的文本颜色。如果文本是个链接鼠标移动到文本上会变暗示例如下面所示，还可以使用text-*-50进行降色。;divclass=text-primary.text-primary效果/div

divclass=text-secondary.text-secondary效果/div

divclass=text-success.text-success效果/div

divclass=text-info.text-info效果/div

divclass=text-warning.text-warning效果/div

divclass=text-danger.text-danger效果/div

divclass=text-dark.text-dark效果/div

divclass=text-light.text-light效果/div

divclass=text-muted.text-muted效果/div

divclass=text-whitebg-dark.text-white效果/div;pclass=bg-primarytext-white重要的背景颜色。/p

pclass=bg-successtext-white执行成功背景颜色。/p

pclass=bg-infotext-white信息提示背景颜色。/p

pclass=bg-warningtext-white警告背景颜色/p

pclass=bg-dangertext-white危险背景颜色。/p

pclass=bg-secondarytext-white副标题背景颜色。/p

pclass=bg-darktext-white深灰背景颜色。/p

pclass=bg-lighttext-dark浅灰背景颜色。/p;5.1.2设置颜色;1、设置浮动和清除浮动;能根据需求完成bootstrap元素浮动和响应式浮动的设置，显示和隐藏效果设置。;divclass=borderborder-dangerclearfix

divclass=float-leftstyle=background:#58D3F7

左边

/div

divclass=float-rightstyle=background:#DA81F5

右边

/div

/div

divaaa/div;二、响应式浮动

.float-[breakpoint]-[left|right|none]，breakpoint为sm,md,lg或xl。;5.2.2应用显示和隐藏;1、设置宽度、高度;pclass=bg-dangerw-25Width25%/p

pclass=bg-dangerw-50Width50%/p

pclass=bg-dangerw-75Width75%/p

pclass=bg-dangerw-100Width100%/p;divclass=borderborder-dangerstyle=height:100px;

divclass=d-inline-blockbg-primaryh-25Height25%/div

divclass=d-inline-blockbg-primaryh-50Height50%/div

divclass=d-inline-blockbg-primaryh-75Height75%/div

divclass=d-inline-blockbg-primaryh-100Height100%/div

/div;5.3.2设置间隔;5.3.2设置间隔;5.3.2设置间隔;5.3.2设置间隔;5.3.2设置间隔;5.3.2设置间隔;5.3.2设置间隔;5.4.1启用弹性行为;使用.d-flex和.d-inline-flex实现开启flex布局样式，尝试如下示例1，效果如图5-11所示。;p使用d-flex类创建一个弹性盒子容器，并设置三个弹性子元素：/p

divclass=d-flexp-3bg-secondarytext-white

divclass=p-2bg-info