扬州住房城乡建设局网站主要怎么学的呢
一、按钮
1.1、普通按钮
Bootstrap包括多个预定义的按钮样式，每个样式都有自己的语义目的，另外还有一些额外的功能可以用于更多的控制。
样式效果：
源代码：
<body class="container"><button type="button" class="btn btn-primary">Primary</button><button type="button" class="btn btn-secondary">Secondary</button><button type="button" class="btn btn-success">Success</button><button type="button" class="btn btn-danger">Danger</button><button type="button" class="btn btn-warning">Warning</button><button type="button" class="btn btn-info">Info</button><button type="button" class="btn btn-light">Light</button><button type="button" class="btn btn-dark">Dark</button><button type="button" class="btn btn-link">Link</button>
</body>
1.2、轮廓按钮
.btn 在引用中，实现轮廓按钮可以用默认修饰符类替换.btn-outline-*任何按钮上的所有背景颜色和图像。
样式效果：
源代码：
<body class="container"><button type="button" class="btn btn-outline-primary">Primary</button><button type="button" class="btn btn-outline-secondary">Secondary</button> <button type="button" class="btn btn-outline-success">Success</button> <button type="button" class="btn btn-outline-danger">Danger</button><button type="button" class="btn btn-outline-warning">Warning</button><button type="button" class="btn btn-outline-info">Info</button><button type="button" class="btn btn-outline-light">Light</button><button type="button" class="btn btn-outline-dark">Dark</button>
</body>
1.3、按钮组
1.3.1、水平按钮组
使用按钮组合，可以把一系列按钮编组在一行里，将一系列的 .btn 包裹在.btn-group内。
样式效果：
源代码：
<body class="container"><div class="btn-group" role="group" aria-label="Basic example"><button type="button" class="btn btn-secondary">Left</button><button type="button" class="btn btn-secondary">Middle</button><button type="button" class="btn btn-secondary">Right</button></div>
</body>
1.3.2、垂直按钮组
添加.btn-group-vertical 将一组按钮垂直排列 。
样式效果：
源代码：
<body class="container"><div class="btn-group-vertical" role="group" aria-label="Basic example"><button type="button" class="btn btn-secondary">Top</button><button type="button" class="btn btn-secondary">Middle</button><button type="button" class="btn btn-secondary">Bottom</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 class="card"> <div class="card-body"> This is some text within a card body. </div>
</div>
card-title与card-link效果：
card-title与card-link源代码：
<body class="container"><div class="card" style="width: 18rem;"><div class="card-body"><h5 class="card-title">Card title</h5><h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6><p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p><a href="#" class="card-link">Card link</a><a href="#" class="card-link">Another link</a></div></div>
</body>
card-img-top效果：
源代码：
<body class="container"><div class="card" style="width: 18rem;"><img class="card-img-top" src="..." alt="Card image cap"><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">Some quick example text to build on the card title and make upthe bulk of the card's content.</p><a href="#" class="btn btn-primary">Go somewhere</a></div></div>
</body>
2.2、列表组卡片
样式效果：
源代码：
<body class="container"><div class="card" style="width: 18rem;"><ul class="list-group list-group-flush"><li class="list-group-item">Cras justo odio</li><li class="list-group-item">Dapibus ac facilisis in</li><li class="list-group-item">Vestibulum at eros</li></ul></div>
</body>
2.3、带页眉页脚的卡片
- .card-header：页眉
- .card-footer：页脚
样式效果：
源代码：
<body class="container"><div class="card"><div class="card-header"> Featured </div><div class="card-body"><h5 class="card-title">Special title treatment</h5><p class="card-text">With supporting text below as a natural lead-in to additional content.</p></div><div class="card-footer"><a href="#" class="btn btn-primary">Go somewhere</a></div></div>
</body>
三、表单组件
文本控件（如 <input>、<select>、 <textarea>）统一采用 .form-control 样式进行处理优化，包括常规外观、focus选（点）中状态、尺寸大小等。
3.1、复选框和单选按钮
- .form-check：格式化复选框和单选框按钮
- form-check-inline：强制水平布局
垂直布局样式效果：
垂直布局源代码：
<body class="container"><div class="form-check"><input class="form-check-input" type="checkbox" value="" id="defaultCheck1"><label class="form-check-label" for="defaultCheck1">Option one is this and that—be sure to include why it's great</label></div><div class="form-check"><input class="form-check-input" type="checkbox" value="" id="defaultCheck2"><label class="form-check-label" for="defaultCheck2">Option one is this and that—be sure to include why it's great</label></div>
</body>
水平布局样式：
水平布局源代码：
<body class="container"><div class="form-check form-check-inline"><input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1"><label class="form-check-label" for="inlineCheckbox1">拿铁</label></div><div class="form-check form-check-inline"><input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2"><label class="form-check-label" for="inlineCheckbox2">摩卡</label></div>
</body>
3.2、表单组
.form-group 群组可以向为表单赋予一些结构样式，其唯一目的是提供标签的控制配对以及margin-bottom 属性，可以在<fieldset>、 <div>或任何其它元素中使用它。
样式效果：
源代码：
<body class="container"><div class="form-group"><label for="formGroupExampleInput">Example label</label><input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input"></div><div class="form-group"><label for="formGroupExampleInput2">Another label</label><input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input"></div>
</body>
3.3、内联式表单
使用 .form-inline样式在单个水平行上显示一系列标签，表单控件和按钮。
效果：
源代码：
<form class="form-inline"> <label class="sr-only" for="inlineFormInputName2">Name</label><input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe"><label class="sr-only" for="inlineFormInputGroupUsername2">Username</label> ……
</form>
3.4、表单下方帮助提示文本
可以使用…form-text t创建表单中的块级帮助文本。
样式效果：
源代码：
<body class="container"><label for="inputPassword5">Password</label><input type="password" id="inputPassword5" class="form-control" aria-escribedby="passwordHelpBlock"><small id="passwordHelpBlock" class="form-text text-muted">Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.</small>
</body>
内联式效果：
源代码：
<body class="container">
<form class="form-inline"><div class="form-group"><label for="inputPassword6">Password</label><input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-describedby="passwordHelpInline"><small id="passwordHelpInline" class="text-muted"> Must be 8-20 characters long.</small></div>
</form>
</body>
四、列表与导航
4.1、状态指示列表组
添加 .active 到 .list-group-item 下的其中一行或多行，以指示当前有效的选择状态。
样式效果：
源代码：
<body class="container"><ul class="list-group"><li class="list-group-item active">Cras justo odio</li><li class="list-group-item">Dapibus ac facilisis in</li><li class="list-group-item">Morbi leo risus</li><li class="list-group-item">Porta ac consectetur ac</li><li class="list-group-item">Vestibulum at eros</li></ul>
</body>
4.2、无边框的列表
加入.list-group-flush选择器，可以实现移除部分边框以及圆角，从而产生边缘贴齐的列表组
样式效果：
源代码：
<body class="container"><ul class="list-group list-group-flush"><li class="list-group-item ">Cras justo odio</li><li class="list-group-item">Dapibus ac facilisis in</li><li class="list-group-item">Morbi leo risus</li><li class="list-group-item">Porta ac consectetur ac</li><li class="list-group-item">Vestibulum at eros</li></ul>
</body>
4.3、通用导航
Bootstrap中提供的导航可共享通用标记和样式，从基础.nav样式类到活动与禁用状态
- .justify-content-center：可以让导航水平居中显示
- .justify-content-end：右对齐
- .flex-column：导航垂直排列
水平排列样式效果：
水平排列源代码：
<body class="container"><ul class="nav justify-content-center"><li class="nav-item"><a class="nav-link active" href="#">Active</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li></ul>
</body>
垂直排列样式效果：
垂直排列源代码：
<body class="container"><ul class="nav flex-column"><li class="nav-item"><a class="nav-link active" href="#">Active</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li></ul>
</body>
4.4、选项卡样式导航
- nav-tabs：选项卡样式导航
样式效果：
源代码：
<body class="container"><ul class="nav nav-tabs"><li class="nav-item"><a class="nav-link active" href="#">Active</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li></ul>
</body>
4.5、胶囊样式导航
- nav-pills：胶囊样式导航
样式效果：
源代码：
<body class="container"><ul class="nav nav-pills"><li class="nav-item"><a class="nav-link active" href="#">Active</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li></ul>
</body>
4.6、等比导航
使用.nav-fill会将 .nav-item按照比例分配空间
样式效果：
源代码：
<body class="container"><ul class="nav nav-pills nav-fill"><li class="nav-item"><a class="nav-link active" href="#">Active</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li></ul>
</body>
4.7、带标题的导航
.navbar-brand：为您的公司，产品或项目名称。
.justify-content-end ：设置导航在右侧
样式效果：
源代码：
<body class="container"><nav class="navbar navbar-expand-lg navbar-dark bg-dark"><div class=“container”><a class="navbar-brand" href="#">BEN的博客</a><div><ul class="navbar-nav" ><li class="nav-item" ><a class="nav-link" href="#"> 主页 </a></li><li class="nav-item" ><a class="nav-link" href="#"> 技术 </a></li><li class="nav-item" ><a class="nav-link" href="#"> 料理 </a></li><li class="nav-item" ><a class="nav-link" href="#"> 摄影 </a></li><li class="nav-item" ><a class="nav-link" href="#"> 随笔 </a></li></ul></div></div></nav>
</body>
样式效果：
源代码：
<body class="container"><nav class="navbar navbar-expand-lg navbar-dark bg-dark"><div class="container"><a class="navbar-brand" href="#">BEN的博客</a><div class="justify-content-end"><ul class="navbar-nav" ><li class="nav-item" ><a class="nav-link" href="#"> 主页 </a></li><li class="nav-item" ><a class="nav-link" href="#"> 技术 </a></li><li class="nav-item" ><a class="nav-link" href="#"> 料理 </a></li><li class="nav-item" ><a class="nav-link" href="#"> 摄影 </a></li><li class="nav-item" ><a class="nav-link" href="#"> 随笔 </a></li></ul></div></div></nav>
</body>
4.8、定位导航栏
- . fixed-top：固定在顶部
- . fixed-bottom：固定在底部
固定在顶部的样式效果：
固定在顶部的源代码：
<body>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark"><div class="container"><a class="navbar-brand" href="#">BEN的博客</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navList"><span class="navbar-toggler-icon"></span></button><div class="justify-content-end collapse navbar-collapse" id="navList" ><div class="justify-content-end collapse navbar-collapse"><ul class="navbar-nav" ><li class="nav-item" ><a class="nav-link" href="#"> 主页 </a></li><li class="nav-item" ><a class="nav-link" href="#"> 技术 </a></li><li class="nav-item" ><a class="nav-link" href="#"> 料理 </a></li><li class="nav-item" ><a class="nav-link" href="#"> 摄影 </a></li><li class="nav-item" ><a class="nav-link" href="#"> 随笔 </a></li></ul></div></div></div>
</nav>
</body>
固定在底部的样式：
固定在底部的源代码：
<body>
<nav class="navbar fixed-bottom navbar-expand-lg navbar-dark bg-dark"><div class="container"><a class="navbar-brand" href="#">BEN的博客</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navList"><span class="navbar-toggler-icon"></span></button><div class="justify-content-end collapse navbar-collapse" id="navList" ><div class="justify-content-end collapse navbar-collapse"><ul class="navbar-nav" ><li class="nav-item" ><a class="nav-link" href="#"> 主页 </a></li><li class="nav-item" ><a class="nav-link" href="#"> 技术 </a></li><li class="nav-item" ><a class="nav-link" href="#"> 料理 </a></li><li class="nav-item" ><a class="nav-link" href="#"> 摄影 </a></li><li class="nav-item" ><a class="nav-link" href="#"> 随笔 </a></li></ul></div></div></div>
</nav>
</body>