D24 BootStrap

最新推荐文章于 2023-08-04 19:17:39 发布
最新推荐文章于 2023-08-04 19:17:39 发布
阅读量265 收藏 1
点赞数
文章标签： bootstrap 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/intmain404/article/details/128877480
版权

D24

 F1.BootStrap的安装和使用

  1.BootStrap介绍
   1）官网：Bootstrap·The most popular HTML, CSS, and JS library in the world.
     中文网：Bootstrap中文网
   2）BootStrap是一套现成的CSS样式集合
   3）BootStrap是最受欢迎的HTML,CSS和JS框架，用于来发响应式布局，移动设备优先的web项目
   4）BootStrap建设的网站：界面清晰，简洁；要素排版利落大方
   5）BootStrap特别适合那种没有设计师团队（甚至没有前端的团队）。可以快速的做出一个网页
  2.BootStrap特点
   1）简洁，直观，强悍的前端开发框架，HTML，css,js工具集，让web 开发更速，简单
   2）基于HTML5,CSS3的BootStrap，具有大量的又热特性：友好的学习曲线，卓越的兼容性。响应式设计，12列格网，样式向导文档
   3）自定义JQUERY插件，完整的类库，BootStrap3基于Less，BootStrap4基于Sass的css预处理技术
   4）BootStrap响应式布局设计，让一个网站可以兼容不同分辨路的设备。BootStrap响应式布局设计，给用户提供更好的视觉使用体验
   5）丰富的组件
  3.下载与使用
   1）下载：起步 · Bootstrap v3 中文文档 | Bootstrap 中文网
   2）下载完成后
     拷贝dis/css中的BootStrap.min.css到项目css中
     拷贝dis/js中的BootStrap.min.js到项目js中
   3）下载jQuery.js
  4.在html中模板为：


<!DOCTYPE html>
<html lang="en">
    <head>
        <!--设置当前HTML文件的字符编码-->
        
        <!--compatible兼容的，设置浏览器的兼容模式版本（让IE使用最新的渲染引擎工作）-->
        
        <!--声明当前网页在移动端浏览器展示的相关设置-->
        <!-- 
            viewport表示用户是否可以缩放页面
            width指定视区的逻辑宽度
            device-width指定视区宽度应为设备的屏幕宽度
            initial-scale指令用于设置Web页面的初始化缩放比例
            initial-scale-1则将显示未经缩放的Web文档
         -->
        
        <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
        <title>Bootstrap基本的HTML模板</title>
        <!--引入Bootstrap核心样式表(CSS)文件-->
        <link  rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
        <!--引入html5shiv.min.js让浏览器可以识别HTML5的新标签-->
        <!--引入respond.min.js让低版本浏览器可以使用CSS3的媒体查询-->
        <!--[if It IE 9]>
        <script src="html5shiv/html5shiv.min.js"></script>
        <script src="Respond/respond.min.js"></script>
        <![endif]-->
        <!--自己写的CSS样式文件放head最下面-->
    </head>
    <body>
        <div><h1>Hello,world!</h1></div>
        <!-- Bootstrap的所有JS组件都是依赖jQuery的，所以必须放在前边-->
        <script src="js/jquery.js"></script>
        <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。-->
        <script src="bootstrap/js/bootstrap.min.js"></script>
        <!--自己写的js文件放在body最下面-->
    </body>
</html>
​
 
 
<!DOCTYPE html>
<html lang="en">
    <head>
        
        
        
​
        <title>Bootstrap基本的HTML模板</title>
​
        <link  rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
​
    </head>
    <body>
        <div><h1>Hello,world!</h1></div>
        <script src="js/jquery.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
    </body>
</html>

  5.参考API：
   1）全局 CSS 样式·Bootstrap v3 中文文档 | Bootstrap 中文网

 F2.布局容器和栅格网格系统

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

<div class="container">
---
</div>

   2）.container-fluid类用于100%宽度，占据全部视口（viewport）的容器

<div class="container-fluid">
---
</div>

  2.栅格网格系统
     BootStrap提供了一套响应式，移动设备优先的流式栅格系统。随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。栅格系统用于通过一系列的行（row）与列(column)的组合来床架页面布局，你的内容九可以放入这些人创建好的布局中
   1）Bootstrap栅格网格系统将容器平分为12列，列的总数加起来不能超过12，大于12则自动换到下一行。通过一系列的行（row）与列（column）的组合来创建页面布局。网格系统必须使用到css,数据行(.row)必须包含在容器（.container）中，以便其赋予合适的对齐方式和内距（padding）。在行(.row)中可以添加列(.column)，即：行中有列！

    <!-- 容器 -->
        <div class="container">
            <!-- 行中有列-->
            <div class="row">
                <div class="col-md-4" style="background-color: #ffccff;">灰色与青</div>
                <div class="col-md-8" style="background-color: #ff0099;">灰色与青</div>
            </div>
        </div>

   1）列组合
     列组合就是更改数字来合并列（列总数不能超过12，大于12，自动换到下一行），有点类似于表格的colspan属性

      <!--  列组合  -->
        <div class="container">
            <div class="row">
                <div class="col-md-4" style="background-color: #ffccff;">1</div>
                <div class="col-md-4" style="background-color: #ff0099;">2</div>
                <div class="col-md-4" style="background-color: #ff0066;">3</div>
            </div>
            <div class="row">
                <div class="col-md-2" style="background-color: #CCFFFF;">1</div>
                <div class="col-md-4" style="background-color: #FFCCCC;">2</div>
                <div class="col-md-6" style="background-color: #FFFFCC;">3</div>
            </div>
        </div>

   2）列偏移
     有时候，我们不希望相邻的两个列紧靠在一起，让它们之间存在间隙，这就可以用列偏移（offset）来实现。使用列偏移只需在列元素上添加类名.col-md-offset-*(星号代表要偏移的列组合数)，同时应该注意偏移的总数不能超过12

    <!--  列偏移  -->
        <div class="container">
            <div class="row">
                <div class="col-md-1" style="background-color: #FF9966;">1</div>
                <div class="col-md-2 col-md-offset-3" style="background-color: #FF6666;">5</div>
                <div class="col-md-6" style="background-color: #FFCCCC;">6</div>
            </div>
        </div>

   3）列排序
     改变列的方向（改变左右浮动）并且设置浮动的距离
     col-md-push-* ：往后push（右浮动） col-md-pull-* ：往前pull（左浮动）

   <!--  列排序  -->
        <div class="container">
            <div class="row">
                <div class="col-md-3" style="background-color: #0066CC;">列排序</div>
                <div class="col-md-3 col-md-pull-2" style="background-color: #FF6666;">左浮动</div>
                <div class="col-md-3 col-md-push-1" style="background-color: #FFFF00;">右浮动</div>
            </div>
        </div>

   4）列嵌套
     在一个列中添加一个或者多个行容器，然后在这个行容器中插入列

    <!--  列嵌套  -->
		<div class="container">
			<div class="row">
				<div class="col-md-4">
					<div class="row">
						<div class="col-md-2" style="background-color: #1B6D85;">1-1</div>
						<div class="col-md-8" style="background-color: #204D74;">1-2</div>
						<div class="col-md-2" style="background-color: #FFCC99;">1-3</div>
					</div>
				</div>
				<div class="col-md-4" style="background-color: #CC9999;">2</div>
				<div class="col-md-4" style="background-color: #CCCC99;">3</div>
		    </div>
		</div>

 F3.常用样式

  1.排版
  A.标题
   1）BootStrap和普通的HTML页面一样，定义标题都是使用标签< h1>到< h6>，只不过BootStrap覆盖了其默认的样式，使用其在所有浏览器下显示的效果一样。为了让非标题元素和标题使用相同的样式，还特意定义了.h1~.h6六个类名。同时后面可以紧跟着一行小的副标题< small>< /small>或使用.small

<h1>h1.Bootstrap heading<small>副标题</small></h1>
<div class="h1">Bootstrap标题1<span class="small">副标题</span></div>

  B.段落
   1）段落是排版中另外一个重要元素之一。通过.lead来突出强调内容分(其作用就是增大文本字号，加粗文本，而且对行高和margin也左相应的处理。可以使用一下标签给文本左突出样式处理)
     < small>:小字号
     < b>< strong>：加粗
     < i>< em>:斜体

<p class="lead"><small>以后的</small><b>你</b>会<i>感谢<em>努力</em><strong>你</strong></p>

  C.强调
   1）定义了一套类名，这里称其为强调类名，这些强调类都是通过颜色来表示强调，具体说明如下：
     .text-muted:提示，使用浅灰色（#999）
     .text-primary:主要，使用蓝色（#428bca）
     .text-success:成功，使用浅绿色（#3c763d）
     .text-info:通知信息，使用浅蓝色（#31708f）
     .text-warning:警告，使用黄色（#8a6d3b）
     .text-danger:危险，使用褐色（#a9442）

<div class="text-muted">提示</div>
<div class="text-primary">主要</div>
<div class="text-success">成功</div>
<div class="text-info">通知信息</div>
<div class="text-warning">警告</div>
<div class="text-danger">危险</div>

  D.对齐效果
   1）在css中常常使用text-align来实现文本的对其风格的设置
     其中主要有四种风格：
     左对齐，取值left;
     居中对齐，取值center;
     右对齐，取值right;
     两端对齐，取值justify;
   2）为了简化操作，方便使用，Bootstrap通过定义四个类名来控制文本的对齐风格：.text-left：左对齐 .text-center:居中对齐 .text-right:右对齐 .text-justify:两端对齐

<p class="text-left">我居左</p>
<p class="text-center"></p>
<p class="text-right"></p>
<p class="text-justify"></p>

  E.列表
   1）在HTML文档中，列表结构主要有三种：
     无序列表(< ul>< li>…< li>< /ul>)
     有序列表(< ul>< li>…< /li>)
     定义列表(< dl>< dt>…< /dt>< dd>…< /dd>< /dl>)
   2）去点列表

class="list-unstyled"
 
<ul class="list-unstyled">
    <li>无序列表1</li>
     <li>无序列表2</li>
</ul>

   3）内联列表
     class=“list-inline”,把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。也可以说内敛列表就是为制作水平导航而生

<ul class="list-inline">
	<li>首页</li>
    <li>java学院</li>
     <li>在线课堂</li>
</ul>

   4）定义列表
     在原有的基础上加入了 一些样式，使用样式class="dl-horizontal"制作水平定义列表：当标题宽度超过160px时，将会显示三个省略号

<dl>
    <dt></dt>
    <dd></dd>
    <dt></dt>
    <dd></dd>
</dl>
<dl class="dl-horizontal">
    <dt></dt>
    <dd></dd>
    <dt></dt>
    <dd></dd>
</dl>

  F.代码
     一般在个人博客上使用的较为频繁，用于显示代码的风格。在bootstrap主要提供了三种代码风格：
   1）使用< code>< /code>>来显示单行内联代码
   2）使用< pre>< /pre>>来显示多行代码
     样式：pre-scrollable(height,max-height高度固定为340px,超过存在滚动条)
   3）使用:来显示用户输入代码，如快捷键
   4）单行内联代码

<code>this is a simple</code>

   5）快捷键

<p>使用<kbd>ctrl+s</kbd>保存</p>

   6）多行块代码

<!--代码会保存元本的格式，包括空格和换行-->
 
<pre>
	public class helloworld{
		public static void main(String[] args){
			-----------s
		}
	}
	</pre>

  G.表格
   1）表格样式
     在使用bootstrap的表格过程中，只需要添加对应的类名就可以得到不同的表格风格
     下表样式可用于表格中：
在这里插入图片描述

   2） tr，th，td样式
     提供了五种不同的类名，每种类名控制了行的不同背景颜色
在这里插入图片描述
  2.表单
     表单主要功能是用来与用户左交流的一个网页控件，良好的表单设计能够让王爷更好的沟通。表单中常见的元素主要包括：文本输入框，下拉选择框，单选按钮，复选按钮，文本域和按钮等
  A.表单控件
     .form-control .input-lg(较大) .input-sm(较小)
   1）输入框text
     .form-control

<div class="col-sm-3">
	<input type="text" name="" id="" class="form-control" />
	<input type="text" name="" id="" class="form-control input-lg" />
	<input type="text" name="" id="" class="form-control input-sm" />
</div>

   2）下拉选择框select
     多行选择设置：multiple=“multiple”

<div class="col-sm-3">
	<select calss="form-control">
			<option>北京</option>
			<option>北京</option>
			<option>北京</option>
			</select>
</div>

   3）文本域
     .form-control 表单元素的样式
   4）复选框 checkbox
     垂直显示：.checkbox
     水平显示： .checkbox-inline

hiHiHiH'zHih垂直HiHiH'zHihuHiHii
		<div class="row">
			<div class="col-md-3">
		<div class="checkbox">
			<label><input type="checkbox" name="hobby"> 唱歌</label>
		</div>
		<div class="checkbox">
			<label><input type="checkbox" name="hobby"> 跳舞</label>
		</div>
			</div>
		</div>
//水平	
<div class="row">
			<div class="col-md-3">
				<label class="checkbox-inline">
					<input type="checkbox" name="hobby"> 唱歌
				</label>
				<label class="checkbox-inline">
					<input type="checkbox" name="hobby"> 跳舞
				</label>
				</div>
		</div>

   5）单选框 radio
     垂直显示： .radio
     水平显示：.radio-inline

<div class="row">
			<div class="col-md-3">
				<div class="radio">
					<label><input type="radio" name="sex"> 男</label>
				</div>
			<div class="radio">
				<label><input type="radio" name="sex"> 女</label>
			</div>
			</div>
		</div>

   6）按钮
    a.使用实现
     基础样式：btn

<button class="btn">按钮</button>

     滑稽样式：btn-primary btn-info btn-success btn-danger btn-link btn-default

<button class="btn btn-primary">按钮</button>
<button class="btn btn-info">按钮</button>
<button class="btn  btn-success">按钮</button>
<button class="btn btn-danger">按钮</button>
<button class="btn  btn-link">按钮</button>
<button class="btn btn-default">按钮</button>

    b.多标签支持：使用a div等制作按钮

<a href="##" class="btn btn-info ">a标签按钮</a>
<span class="btn btn-success">span标签按钮</span>

    c.使用.btn-lg .btn-sm .btn-xs 就可以获得不同尺寸的按钮

<button class="btn btn-primary btn-xs">按钮</button>

    d.按钮禁用
     方法1：在标签中添加disabled属性

<button class="btn btn-danger" disable="disabled">禁用按钮</buton>

     方法2：在元素标签中添加类名“disabled”

<button class="btn btn-danger disabled">禁用按钮</buton>

  B.表单布局
     基本的表单结构是bootstrap自带的，个别的表单控件自动接收一些布局样式。下面列出了创建基本表单的步骤：

  • 向父元素添加role="form".
  • 把标签和控件放在一个带有class.form-group的< div>中。这是获取最佳间距所必须的
  • 向所有的本文元素,,添加class="form-control".

  •    1）水平表单
         向同一行显示form-horizontal
         配合bootstrap框架的网格系统

    <form calss="form-horizontal">
	<div class="form-group">
		<label for="email">邮箱</label>
		<input type="email" class="form-control" placeholder="清华输入密码">
	</div>
    <div class="form-group">
        <label for="pwd">密码</label>
			<input type="pwd" class="form-control" placeholder="请输入密码">		        
     </div>
    <div calss="form-group checkbox">
        <label><input type="checkbox"/>记住密码</label>
    </div>
    <div class="form-group">
        <button class="btn btn-default">提交</button>
    </div>
</form>

       2）内联表单
         将表单的控件都在一行显示form-inline
         注意label不会显示，存在的意义：如果没有为输入控件设置label标签，屏幕阅读器将无法正确识别

    <form calss="form-inline">
	<div class="form-group">
		<label for="email">邮箱</label>
		<input type="email" class="form-control" placeholder="清华输入密码">
	</div>
    <div class="form-group">
        <label for="pwd">密码</label>
			<input type="pwd" class="form-control" placeholder="请输入密码">		        
     </div>
    <div calss="form-group checkbox">
        <label><input type="checkbox"/>记住密码</label>
    </div>
    <div class="form-group">
        <button class="btn btn-default">提交</button>
    </div>
</form>

      3.缩略图
         缩略图在电商类的网站很常见，最常用的地方就是产品列表页面。缩略图的实现是配合网格系统一起使用。同时还可以让缩略图配合标题，面熟内容，按钮等

    <div class="container">
	<div class="row">
		<div class="col-md-3">
			<div class="thumbnail">
				<img src="gaoyuanyuan.webp" alt="..."style="width: 240px;height: 360px;">
				<h3> 高圆圆</h3>
				<p>出生于背景，中国内地女演员，模特</p>
				<button class="btn btn-default">
					<span class="glyphicon glyphicon-heart"></span>喜欢</button>
				<button class="btn btn-info">
					<span class="glyphicon glyphicon-pencil"></span>评论
				</button>
			</div>
			
        </div>

      4. 面板
         默认的.panel组件所左的知识设置基本的边框（border）和内补（padding）来包含内容
         .oanel-default:默认样式

     F4.BootStrap插件

      1.导航
         使用下拉与按钮组合可以制作导航
       1）基本样式：.nav与"nav-tabs","nav-pills"组合制作导航
       2）分类：
        a.标签型(nav-tabs)导航
        b.胶囊型（nav-pills）导航
        c.堆栈（nav-stacked）导航
        d.自适应（nav-justified）导航
        e.面包蟹式（breadcrumb）导航,单独使用样式，不予nav一起使用，直接加入ol,ul中即可，一般用于导航，主要起的作用是告诉用户所处页面的位置（当前位置）
       3）状态：
         选中状态 active样式
         禁用状态：disable
       4）标签式导航

    <div class="container">
    <div class="row">
        <div class="span6">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Tutorials</a></li>
                <li><a href="#">Practice Editor </a></li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</div>

       5）胶囊式导航

    <div class="container">
    <div class="row">
        <div class="span8">
            <ul class="nav nav-pills">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Tutorials</a></li>
                <li><a href="#">Practice Editor </a></li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</div>

      2.分页导航
         分页随处可见，分为页码导航和翻页导航
         页码导航：ul标签上加pagination[pagination-lg|pagination-sm]
         翻页导航：ul标签上加pager
       1）分页

    <ul class="pagination">
    <li><a href="#">&laquo;</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">&raquo;</a></li>
</ul>

       2） 翻页导航

    <ul class="pager">
	<li><a href="#">Previous</a></li>
	<li><a href="#">Next</a></li>
</ul>

      3.下拉菜单
         在使用Bootstrap框架的下拉菜单时，必须使用两个js
         下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。这可以通过与 下拉菜单（Dropdown） JavaScript 插件 的互动来实现
         如需使用下拉菜单，只需要在 class .dropdown 内加上下拉菜单即可。下面的实例演示了基本的下拉菜单：

    <div class="dropdown">
    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">Java</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
        </li>
        <li role="presentation" class="divider"></li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
        </li>
    </ul>
</div>

        a.使用一个类名为dropdown或btn-group包裹整个下拉框：

    <div class="dropdown"></div>

        b.默认向下dropdown，向上弹起加入.dropup即可
        c.使用button作为父菜单，使用类名：dropdown-toggle和自定义date-toggle属性

    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"></button>

        d.在button中使用font制作下拉箭头

    <span class="caret"></span>

        e.对齐方式：dropdown-menu-left 左对齐 默认样式   dropdown-menu-right 右对齐
        f.激活状态（.active）和禁用状态（.disabled）
      4.模态框
         模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等
         可以切换模态框（Modal）插件的隐藏内容：

  • 通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性 data-toggle="modal"，同时设置 data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框（带有 id="identifier"）
  • 通过 JavaScript

  •      ：使用这种技术，您可以通过简单的一行 JavaScript 来调用带有 id=“identifier” 的模态框：
         $(‘#identifier’).modal(options)

    <h2>创建模态框（Modal）</h2>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
            </div>
            <div class="modal-body">在这里添加一些文本</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<h2>创建模态框（Modal）</h2>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">添加用户</h4>
            </div>
            <div class="modal-body">
            	<form class="form-horizontal" role="form">
                    <div class="from-group">
                        <label for="uname" class="col-md-2 control-label">姓名</label>
                        <div class="col-md-8">
                            <input type="text" id="uname" class="form-control" placeholder="请输入姓名"/>
                        </div>
                    </div>
                     <div class="from-group">
                        <label for="upwd" class="col-md-2 control-label">密码</label>
                        <div class="col-md-8">
                            <input type="text" id="upwd" class="form-control"placeholder="请输入密码" />
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
码上奉先
关注
【区块链】Truffle 部署 编译 测试 智能合约 的 完整实践操作
Code Metaverse
10-27 1万+
Truffle 部署 编译 测试 智能合约 的 完整实践操作目标 搭建开发环境 创建一个Truffle项目 编写智能合约 编译转移智能合约 测试智能合约 创建用户界面连接智能合约 在浏览器中访问Dapp 搭建开发环境 Node.js v6+ LTS and npm (comes with Node) Git 这里配置脚本略过。。。。xiaoyu@LIXIAOYUdeMacBook-Pro.com➤
【Python百日基础系列】Day21 - Dash安装与布局实例(一)
岳涛的博客
11-14 5090
文章目录一、Dash简介二、Dash及主题框架安装2.1 Dash安装2.2 Dash Bootstrap Components安装三、Dash布局实例（一）3.1 实例1：柱状图 视频讲解： 【Python百日基础系列】21 Dash安装与布局实例1 一、Dash简介 Dash是一个用于构建Web应用程序的高效Python框架。 Dash写在Flask，Plotly.js和React.
Bootstrap漂亮的垂直手风琴列表效果.zip
07-04
这是一款基于Bootstrap的漂亮垂直手风琴列表效果。该垂直手风琴列表代码简单，样式新颖，值得推荐。
Bootstrap框架常用组件
m0_46420078的博客
02-16 3702
一、组件基础 1、什么是组件 组件是一个抽象的概念，是对数据和方法的简单封装。用面向对象的思想来说 ，将一些符号某种规范的类组合在一起就构成了组件，通过组件可以为用户提供某些特定的功能。 2、组件的优势 组件是构成页面中独立结构单元，是对结构的抽象，它主要以页面结构形式存在，可复用性很强。组件的使用并不复杂，每个组件拥有自己的作用域，每个组件区域之间独立工作，并且互不影响。 组件可以有自己的属性和方法。不同组件之间也具有基本的交互功能，能够根据业务逻辑来实现复杂的项目功能。 3、Boots..
bootstrap实现垂直导航框架
baidu_33403616的博客
04-18 2万+
<html> <head> <title>Bootstrap 实例 - 垂直的胶囊式导航菜单</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.
Bootstrap的二级垂直菜单
weixin_34253126的博客
09-11 848
2019独角兽企业重金招聘Python工程师标准>>> ...
Bootstrap 4 水平排列、垂直排列及水平、垂直居中详解
In the Cloud
08-22 1万+
从个人技术博客发布至CSDN： Bootstrap 4 水平排列、垂直排列及水平、垂直居中详解 相关链接： Bootstrap 4 自定义表格列宽度
bootstrap-fileupload文件上传组件2018最新版
04-26
Bootstrap FileUpload是一款基于jQuery和Bootstrap框架的文件上传组件，...通过"kartik-v-bootstrap-fileinput-7b52d24"这个文件名来看，这是组件的某个特定版本，可能包含了源代码、示例和文档，供开发者学习和使用。
JQuery库BootStrap框架完整模板.html
qq_43299421的博客
12-11 4935
大家好，我是今天的博主，&lt;一个想做全栈的咸鱼&gt; 今天和大家一起学习一下JavaScript中省市二级联动创建方法 &lt;!DOCTYPE html&gt; &lt;html lang="zh-CN"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;!--声明文档兼容模式，表示使用IE浏览器的最新模式-
在PyCharm中使用execjs模块执行js文件时报错
qq_52671517的博客
08-04 1733
因为文件编码是gbk，而python环境编码是utf-8，所以会产生编码错误，所以在读取文件时加上编码格式’utf-8’。点击报错文件地址，打开subprocess.py文件。再次执行demo2.py文件，成功运行。
BootStrap左侧菜单栏
pinkling的博客
03-17 3万+
1. 事先说明 事先说明，此代码比较简短所以并没有美化，所以css需要自己再补一些。 另外，我比较菜。。刚进入前端，只能用vue、avue和element做一点公司的crud，勿喷 2. 做法过程 bootstrap折叠 主要使用的是上面链接的功能。 代码： &lt;div&gt; &lt;!-- 侧边栏标签页 --&gt; &lt;ul class="na...
bootstrap列表中两个常用方法，以及div中的垂直居中的操作步骤！
wt5264的博客
04-15 1199
1.onLoadSuccess() 此方法在Bootstarp Table数据成功加载返回后触发，参数为data（注意:data传入的数据是分页后的数据，并不是所有查询出来的数据，如果limit为10，那么就是10条数据），此时表格行数据尚未渲染，此时可以对数据进行更新或取值操作。 2.onPostBody() 此方法在Bootstarp Table 行数据渲染后触发，参数为data，此时要注意，...
Bootstrap 表格内容水平、垂直居中
热门推荐
饮冰室人的博客
04-24 7万+
水平居中为 td th 设置text-align: center即可 需要注意的是：th 默认为内容居左，td 则没有，所以直接在 th 的父标签 tr上添加 class="text-center"是无效的 这是无效的<tr class="text-center"> <th >#</th> <th>商品信息</th> <th
bootstrap左侧垂直菜单+简单后台管理布局
pan_xi_yi的博客
08-19 1万+
页面效果如下所示： 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0,...
深入理解BootStrap Item16 -- 列表组(list-group)
小平果的欢乐谷
11-18 1万+
1、列表组列表组是Bootstrap框架新增的一个组件，可以用来制作列表清单、垂直导航等效果，也可以配合其他的组件制作出更漂亮的组件。由于其在Bootstrap是一个独立的组件，所以也对应有自己独立源码：☑ LESS版本：对应的源码文件 list-group.less☑ Sass版本：对应的源码文件是 _list-group.scss☑ 编译出的Bootstrap版本：对应的源码boots
css项目列表如何水平放置
weixin_34208185的博客
03-21 1010
列表项目默认分行排列，那么将列表项设置浮动就可以实现水平放置 1 li{float:left;} 示例如下： 创建Html元素 1 2 3 4 5 6 <ul> <li>itemlist-1</li> <li>itemlist-2</li&g...
Form-radio单选框
hrbsfdxzhq01的博客
01-04 896
el-radio的 label属性是该 radio 对应的值，若该标签中无内容，则该属性也充当 radio 按钮后的介绍。  &lt;!--要使用 Radio 组件，只需要设置v-model绑定变量，选中意味着变量的值为相应 Radio label属性的值，label可以是 String、Number或Boolean。--&gt; &lt;el-radio v-model="radio" la...
ModelForm
diaoman4775的博客
06-25 152
这是一个神奇的组件，通过名字我们可以看出来，这个组件的功能就是把model和form组合起来，对，你没猜错，相信自己的英语水平。 先来一个简单的例子来看一下这个东西怎么用： 比如我们的数据库中有这样一张学生表，字段有姓名，年龄，爱好，邮箱，电话，住址，注册时间等等一大堆信息，现在让你写一个创建学生的页面，你的后台应该怎么写呢？ 首先我们会在前端一个一个罗列出这些字段，让用户去填...
django中ModelForm解决多表单组合显示问题
weixin_30945039的博客
12-20 494
一、多表单组合显示问题 在项目中用ModelForm生成页面时 当有多表单组合显示时，会显示全部的关联表单数据。 而在实际项目中可能会出现只想让用户选择部分数据，这时候这样的显示就有问题。 二、问题解决方案 views.py 实例化Form对象时注意把当前登录用户对象传到Form中 class Add_Edit_ConsultRecord(View): def g...
turbosound lms d24 软件
最新发布
08-05
Turbosound LMS D24软件是一款用于管理和控制Turbosound LMS D24数字信号处理器的软件。LMS D24数字信号处理器是一种功能强大的设备，用于音频系统的声音处理和优化。它被广泛应用于音响系统的各个领域，例如演唱会、剧院、会议室等。 Turbosound LMS D24软件提供了一种直观且易于使用的界面，使用户能够轻松地配置和控制LMS D24数字信号处理器。该软件具有图形化界面，用户可以通过拖放和点击来选择和调整不同的音频处理参数，如均衡器、延迟、压缩等。此外，软件还提供了预设配置和场景存储功能，用户可以保存和调用不同的设置，以适应不同的音频要求和环境。 Turbosound LMS D24软件还支持远程控制功能，用户可以通过连接电脑与LMS D24数字信号处理器来实现远程控制。这使得用户可以方便地在不同的位置进行音频系统的调节和控制，节省了时间和人力资源。同时，软件还提供了实时的反馈和监视功能，用户可以随时了解音频系统的运行状态和参数变化。 总之，Turbosound LMS D24软件提供了一种高效和方便的方式来管理和控制LMS D24数字信号处理器。它使用户能够轻松地配置和调整音频处理参数，实现音频系统的声音优化和调节。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值