Bootstrap4总结

最新推荐文章于 2023-07-10 17:18:02 发布

码农凯

最新推荐文章于 2023-07-10 17:18:02 发布

阅读量533

点赞数 1

分类专栏：前端文章标签： web bootstrap 前端

本文链接：https://blog.csdn.net/weixin_46692492/article/details/107389251

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

#Bootstrap4总结

Bootstrap 技术Background

网页前端的一种技术，是Twitter公司发明的样式库(css).
不同的设备访问网页，网页都能完整的显示在设备屏幕上（自动适应页面）。
开发人员借助文档会使用即可。
jquery 在Bootstrap之前，后面依赖前者的文件

什么是 CDN？

两种引入方式。

第一种是直接从本地文件引入；
第二种是网上引入。网上引入如果没有网络时，不显示效果。

什么是网格系统？

屏幕分为12列，自己根据需要组合
4-4-4 2-10 4-8
使用div做布局的
构成要素：contionter、row、col-？

开发时候常用的样式

1. table 表格

<table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
      <!--
      thead 表头
      -->
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
</table>

&NBSP; 表格形式

.table-striped类，可以看见条纹
加入table class=“table table-striped”
.table-bordered类可以位表格添加边框
加入table class=“table table-bordered”
.table-hover 类可以为表格的每一行添加鼠标悬停效果（灰色背景）
加入table class=“table table-hover”
.table-responsive类用于响应式表格
.table-responsive-sm <576px
.table-responsive-md <768px
.table-responsive-lg <992px
.table-responsive-xl <1200px
加入table-sm类来减少内边距来设置较小的表格
加入table class=“table table-bordered table-sm”

2.shape 形状修饰

	<img class="rounded-circle" src="../img/太工1.jpg" width="30%" height="30%" alt="Cinque Terre">
		<img src="../img/2.png" class="rounded-circle" alt="Cinque Ter

对图片施加效果
圆角图片
.rounded 可以让图片显示圆角
.rounded-circle 类可以设置椭圆形图片
.img-thumbnail 设置土拍你缩略图有边框
.float-right 设置图片右对齐，.float-left左对齐
.img-fluid类自动适应图片大小（该类当中设置了max-width：100%、height：auto）

3.Message prompt box

<div class="container">
  <h2>提示框动画</h2>
  <p>.fade 和 .show 类用于设置提示框在关闭时的淡出和淡入效果：</p>
  <div class="alert alert-success alert-dismissible fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>成功!</strong> 指定操作成功提示信息。 <a href="#" class="alert-link">这条信息</a>
  </div>
 
  <div class="alert alert-warning alert-dismissible fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>警告!</strong> 设置警告信息。
  </div>
  <div class="alert alert-danger alert-dismissible fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>错误!</strong> 失败的操作。
  </div>
  
</div>

给提示框中加入链接
a href="#" class=“alert-link”>这条信息/a
关闭提示框
div class=“alert alert-success alert-dismissible”
button type=“button” class=“close” data-dismiss=“alert”>×</button
&times；（x）是HTML实体字符，来表示关闭操作，而不是字母X。
淡入淡出效果
.fade 和 .show 类用于设置提示框在关闭时的淡出和淡入效果
div class=“alert alert-danger alert-dismissible fade show”

4. 按钮

<!--按钮在a，inout，button标签中可以添加修饰-->
<a href="#" class="btn btn-info" role="button">链接按钮</a>
<button type="button" class="btn btn-info">按钮</button>
<input type="button" class="btn btn-info" value="输入框按钮">
<input type="submit" class="btn btn-info" value="提交按钮">
<!--添加class="btn btn-outline-primary 使得按钮有颜色边框-->
<button type="button" class="btn btn-outline-primary">主要按钮</button>
<!-- btn-lg大按钮,btn-sm小按钮 -->
<button type="button" class="btn btn-primary btn-lg">大号按钮</button>
<button type="button" class="btn btn-primary">默认按钮</button>
<button type="button" class="btn btn-primary btn-sm">小号按钮</button>
<!--btn-block 块级按钮 占一整行-->
<button type="button" class="btn btn-primary btn-block">按钮 1</button>
<!-- 激活 active 禁止点击 按钮 disabled（标签中） 以及紧着点击链接（class类中）-->
button type="button" class="btn btn-primary active">点击后的按钮</button>
<button type="button" class="btn btn-primary" disabled>禁止点击的按钮</button>
<a href="#" class="btn btn-primary disabled">禁止点击的链接</a>

按钮在a，input，button标签中可以添加修饰
添加class="btn btn-outline-primary 使得按钮有颜色边框
btn-lg大按钮,btn-sm小按钮
btn-block 块级按钮占一整行
激活 active 禁止点击按钮 disabled（标签中）以及紧着点击链接（class类中）
按钮组在类中加入 btn-group
按钮组设置大小 brn-group-lg/sm
垂直按钮组 btn-group-vertical

5. 钮组及下拉菜单

<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
       Sony
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Tablet</a>
      <a class="dropdown-item" href="#">Smartphone</a>
    </div>
  </div>
</div>

按钮组中包含三个按钮，第三个按钮是一个块级元素加入 class=“btn dropdown-toggle” data-toggle="dropdown"则成为下拉模式
在添加下拉菜单 dropdown-menu 与dropdown-item配合形成下拉菜单

6. 进度条progress

<div class="container">
	<h2>条纹的进度条</h2>
	<p>可以使用 .progress-bar-striped 类来设置条纹进度条：</p>
	<!--
    	注意顔色的使用 bg-徽章
    -->
    <h2>注意颜色的使用</h2>
	<div class="progress">
		<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:30%"></div>
	</div>
	<br>
	<div class="progress">
		<div class="progress-bar bg-success progress-bar-striped progress-bar-animated" style="width:40%"></div>
	</div>
	<br>
	<div class="progress">
		<div class="progress-bar bg-info progress-bar-striped progress-bar-animated" style="width:50%"></div>
	</div>
	<br>
	<div class="progress">
		<div class="progress-bar bg-warning progress-bar-striped progress-bar-animated" style="width:60%"></div>
	</div>
	<br>
	<div class="progress">
		<div class="progress-bar bg-danger progress-bar-striped progress-bar-animated" style="width:70%"></div>
	</div>
</div>

进度条
条纹进度条 .progress-bar-striped类设置条纹进度条
动画效果 .reogress-bar-animated动画效果
进度条的进度通过style="width:**%"控制进度条的长度

7. 分页（paginate）

<h1>.pagination-lg 类设置大字体的分页条目</h1>
		<ul class="pagination pagination-lg">
			<li class="page-item">
				<a class="page-link disabled badge-danger" href="#">分页链接不可点击</a>
			</li>
			<li class="page-item active ">
				<a class="page-link" href="#" >1 激活状态  当前页面</a>
			</li>
			<!--
            	<li class="badge-pill" >为间隔</li>
            	<a class="page-link badge-pill" href="#">胶囊</a>
            -->
			<li class="page-item ">
				<a class="page-link badge-pill" href="#">胶囊</a>
			</li>
			<li class="page-item">
				<a class="page-link  badge-dark" href="#">3</a>
			</li>
			<li class="page-item">
				<a class="page-link" href="#">Next</a>
			</li>
		</ul>
          .pagination-sm 类设置小字体的分页条目:
		<ul class="pagination  pagination-sm">
			<li class="page-item">
				<a class="page-link" href="#">Previous</a>
			</li>
			<li class="page-item">
				<a class="page-link" href="#">1</a>
			</li>
			<li class="page-item">
				<a class="page-link" href="#">2</a>
			</li>
			<li class="page-item">
				<a class="page-link" href="#">3</a>
			</li>
			<li class="page-item">
				<a class="page-link" href="#">Next</a>
			</li>
		</ul>
		<h3>面包屑导航</h3>
		<h5> .breadcrumb 与.breadcrumb-item 用来设置面包屑导航</h5>
		<ul class="breadcrumb">
	        <li class="breadcrumb-item">
		        <a href="#">Photos</a>
	        </li>
	        <li class="breadcrumb-item ">
		        <a href="#" >普通</a>
	        </li>
	        <li class="breadcrumb-item active">
		        <a href="#">高亮显示</a>
	        </li>
	    <li class="breadcrumb-item  ">Rome</li>
</ul>

要创建一个基本的分页可以在

元素上添加 .pagination 类。然后在
元素上添加 .page-item 类
“
”标签中使用：当前页码激活/高亮 .active 当前页码不可点击. disalbled
“
- ”标签中使用：.pagination-lg/sm 来设置字体的大小
  “ ”标签中使用： .badge-pill 来变成胶囊形状
  面包屑导航 “
  - ”.breadcrumb 和 “
  - ”.breadcrumb-item 类用于设置面包屑导航

8.列表组 list-group

<ul class="list-group">
	<li class="list-group-item list-group-item-success">成功列表项</li>
	<li class="list-group-item list-group-item-secondary">次要列表项</li>
	<li class="list-group-item list-group-item-info">信息列表项</li>
	<li class="list-group-item list-group-item-warning">警告列表项</li>
	<li class="list-group-item list-group-item-danger">危险列表项</li>
	<li class="list-group-item list-group-item-primary">主要列表项</li>
	<li class="list-group-item list-group-item-dark">深灰色列表项</li>
	<li class="list-group-item list-group-item-light">浅色列表项</li>
        </ul>
        <h3>div 与a 标签配合 = ul与li 标签配合</h3>
       <div class="list-group">
	<a href="#" class="list-group-item list-group-item-action">激活列表项</a>
	<a href="#" class="list-group-item list-group-item-success">成功列表项</a>
	<a href="#" class="list-group-item list-group-item-secondary">次要列表项</a>
	<a href="#" class="list-group-item list-group-item-info">信息列表项</a>
	<a href="#" class="list-group-item list-group-item-warning">警告列表项</a>
	<a href="#" class="list-group-item list-group-item-danger">危险列表项</a>
	<a href="#" class="list-group-item list-group-item-primary">主要列表项</a>
	<a href="#" class="list-group-item list-group-item-dark">深灰色列表项</a>
	<a href="#" class="list-group-item list-group-item-light">浅色列表项</a>
       </div>

div 与a 标签配合 = ul与li 标签配合

9.卡片 card

<h1 >基本的卡片样式</h1>
		<div class="container">
	<h2>标题、文本和链接</h2>
	<div class="card">
		<div class="card-body">
			<h4 class="card-title">Card title</h4>
			<p class="card-text">Some example text. Some example text.</p>
			<a href="#" class="card-link">Card link</a>
			<a href="#" class="card-link">Another link</a>
		</div>
	</div>
</div>		
<br />
<div class="container">
	<h2>图片卡片</h2>
	<p>图片在头部 (card-img-top):</p>
	<p>图片在底部(card-img-bottom):</p>
	<h2>文字覆盖图片</h2>
	<p>如果图片要设置为背景，可以使用 .card-img-overlay 类:</p>
	<div class="card" style="width:400px">
		<img class="card-img-top" src="https://static.runoob.com/images/mix/img_avatar.png" alt="Card image" style="width:100%">
		<div class="card-body">
			<h4 class="card-title">John Doe</h4>
			<p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>
			<a href="#" class="btn btn-primary">See Profile</a>
		</div>
	</div>
	<br>
    <div class="container">
	<div class="card img-fluid" style="width:500px">
		<img class="card-img-top" src="https://static.runoob.com/images/mix/img_avatar.png" alt="Card image" style="width:100%">
		<div class="card-img-overlay">
			<h4 class="card-title">John Doe</h4>
			<p class="card-text">Some example text some example text. Some example text some example text. Some example text some example text. Some example text some example text.</p>
			<div id="button_bootom"><a href="#" class="btn btn-primary " ">See Profile</a></div>
		</div>
	</div>
</div>

卡片用于个人介绍
通过 Bootstrap4 的 .card 与 .card-body 类来创建一个简单的卡片
头部元素上使用 .card-title 类来设置卡片的标题。
.card-text 类用于设置卡片正文的内容。
.card-link 类用于给链接设置颜色。
图片要设置为背景，可以使用 .card-img-overlay 类
“” 添加 .card-img-top（图片在文字上方）或 .card-img-bottom（图片在文字下方来设置图片卡片）

10. 菜单 menu

<h2>下拉菜单</h2>
        <p>如果我们想让下拉菜单右对齐，可以在元素上的 .dropdown-menu 类后添加 .dropdown-menu-right 类。</p>
        <p>.dropdown-divider 类用于在下拉菜单中创建一个水平的分割线：</p>
		<div class="container">
	<div class="dropdown">
		<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			Dropdown link
		</a>

		<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
			<a class="dropdown-item" href="#">Action</a>
			<a class="dropdown-item" href="#">Another action</a>
			<a class="dropdown-item" href="#">Something else here</a>
			<div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Another link</a>
		</div>
	</div>
	    
</div>
    <br />
       <h2>下拉弹出方向设置：用于导航栏</h2>
       <p> .dropright 类用于设置下拉菜单向右弹出：</p>
       <br />
	</body>
	<div class="container">
  <!-- Default dropright button -->
	<div class="btn-group dropright">
	  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		Bootstrap
	  </button>
	  <div class="dropdown-menu">
		<!-- Dropdown menu links -->
		<a class="dropdown-item" href="badge_color.html">颜色</a>
        <a class="dropdown-item" href="gird2.html">网格系统</a>
        <a class="dropdown-item" href="paginate.html">分页</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="progress.html">进度条</a>
        </div>
	</div>

	<!-- Split dropright button -->
	<div class="btn-group dropright">
	  <button type="button" class="btn btn-secondary">
		Bootstrap2
	  </button>
	  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		<span class="sr-only">Toggle Dropright</span>
	  </button>
	  <div class="dropdown-menu">
		<!-- Dropdown menu links -->
		 <a class="dropdown-item" href="button.html">按钮</a>
         <a class="dropdown-item" href="button_group.html">按钮组</a>
         <a class="dropdown-item" href="shape.html">形状</a>
         <div class="dropdown-divider"></div>
         <a class="dropdown-item" href="#">Separated link</a>
	  </div>
	</div>
</div>

.dropdown 类用来指定一个下拉菜单
可以使用一个按钮或链接来打开下拉菜单，按钮或链接需要添加 .dropdown-toggle 和 data-toggle=“dropdown” 属性。
“

” 元素上添加 .dropdown-menu 类来设置实际下拉菜单，然后在下拉菜单的选项中添加 .dropdown-item 类。
我们也可以在标签中使用。
.dropdown-divider 类用于在下拉菜单中创建一个水平的分割线。
下拉菜单向右弹出，可以在 div 元素上添加 “.dropright” 类。

1. 折叠 callapse

<button href="#interview" class="btn btn-primary" data-toggle="collapse">显示详细面试</button>
		<div id="interview" class="collapse show">
			杨凯：太原工业学院，优秀毕业生： Java工程师
		</div>
		<div id="accordion">
<div class="card">
	<div class="card-header">
		<a class="card-link" data-toggle="collapse" href="#collapseOne">
			选项一
		</a>
	</div>
	<div id="collapseOne" class="collapse show" data-parent="#accordion">
		<div class="card-body">
			#1 内容：菜鸟教程 -- 学的不仅是技术，更是梦想！！！
		</div>
	</div>
</div>
<div class="card">
	<div class="card-header">
		<a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
			选项二
		</a>
	</div>
	<div id="collapseTwo" class="collapse" data-parent="#accordion">
		<div class="card-body">
			#2 内容：菜鸟教程 -- 学的不仅是技术，更是梦想！！！
		</div>
	</div>
</div>
<div class="card">
	<div class="card-header">
		<a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
			选项三
		</a>
	</div>
	<div id="collapseThree" class="collapse" data-parent="#accordion">
		<div class="card-body">
			#3 内容：菜鸟教程 -- 学的不仅是技术，更是梦想！！！
		</div>
	</div>

卡片与折叠的使用
.show 显示出来
.collapse 类用于指定一个折叠元素 (实例中的

); 点击按钮后会在隐藏与显示之间切换。
控制内容的隐藏与显示，需要在或元素上添加 data-toggle=“collapse” 属性。 data-target="#id" 属性是对应折叠的内容 (

)。
注意: 元素上你可以使用 href 属性来代替 data-target 属性。
使用 data-parent 属性来确保所有的折叠元素在指定的父元素下，这样就能实现在一个折叠选项显示时其他选项就隐藏。
选项一的 href 与内容的 id 相同达到效应状态，默认状态.collapse隐藏。

12. 导航

<a>创建一个简单的水平导航栏，可以在 <ul> 元素上添加 .nav类，在每个 <li> 选项上添加 .nav-item 类，在每个链接上添加 .nav-link 类</a>
		<!-- 导航居中 
         <ul class="nav justify-content-center">
        -->
        <!-- 导航右对齐
        <ul class="nav justify-content-end">
        -->
        <!-- 导航垂直
        <ul class="nav flex-column">
        -->
        -->
    <h4>居中对齐</h4>
    <ul class="nav justify-content-center">
	<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>	
<br />
 <h4>垂直导航</h4>
    <ul class="nav flex-column">
	<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>
<br />
        <div class="container">
	    <h2>选项卡</h2>
	       <p>选项卡导航（nav-tabs）:</p>
	    <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 disabled" href="#">Disabled</a>
		</li>
	    </ul>
        </div>
<br />
        <div class="container">
	    <h2>选项卡 胶囊类型</h2>
	       <p>选项卡导航（nav-tabs）:</p>
	    <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 disabled" href="#">Disabled</a>
		</li>
	    </ul>
        </div>
        <br />
        <h3>胶囊下拉菜单</h3>
        <!--
        	<ul class="nav nav-pills">胶囊导航
        	    <li class="nav-item">
                    <a class="nav-link active" href="#">Active</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="#">Link 1</a>
                            <a class="dropdown-item" href="#">Link 2</a>
                            <a class="dropdown-item" href="#">Link 3</a>
                        </div>
                </li>
        	</ul>
        	nav导航 与 dropdown-menu下拉菜单 配合使用
        -->
       <ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
    </div>
  </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> 
<br />
    <h1>胶囊动态选项卡</h1>
    <div class="container">
  <h2>选项卡切换</h2>
  <br>
  <!-- Nav tabs 导航栏 -->
  <ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content " >
    <div id="home" class="container tab-pane active"><br>
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet</p>
    </div>
    <div id="menu1" class="container tab-pane fade"><br>
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam</p>
    </div>
    <div id="menu2" class="container tab-pane fade"><br>
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis
  </div>
</div>

创建一个简单的水平导航栏，可以在

元素上添加 .nav类，在每个
选项上添加 .nav-item 类，在每个链接上添加 .nav-link 类
导航居中
“
- ”
  导航右对齐
  “
  - ”
    导航垂直
    “
    - ”
      一个简单的胶囊导航
      “
      - Active

” 在导航中添加下拉菜单 “ ” 选项卡的href 与盒子中的 id 相同时，会呈现出同一个页面不同的切换效果 ### 13.导航栏 ``` 导航栏导航栏一般放在页面的顶部。可以使用 .navbar 类来创建一个标准的导航栏，后面紧跟: .navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。导航栏上的选项可以使用 ul 元素并添加 class="navbar-nav" 类，然后在 li 元素上添加 .nav-item 类， a 元素上使用 .nav-link 类:

品牌 / Logo

使用图片，可以使用 .navbar-brand 类来设置图片自适应导航栏。

导航栏的表单

导航栏的表单 form 元素使用 class="form-inline" 类来排版输入框与按钮：

导航栏使用下拉菜单

导航栏上可以设置下拉菜单。

Link 1
Link 2

<!-- Dropdown -->
<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
    Dropdown link
  </a>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Link 1</a>
    <a class="dropdown-item" href="#">Link 2</a>
    <a class="dropdown-item" href="#">Link 3</a>
  </div>
</li>

Bootstrap4 面包屑导航（Breadcrumb）

ol li与 nav a 效果相同
``` 导航栏一般放在页面的顶部。可以使用 .navbar 类来创建一个标准的导航栏，后面紧跟: .navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。导航栏上的选项可以使用 ul 元素并添加 class="navbar-nav" 类，然后在 li 元素上添加 .nav-item 类， a 元素上使用 .nav-link 类:

1. <form>标签下配合<div>盒子制作表单 
2. <div>中添加修饰类
3. form-group为整行输入框
4. form-check 复选框

### 15. 模态框 modal

弹出模态框标记的属性时HTML提供的不标记的时其他框架导入的模态框

		<!-- 模态框头部 -->
		<div class="modal-header">
			<h4 class="modal-title">模态框头部</h4>
			<button type="button" class="close" data-dismiss="modal">&times;</button>
		</div>

		<!-- 模态框主体 -->
		<div class="modal-body">
			模态框内容..
		</div>
	</div>
</div>

打开模态框

		<!-- 模态框头部 -->
		<div class="modal-header">
			<h4 class="modal-title">模态框头部</h4>
			<button type="button" class="close" data-dismiss="modal">&times;</button>
		</div>

		<!-- 模态框主体 -->
		<div class="modal-body">
			模态框内容..
		</div>

		<!-- 模态框底部 -->
		<div class="modal-footer">
			<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
		</div>

	</div>
</div>

</body>

``` * 注意我们一般不自己定义模态框，为了保持样式统一 ### 16. 表单的控件 - 单选以及复选 ``` 表单的控件 - 单选以及复选

	<script type="text/javascript" src="../js/jquery.min.js" ></script>
	<script type="text/javascript" src="../js/bootstrap.min.js" ></script>
	<link rel="stylesheet" href="../css/bootstrap.min.css" />
</head>
<body>
	<!--
    	div 形式 不能 用radio-inline 来横向显示单选
    -->
	<div class="radio">
		<input type="radio" name="gender" />男
		
	</div>
	<div class="radio">
		<input type="radio" name="gender" />女
		
	</div>
	<input  type="radio" />测试
	<br />
	<!--
        radio-inline 为单选横向放置
    -->
	<label class="radio-inline"><input type="radio" name="optradio">Option 1</label>
    <label class="radio-inline"><input type="radio" name="optradio">Option 2</label             >
    <label class="radio-inline"><input type="radio" name="optradio" disabled>Option 3</label>
    <hr />
    
    <div class="form-group">
    	籍贯<select class="form-control">
    		<option >山西</option>
    		<option selected>河北</option>
    	</select>
    </div>

</body>

1.表单中 添加单选radio 添加类型 radio-inline则变为横向
2.单选的两个选项名字一定要相同，否则不是单选
---

码农凯

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap4总结

#Bootstrap4总结Bootstrap 技术Background网页前端的一种技术，是Twitter公司发明的样式库(css).不同的设备访问网页，网页都能完整的显示在设备屏幕上（自动适应页面）。开发人员借助文档会使用即可。jquery 在Bootstrap之前，后面依赖前者的文件什么是 CDN？两种引入方式。第一种是直接从本地文件引入；第二种是网上引入。网上引入如果没有网络时，不显示效果。什么是网格系统？屏幕分为12列，自己根据需要组合    4
复制链接

扫一扫