建设网站的重点与难点在于,做网站的职责,软件开发专业都学什么,龙岩做网站公司一、按钮
1.1、普通按钮
Bootstrap包括多个预定义的按钮样式#xff0c;每个样式都有自己的语义目的#xff0c;另外还有一些额外的功能可以用于更多的控制。 样式效果#xff1a;
源代码#xff1a;
body classcontainerbutton typebu…一、按钮
1.1、普通按钮
Bootstrap包括多个预定义的按钮样式每个样式都有自己的语义目的另外还有一些额外的功能可以用于更多的控制。 样式效果
源代码
body classcontainerbutton typebutton classbtn btn-primaryPrimary/buttonbutton typebutton classbtn btn-secondarySecondary/buttonbutton typebutton classbtn btn-successSuccess/buttonbutton typebutton classbtn btn-dangerDanger/buttonbutton typebutton classbtn btn-warningWarning/buttonbutton typebutton classbtn btn-infoInfo/buttonbutton typebutton classbtn btn-lightLight/buttonbutton typebutton classbtn btn-darkDark/buttonbutton typebutton classbtn btn-linkLink/button
/body1.2、轮廓按钮
.btn 在引用中实现轮廓按钮可以用默认修饰符类替换.btn-outline-*任何按钮上的所有背景颜色和图像。
样式效果 源代码
body classcontainerbutton typebutton classbtn btn-outline-primaryPrimary/buttonbutton typebutton classbtn btn-outline-secondarySecondary/button button typebutton classbtn btn-outline-successSuccess/button button typebutton classbtn btn-outline-dangerDanger/buttonbutton typebutton classbtn btn-outline-warningWarning/buttonbutton typebutton classbtn btn-outline-infoInfo/buttonbutton typebutton classbtn btn-outline-lightLight/buttonbutton typebutton classbtn btn-outline-darkDark/button
/body1.3、按钮组
1.3.1、水平按钮组
使用按钮组合可以把一系列按钮编组在一行里将一系列的 .btn 包裹在.btn-group内。
样式效果 源代码
body classcontainerdiv classbtn-group rolegroup aria-labelBasic examplebutton typebutton classbtn btn-secondaryLeft/buttonbutton typebutton classbtn btn-secondaryMiddle/buttonbutton typebutton classbtn btn-secondaryRight/button/div
/body1.3.2、垂直按钮组
添加.btn-group-vertical 将一组按钮垂直排列 。
样式效果
源代码
body classcontainerdiv classbtn-group-vertical rolegroup aria-labelBasic examplebutton typebutton classbtn btn-secondaryTop/buttonbutton typebutton classbtn btn-secondaryMiddle/buttonbutton typebutton classbtn btn-secondaryBottom/button/div
/body二、卡片
2.1、普通卡片
.card卡片组件是BootStrap 4新增的一组重要样式它是一一个灵活的、可扩展的内容器包含了可选的卡片头和卡片脚、一个大范围的内容、上下文背景色以及强大的显示选项。
.card-body可以建立起卡片的内容主体如果你需要在一个.card中装置带边框的内容时可以使用它.card-title和 h*组合添加卡片标题.card-link 与 结合可以方便添加平行的链接.card-subtitle 和 h* 结合可以添加副标题.card-img-top定义一张图片在卡片的顶部 。 Ps如果 .card-title 和 .card-subtitle 组合放在 .card-body 中, 则可对齐主、副标题。 card-body效果
card-body源代码
div classcard div classcard-body This is some text within a card body. /div
/divcard-title与card-link效果
card-title与card-link源代码
body classcontainerdiv classcard stylewidth: 18rem;div classcard-bodyh5 classcard-titleCard title/h5h6 classcard-subtitle mb-2 text-mutedCard subtitle/h6p classcard-textSome quick example text to build on the card title and make up the bulk of the cards content./pa href# classcard-linkCard link/aa href# classcard-linkAnother link/a/div/div
/bodycard-img-top效果
源代码
body classcontainerdiv classcard stylewidth: 18rem;img classcard-img-top src... altCard image capdiv classcard-bodyh5 classcard-titleCard title/h5p classcard-textSome quick example text to build on the card title and make upthe bulk of the cards content./pa href# classbtn btn-primaryGo somewhere/a/div/div
/body2.2、列表组卡片
样式效果
源代码
body classcontainerdiv classcard stylewidth: 18rem;ul classlist-group list-group-flushli classlist-group-itemCras justo odio/lili classlist-group-itemDapibus ac facilisis in/lili classlist-group-itemVestibulum at eros/li/ul/div
/body2.3、带页眉页脚的卡片
.card-header页眉.card-footer页脚
样式效果
源代码
body classcontainerdiv classcarddiv classcard-header Featured /divdiv classcard-bodyh5 classcard-titleSpecial title treatment/h5p classcard-textWith supporting text below as a natural lead-in to additional content./p/divdiv classcard-footera href# classbtn btn-primaryGo somewhere/a/div/div
/body三、表单组件
文本控件如 input、select、 textarea统一采用 .form-control 样式进行处理优化包括常规外观、focus选点中状态、尺寸大小等。
3.1、复选框和单选按钮
.form-check格式化复选框和单选框按钮form-check-inline强制水平布局
垂直布局样式效果
垂直布局源代码
body classcontainerdiv classform-checkinput classform-check-input typecheckbox value iddefaultCheck1label classform-check-label fordefaultCheck1Option one is this and that—be sure to include why its great/label/divdiv classform-checkinput classform-check-input typecheckbox value iddefaultCheck2label classform-check-label fordefaultCheck2Option one is this and that—be sure to include why its great/label/div
/body水平布局样式
水平布局源代码
body classcontainerdiv classform-check form-check-inlineinput classform-check-input typecheckbox idinlineCheckbox1 valueoption1label classform-check-label forinlineCheckbox1拿铁/label/divdiv classform-check form-check-inlineinput classform-check-input typecheckbox idinlineCheckbox2 valueoption2label classform-check-label forinlineCheckbox2摩卡/label/div
/body3.2、表单组
.form-group 群组可以向为表单赋予一些结构样式其唯一目的是提供标签的控制配对以及margin-bottom 属性可以在fieldset、 div或任何其它元素中使用它。
样式效果
源代码
body classcontainerdiv classform-grouplabel forformGroupExampleInputExample label/labelinput typetext classform-control idformGroupExampleInput placeholderExample input/divdiv classform-grouplabel forformGroupExampleInput2Another label/labelinput typetext classform-control idformGroupExampleInput2 placeholderAnother input/div
/body3.3、内联式表单
使用 .form-inline样式在单个水平行上显示一系列标签表单控件和按钮。
效果
源代码
form classform-inline label classsr-only forinlineFormInputName2Name/labelinput typetext classform-control mb-2 mr-sm-2 idinlineFormInputName2 placeholderJane Doelabel classsr-only forinlineFormInputGroupUsername2Username/label ……
/form3.4、表单下方帮助提示文本
可以使用…form-text t创建表单中的块级帮助文本。
样式效果
源代码
body classcontainerlabel forinputPassword5Password/labelinput typepassword idinputPassword5 classform-control aria-escribedbypasswordHelpBlocksmall idpasswordHelpBlock classform-text text-mutedYour password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji./small
/body内联式效果
源代码
body classcontainer
form classform-inlinediv classform-grouplabel forinputPassword6Password/labelinput typepassword idinputPassword6 classform-control mx-sm-3 aria-describedbypasswordHelpInlinesmall idpasswordHelpInline classtext-muted Must be 8-20 characters long./small/div
/form
/body四、列表与导航
4.1、状态指示列表组
添加 .active 到 .list-group-item 下的其中一行或多行以指示当前有效的选择状态。
样式效果
源代码
body classcontainerul classlist-groupli classlist-group-item activeCras justo odio/lili classlist-group-itemDapibus ac facilisis in/lili classlist-group-itemMorbi leo risus/lili classlist-group-itemPorta ac consectetur ac/lili classlist-group-itemVestibulum at eros/li/ul
/body4.2、无边框的列表
加入.list-group-flush选择器可以实现移除部分边框以及圆角从而产生边缘贴齐的列表组
样式效果
源代码
body classcontainerul classlist-group list-group-flushli classlist-group-item Cras justo odio/lili classlist-group-itemDapibus ac facilisis in/lili classlist-group-itemMorbi leo risus/lili classlist-group-itemPorta ac consectetur ac/lili classlist-group-itemVestibulum at eros/li/ul
/body4.3、通用导航
Bootstrap中提供的导航可共享通用标记和样式从基础.nav样式类到活动与禁用状态
.justify-content-center可以让导航水平居中显示.justify-content-end右对齐.flex-column导航垂直排列
水平排列样式效果
水平排列源代码
body classcontainerul classnav justify-content-centerli classnav-itema classnav-link active href#Active/a/lili classnav-itema classnav-link href#Link/a/lili classnav-itema classnav-link href#Link/a/lili classnav-itema classnav-link disabled href#Disabled/a/li/ul
/body垂直排列样式效果
垂直排列源代码
body classcontainerul classnav flex-columnli classnav-itema classnav-link active href#Active/a/lili classnav-itema classnav-link href#Link/a/lili classnav-itema classnav-link href#Link/a/lili classnav-itema classnav-link disabled href#Disabled/a/li/ul
/body4.4、选项卡样式导航
nav-tabs选项卡样式导航
样式效果
源代码
body classcontainerul classnav nav-tabsli classnav-itema classnav-link active href#Active/a/lili classnav-itema classnav-link href#Link/a/lili classnav-itema classnav-link href#Link/a/lili classnav-itema classnav-link disabled href#Disabled/a/li/ul
/body4.5、胶囊样式导航
nav-pills胶囊样式导航
样式效果
源代码
body classcontainerul classnav nav-pillsli classnav-itema classnav-link active href#Active/a/lili classnav-itema classnav-link href#Link/a/lili classnav-itema classnav-link href#Link/a/lili classnav-itema classnav-link disabled href#Disabled/a/li/ul
/body4.6、等比导航
使用.nav-fill会将 .nav-item按照比例分配空间
样式效果
源代码
body classcontainerul classnav nav-pills nav-fillli classnav-itema classnav-link active href#Active/a/lili classnav-itema classnav-link href#Link/a/lili classnav-itema classnav-link href#Link/a/lili classnav-itema classnav-link disabled href#Disabled/a/li/ul
/body4.7、带标题的导航
.navbar-brand为您的公司产品或项目名称。 .justify-content-end 设置导航在右侧
样式效果
源代码
body classcontainernav classnavbar navbar-expand-lg navbar-dark bg-darkdiv class“container”a classnavbar-brand href#BEN的博客/adivul classnavbar-nav li classnav-item a classnav-link href# 主页 /a/lili classnav-item a classnav-link href# 技术 /a/lili classnav-item a classnav-link href# 料理 /a/lili classnav-item a classnav-link href# 摄影 /a/lili classnav-item a classnav-link href# 随笔 /a/li/ul/div/div/nav
/body样式效果
源代码
body classcontainernav classnavbar navbar-expand-lg navbar-dark bg-darkdiv classcontainera classnavbar-brand href#BEN的博客/adiv classjustify-content-endul classnavbar-nav li classnav-item a classnav-link href# 主页 /a/lili classnav-item a classnav-link href# 技术 /a/lili classnav-item a classnav-link href# 料理 /a/lili classnav-item a classnav-link href# 摄影 /a/lili classnav-item a classnav-link href# 随笔 /a/li/ul/div/div/nav
/body4.8、定位导航栏
. fixed-top固定在顶部. fixed-bottom固定在底部
固定在顶部的样式效果
固定在顶部的源代码
body
nav classnavbar fixed-top navbar-expand-lg navbar-dark bg-darkdiv classcontainera classnavbar-brand href#BEN的博客/abutton classnavbar-toggler typebutton data-togglecollapse data-target#navListspan classnavbar-toggler-icon/span/buttondiv classjustify-content-end collapse navbar-collapse idnavList div classjustify-content-end collapse navbar-collapseul classnavbar-nav li classnav-item a classnav-link href# 主页 /a/lili classnav-item a classnav-link href# 技术 /a/lili classnav-item a classnav-link href# 料理 /a/lili classnav-item a classnav-link href# 摄影 /a/lili classnav-item a classnav-link href# 随笔 /a/li/ul/div/div/div
/nav
/body固定在底部的样式
固定在底部的源代码
body
nav classnavbar fixed-bottom navbar-expand-lg navbar-dark bg-darkdiv classcontainera classnavbar-brand href#BEN的博客/abutton classnavbar-toggler typebutton data-togglecollapse data-target#navListspan classnavbar-toggler-icon/span/buttondiv classjustify-content-end collapse navbar-collapse idnavList div classjustify-content-end collapse navbar-collapseul classnavbar-nav li classnav-item a classnav-link href# 主页 /a/lili classnav-item a classnav-link href# 技术 /a/lili classnav-item a classnav-link href# 料理 /a/lili classnav-item a classnav-link href# 摄影 /a/lili classnav-item a classnav-link href# 随笔 /a/li/ul/div/div/div
/nav
/body
