bootstrap4_bootstrap4 树 - CSDN
  • 前端组件Bootstrap4(学习笔记一)

    万次阅读 2017-11-28 14:17:41
    Hello, 大家好,今天要分享的文章仍然是关于前端的,为什么迟迟没有关于Android相关的文章呢,其实这个公众号一开始,我就有明确的表示,它不仅仅局限于Android,我希望它可以博采众长,以Android为主,其它技术为辅...

    Hello, 大家好,今天要分享的文章仍然是关于前端的,为什么迟迟没有关于Android相关的文章呢,其实这个公众号一开始,我就有明确的表示,它不仅仅局限于Android,我希望它可以博采众长,以Android为主,其它技术为辅,夹杂一些社会百态,人生杂谈,虽然看起来没有主题,但我觉得,这便是主题,起码说不单一,不乏味,你说呢?


    当然,很长时间不发Android相关的文章最大的原因是:




    哈哈~,这是逗大家的,一个Gooogle为后台的语言,我相信它的未来肯定是前途无限,好了,来看今天的主题吧——Bootstrap4。


    Bootstrap4 目前是 Bootstrap 的最新版本,是一套用于 HTML、CSS 和 JS 开发的开源工具集,对于它而言,是用于开发响应式布局、移动设备优先的 WEB 项目。


    具体的安装使用,我还是建议大家,使用cdn,还是那句话,不为别的,就是为了简单,使用cdn,具体地址如下:


    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

    <!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
    <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>

    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>


    如果你想下载,具体下载地址可以去官网下载:https://getbootstrap.com/


    好了,下载好之后,或者使用了cdn,那么我们就可以实现我们要实现的功能了,Bootstrap4具体实现,是要把所有的标签语言放到一个容器里,就和Vue.js一样,被一个盒子封住,Bootstrap4提供了两个class,一个是全屏,一个是非全屏:


    • 1、.container 类用于固定宽度并支持响应式布局的容器。


    • 2、.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。


    有了容器,那么我们就可以在容器里写标签了,这一篇文章就先从最简单的文字排版走起。


    大标题


    未接触Bootstrap4之前,我们所写的标题都是采用h系列,即h1到h6,可是这些标题有时候我们还感觉小怎么办,当然了我们可以使用font-zize,去改变字的大小,但是,有了Bootstrap4,我们只需要设置对应的class就ok了。


    <div class="container">
       <h1 class="display-1">我是最大的字体</h1>
       <h1 class="display-1">我是第二大的字体</h1>
       <h1 class="display-3">我是第三大的字体</h1>
       <h1 class="display-4">我是第四大的字体</h1>
    </div>



    这里需要解释一下,可能刚了解的人有些许疑问,为什么display只有1-4,如果大于或者小于,会怎么样,这个问题大家可以看下源码,Bootstrap4只有这四个尺码,大于或者小于只会显示标签的默认字号,比如,你用的是h1,那么就会显示h1的尺码,对于这个class,你可以用很多标签来使用它,并不仅仅局限于h1,h系列,p,span……等都可以的。


    <div class="container">
       <p class="display-1">我是最大的字体</p>
       <span class="display-1">我是第二大的字体</span>
       <div class="display-3">我是第三大的字体</div>
       <strong class="display-4">我是第四大的字体</strong>
       <!-- ………………等 -->
    </div>


    code代码


    有时候,我们会去刻意的显示,一个代码或者标签,这里我们就可以使用code标签:


    <div class="container">
     <code>p</code>标签代表的是一个段落<br/>
     <code>div</code>是一个容器<br/>
     <code>blockquote</code>是一个块级元素
    </div>




    文本样式(加粗,倾斜,对齐样式)


    关于加粗,倾斜,等文本样式,这里我列个表,方便大家查阅:


    类名 描述
    .font-weight-bold 加粗文本
    .font-weight-normal 普通文本
    .font-weight-light 更细的文本
    .font-italic 斜体文本
    .lead 让段落更突出
    .small 指定更小文本 (为父元素的 85% )
    .text-left 左对齐
    .text-center 居中
    .text-right 右对齐
    .text-justify 设定文本对齐,段落中超出屏幕部分文字自动换行
    .text-nowrap 段落中超出屏幕部分不换行
    .text-lowercase 设定文本小写
    .text-uppercase 设定文本大写
    .text-capitalize 设定单词首字母大写
    .initialism 显示在 <abbr> 元素中的文本以小号字体展示,且可以将小写字母转换为大写字母
    .list-unstyled 移除默认的列表样式,列表项中左对齐 ( <ul> 和 <ol> 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项,你需要在嵌套的列表中使用该样式)
    .list-inline 将所有列表项放置同一行
    .pre-scrollable 使 <pre> 元素可滚动,代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条


    <div class="container">
    <p class="font-weight-bold">
        我是粗体字
    </p>
    <p class="font-weight-normal">
           我是普通文本
    </p>
    <p class="font-weight-light">
           我是更细的文本
    </p>
    <p class="font-italic">
           我是斜体
    </p>
    <p class="text-left">
           我是居左的字体
    </p>
    <p class="text-center">
           我是居中的字体
    </p>
    <p class="text-right">
           我是居右的字体
    </p>
    </div>



    其它拓展(pre,kbd,abbr,mark ……)


    显示键盘快捷键,或者键盘,那么就可以使用kbd:


    <div class="container">
       <kbd>command+d</kbd><br/>
       <kbd>control+s</kbd><br/>
       <kbd>control+alt+shift</kbd><br/>
    </div>




    我想着pre在这里就不要多言了吧,毕竟它和html中的pre是一样的,作用就是显示原有的样式,下面我们看下,abbr和mark:


    <div class="container">
      <abbr title="让你看,你还真看啊">你把鼠标放到我身上就可以看到你想看到的</abbr><br/>
       <mark>我是自带光环的字体</mark>
    </div>



    总结:


    这一篇文章,是一个入门篇,主要是Bootstrap4的一些文本信息的用法,下一篇,我们就要进入,Bootstrap4用的最多的几个关键词,只要掌握了一种,那么其他的就会迎刃而解。

    展开全文
  • Bootstrap4基础入门到精通

    千人学习 2018-10-22 21:38:17
    Bootstrap的基础知识,如何安装,如何变通简易的调用讲起,逐步讲解Bootstrap中的CSS相关布局、布局组件如何调用;讲解Bootstrap相关的插件;同步实战代码和演练解说。
  • bootstrap4中文版入门教程

    千次阅读 2019-04-12 20:34:40
    bootstrap4中文版入门教程 欢迎访问,之前在网上没找到中文版的教程,这个整理的不错,很适合新手入门。 https://www.fengjunzi.com/tool/bootstrap4/

    bootstrap4中文版入门教程

    欢迎访问,之前在网上没找到中文版的教程,这个整理的不错,很适合新手入门。
    https://www.fengjunzi.com/tool/bootstrap4/

    展开全文
  • Bootstrap4总结

    2020-07-16 18:02:46
    #Bootstrap4总结 Bootstrap 技术Background 网页前端的一种技术,是Twitter公司发明的样式库(css). 不同的设备访问网页,网页都能完整的显示在设备屏幕上(自动适应页面)。 开发人员借助文档会使用即可。 jquery ...

    #Bootstrap4总结

    Bootstrap 技术Background

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

    什么是 CDN?

    两种引入方式。

    1. 第一种是直接从本地文件引入;
    2. 第二种是网上引入。网上引入如果没有网络时,不显示效果。

    什么是网格系统?

    1. 屏幕分为12列,自己根据需要组合
          4-4-4    2-10 4-8    
    2. 使用div做布局的
    3. 构成要素: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

    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 类用于指定一个折叠元素 (实例中的

    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 类
      导航居中

    ” 在导航中添加 下拉菜单 “ ” 选项卡的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" 类来排版输入框与按钮:


    导航栏使用下拉菜单

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

    Search

    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提供的 不标记的时其他框架导入的 模态框
    打开模态框
    </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.单选的两个选项名字一定要相同,否则不是单选
    ---
    
    展开全文
  • 配置Bootstrap 4 Bootstrap是用于网站开发的开源前端框架(“前端”指的是展现给最终用户的界面),它提供字体排印、窗体、按钮、导航及其他各种组件,旨在使动态网页和Web应用的开发更加容易。 Bootstrap有几个版本...

    前言

    注意:学本章之前请检查 Django 版本,确保安装的是 Django 2 而不是 Django 3,否则后面所有的章节都会遇到 staticfiles 无法载入的错误。

    在虚拟环境中输入 pip list 即可查看。

    配置Bootstrap 4

    Bootstrap是用于网站开发的开源前端框架(“前端”指的是展现给最终用户的界面),它提供字体排印、窗体、按钮、导航及其他各种组件,旨在使动态网页和Web应用的开发更加容易。

    Bootstrap有几个版本都比较流行,我们选择最新版本的Bootstrap 4下载地址,并解压。

    然后在项目根目录下新建目录static/bootstrap/,用于存放Bootstrap静态文件。静态文件通常指那些不会改变的文件。Bootstrap中的css、js文件,就是静态文件。

    把刚才解压出来的css和js两个文件夹复制进去。

    因为bootstrap.js依赖 jquery.jspopper.js 才能正常运行,因此这两个文件我们也需要一并下载保存。附上官网下载链接(进入下载页面,复制粘贴代码到新文件即可):

    不清楚popper.js如何下载的戳这个链接:

    https://unpkg.com/popper.js@1.14.4/dist/umd/popper.js

    进去后页面显示很长一段代码,把这段代码全部拷贝;在项目中新建名叫popper.js的文件,把刚拷贝的代码复制进去就可以了。很多开源js文件都是通过这样的方式下载。

    现在我们的static/目录结构像这样:

    my_blog
    │
    ├─article
    └─my_blog
    │ ...
    └─static
        └─bootstrap
        │   ├─css # 文件夹
        │   └─js # 文件夹
        └─jquery
        │   └─jquery-3.3.1.js # 文件
        └─popper
            └─popper-1.14.4.js # 文件
    

    因为在Django中需要指定静态文件的存放位置,才能够在模板中正确引用它们。因此在settings.py的末尾加上:

    my_blog/settings.py
    
    ...
    
    STATICFILES_DIRS = (
        os.path.join(BASE_DIR, "static"),
    )
    

    再确认一下settings.py中有没有STATIC_URL = '/static/'字段,如果没有把它也加在后面。

    编写模板

    在根目录下的templates/中,新建三个文件:

    • base.html是整个项目的模板基础,所有的网页都从它继承;
    • header.html是网页顶部的导航栏;
    • footer.html是网页底部的注脚。

    这三个文件在每个页面中通常都是不变的,独立出来可以避免重复写同样的代码,提高维护性。

    现在templates\的结构像下面这个样子:

    templates
    │
    ├─base.html
    ├─header.html
    ├─footer.html
    └─article
        └─list.html # 上一章创建的
    

    加上之前的list.html,接下来就要重新写这4个文件了。

    因为前端知识非常博大精深,并且也不是Django学习的重点,本教程不会展开篇幅去讲。如果之前没接触过前端知识也没关系,这里可以先复制粘贴,不影响后面Django的学习。

    你可以试着改写其中的某段代码,看看会对页面产生什么样的影响;遇到不懂的就在Bootstrap官方文档找答案。慢慢就会明白它的运行机制,毕竟Bootstrap真的是非常简单易用的工具。

    Bootstrap是非常优秀的前端框架,上手简单,所以很流行。

    官网是最权威的文档。你可以在官方网站上进行系统的学习:https://getbootstrap.com/docs/4.1/getting-started/introduction/

    通篇去看Bootstrap文档会非常枯燥的,因此建议你可以像查字典一样的,需要用哪个模块,就到官网上找相关的代码,修改一下拷贝到你的项目中就可以了。用多了自然会明白每个字段的作用。

    这里会一次性写大量代码,不要着急慢慢看,理解了就很简单了。

    首先写base.html

    templates/base.html
    
    <!-- 载入静态文件 -->
    {% load staticfiles %}
    
    <!DOCTYPE html>
    <!-- 网站主语言 -->
    <html lang="zh-cn">
    
    <head>
        <!-- 网站采用的字符编码 -->
        <meta charset="utf-8">
        <!-- 预留网站标题的位置 -->
        <title>{% block title %}{% endblock %}</title>
        <!-- 引入bootstrap的css文件 -->
        <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
    </head>
    
    <body>
        <!-- 引入导航栏 -->
        {% include 'header.html' %}
        <!-- 预留具体页面的位置 -->
        {% block content %}{% endblock content %}
        <!-- 引入注脚 -->
        {% include 'footer.html' %}
        <!-- bootstrap.js 依赖 jquery.js 和popper.js,因此在这里引入 -->
        <script src="{% static 'jquery/jquery-3.3.1.js' %}"></script>
        <script src="{% static 'popper/popper-1.14.4.js' %}"></script>    
        <!-- 引入bootstrap的js文件 -->
        <script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
    </body>
    
    </html>
    
    • 模板中要加上 {% load staticfiles %} 之后,才可使用 {% static 'path' %} 引用静态文件。
    • HTML语法中,所有的内容都被标签包裹;标签及标签中的属性可以对内容进行排印、解释说明等作用。
    • 标签内包含网页的元数据,是不会在页面内显示出来的。``标签内才是网页会显示的内容。
    • 留意Bootstrapcss**js**文件分别是如何引入的
    • jquery.jspopper.js 要在 bootstrap.js 前引入。

    然后是header.html

    templates/header.html
    
    <!-- 定义导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <div class="container">
    
        <!-- 导航栏商标 -->
        <a class="navbar-brand" href="#">我的博客</a>
    
        <!-- 导航入口 -->
        <div>
          <ul class="navbar-nav">
            <!-- 条目 -->
            <li class="nav-item">
              <a class="nav-link" href="#">文章</a>
            </li>
          </ul>
        </div>
    
      </div>
    </nav>
    

    标签内的class属性是Bootstrap样式的定义方法。试着改写或删除其中一些内容,观察页面的变化。

    然后改写之前的list.html

    templates/article/list.html
    
    <!-- extends表明此页面继承自 base.html 文件 -->
    {% extends "base.html" %}
    {% load staticfiles %}
    
    <!-- 写入 base.html 中定义的 title -->
    {% block title %}
        首页
    {% endblock title %}
    
    <!-- 写入 base.html 中定义的 content -->
    {% block content %}
    
    <!-- 定义放置文章标题的div容器 -->
    <div class="container">
        <div class="row mt-2">
    
            {% for article in articles %}
            <!-- 文章内容 -->
            <div class="col-4 mb-4">
            <!-- 卡片容器 -->
                <div class="card h-100">
                    <!-- 标题 -->
                    <h4 class="card-header">{{ article.title }}</h4>
                    <!-- 摘要 -->
                    <div class="card-body">
                        <p class="card-text">{{ article.body|slice:'100' }}...</p>
                    </div>
                    <!-- 注脚 -->
                    <div class="card-footer">
                        <a href="#" class="btn btn-primary">阅读本文</a>
                    </div>
                </div>
            </div>
            {% endfor %}
    
        </div>
    </div>
    {% endblock content %}
    
    • 留意{% block title %}{% block content %}是如何与base.html中相对应起来的。
    • 摘要中的{{ article.body|slice:'100' }}取出了文章的正文;其中的|slice:'100'Django的过滤器语法,表示取出正文的前100个字符,避免摘要太长。

    最后写入footer.html

    {% load staticfiles %}
    <!-- Footer -->
    <div>
        <br><br><br>
    </div>
    <footer class="py-3 bg-dark fixed-bottom">
        <div class="container">
            <p class="m-0 text-center text-white">Copyright &copy; www.dusaiphoto.com 2018</p>
        </div>
    </footer>
    

    呼,真是一大堆的东西啊。

    让我们来捋一捋发生了什么:
    当我们通过url访问list.html时,顶部的{% extends "base.html" %}告诉Django:“这个文件是继承base.html的,你去调用它吧。”

    于是Django就老老实实去渲染base.html文件:

    • 其中的{% include 'header.html' %}表明这里需要加入header.html的内容
    • {% include 'footer.html' %}加入footer.html的内容
    • {% block content %}{% endblock content %}表明这里应该加入list.html中的对应块的内容

    运行服务器

    老规矩,保存全部文件,进入虚拟环境,运行开发服务器,在浏览器中输入http://127.0.0.1:8000/article/article-list/,看到如下页面:
    在这里插入图片描述
    一个漂亮的博客界面就这样出现在眼前,非常神奇。

    **如果报错也不要着急,程序员就是不断与bug斗争的一个职业。**仔细检查Django给出的错误提示,修复它,你一定行。

    总结

    本章我们引入了前端框架Bootstrap 4,借助它重新组织了模板的结构,编写了一个漂亮的博客网站的首页。

    下一章我们将学习编写文章详情页面。

    创作不易,点个赞吧!!

    版权声明:如无特殊说明,文章均为本站原创,转载请注明出处
    本文链接:https://blog.csdn.net/wsad861512140

    展开全文
  • Bootstrap4——后续

    2020-02-20 19:40:13
    1.表格也疯狂 知识点 th 表头 tr 行 td 列 上代码 <section class="bg-light text-center py-5"> <h2> 今后计划 </h2> <div class="container">...table class="table table...
  • Bootstrap3和Bootstrap4区别

    万次阅读 2018-10-26 18:24:11
    Bootstrap3和Bootstrap4区别 首先引入Bootstrap3和4官网连接; Bootstrap3 VS Bootstrap4. 不同点 Bootstrap3 Bootstrap4 Less Sass语言编写 4种栅格类 5种栅格类 使用px为单位 使用rem和em为单位(除...
  • Bootstrap4使用教程

    千次阅读 2018-11-15 16:48:50
    本篇文章写给那些第一次接触Bootstrap框架的学习者,这篇文章将从最基础最基础的Bootstrap下载开始。对Bootstrap有使用经验的同学可以忽略本篇文章。 Bootstrap下载 可以自行百度Bootstrap下载,也可以直接通过此...
  • Bootstrap4 安装方式

    千次阅读 2019-05-13 17:20:40
    可以通过两种方式来安装 Bootstrap4: 使用 Bootstrap 4 CDN。 从官网 getbootstrap.com 下载 Bootstrap 4。 一、Bootstrap4 CDN 库: 国内推荐使用 :https://www.staticfile.org/ <!-- 新 Bootstrap...
  • bootstrap4

    千次阅读 2020-04-29 10:38:07
    文章目录1.... 边框颜色4. 浮动5. 响应式浮动6. 对齐7. 宽度8. 高度3. 字体4. 颜色5. 导航6. 导航栏7. 下拉菜单8. 表单控件1. input2. textarea3. 复选框(checkbox)4. 单选框(Radio)5. select下拉菜单9...
  • Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统, 可以随着设备或视口尺寸的大小的增加而适当地扩展到 12 列。 它包含了用于简单的布局选项的预定义类,也包含了用于生成更多语义布局的功能强大的...
  • Bootstrap4 小工具

    2019-07-30 23:14:49
    一、Bootstrap4 小工具 Bootstrap4 提供了一些小工具,可以让我们不用写 CSS 代码就能实现想要的效果。 1.1 边框 使用 border 类可以添加或移除边框: <!DOCTYPE html> <html> <head> <title...
  • Bootstrap 4 如何自定义表格列宽度

    万次阅读 2018-08-23 08:35:30
    今天我们要一起来看一下如何使用Bootstrap 4来自定义表格的列宽度。 注意,以下的示例会使用到row,col等一系列class来完成表格宽度的自定义,所以如果觉得麻烦,也可以直接自定义css,不过这就不属于我们的讨论...
  • Bootstrap 4重大更新,亮点解读

    万次阅读 2018-01-19 17:11:12
    8月19日对Bootstrap来说是个特别的日子——不仅是项目四周年纪念日,也是经过了一年密集开发之后发布Bootstrap 4内测版的日子。Bootstrap 4是一次重大更新,几乎涉及每行代码。新增功能Bootstrap 4中有太多重大的...
  • Bootstrap3 与Bootstrap4垂直水平居中

    万次阅读 多人点赞 2019-05-27 17:06:46
    Bootstrap水平居中 // 文本: class ="text-center" // 图片居中: class = "center-block" //其他元素: //bootstrap3水平居中:利用bootstrap列偏移 class = "col-md-offset-4 col-lg-offset-4col-xl-...
  • 使用 Bootstrap 4 提升网页实战教程

    万人学习 2018-11-05 12:02:07
    使用Bootstrap 4提升网页实战视频课程,课程内容包含使用bootstrap开发购物网、Landing page、个人网站、企业网站、客制化网站都将难不倒您!这堂课会手把手地透过Bootstrap 4 实作各种业界案例,有了这样的加持,...
  • Bootstrap4表单验证(纯JavaScript方法)

    千次阅读 2018-09-12 11:18:41
    Bootstrap4表单验证 网上bootstrap4表单验证的文章实在太少了,当初做的时候老是摸不着头脑,现在我来分享一下自己的做法,希望小伙伴们少走点弯路 一、示例代码 &amp;lt;!DOCTYPE html&amp;gt; &...
  • Bootstrap4动态切换主题

    千次阅读 2020-04-07 17:05:26
    bootstrap4有个网站叫做bootswatch,其中已经设计了一些很美的主题: 要想使用也是很简单的,只需要下载其中的bootstrap.css或者bootstrap.min.css并覆盖到自己项目的对应文件就行了。如果你想动态切换的话,现在...
  • Bootstrap4Bootstrap4 安装使用

    千次阅读 2017-12-27 15:18:48
    Bootstrap4 安装使用 我们可以通过以下两种方式来安装 Bootstrap4: 使用 Bootstrap 4 CDN。 从官网 getbootstrap.com 下载 Bootstrap 4。 Bootstrap 4 CDN 国内推荐使用 BootCDN 上的库: ...
  • Bootstrap4响应式布局之栅格系统

    千次阅读 2018-04-06 10:10:04
    Bootstrap4框架中为我提供了栅格系统来编写响应式布局。栅格系统是基于一个12列、有5种响应尺寸(对应不同的屏幕)的布局。Bootstrap4栅格系统共有五个类: .col- 针对所有设备 .col-sm- 平板 - 屏幕宽度等于或...
1 2 3 4 5 ... 20
收藏数 322,621
精华内容 129,048
关键字:

bootstrap4