Bootstrap：前端框架

Bootstrap：前端框架

一、前言

1、设置全局CSS样式

（1）基本的HTML元素均可以通过class设置样式得到增强效果

2、组件：可复用组件

3、JS插件

使用Bootstrap只需要加样式就可以实现较好的效果，不用自己写代码

需要添加用移动端的meta标签：viewport meta标签

width属性控制设备的宽度。假设的网站被带有不同屏幕分辨率的设备浏览，那么将它设置为device-width可以确保它能正确呈现在不同设备上

initial-scale=1.0确保网页加载时以1:1的比例呈现

可以直接在Bootstrap中文网找到“基本模板”，拷贝下来使用，里面的就是引入了css

BS栅格系统：bootstrap包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当的扩展到12列，包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类，即：

1、bootstrp是移动设置优先

2、bootstrap的栅格系统最多12列

3、bootstrap中包含了许多预定义的类

4、通常我们写的页面里浏览器缩小到一定程度时页面就会错位、变形，但在bootstrap中不会，因为它是自适应的

二、Bookstrap网格系统的工作原理

1、怎么使用bookstrap

（1）行必须放在.container class内，以便获得bookstrap设置的对齐(alignment)和内边距(padding)

（2）使用row来创建一行，每行多列

（3）内容应该放在列内，且唯有列可以是行的直接子元素。row>col 正确写法 行>列

行里面一定要放列，列里面才能放内容

（4）预定义的网格类，比如.row和.col-xs-4可用于快速创建网格布局

（5）列通过内边距(padding)来创建列内容之间的间隙，想要改变间隙就用负的margin来写

（6）网格系统是通过指定你想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列就使用三个.col-xs-4

2、栅格选项

bookstrap栅格把设备分为四种：超小设备（手机）、小型设备（平板）、中型设备（笔记本电脑）、大型设备（大尺寸显示器）。这四种设备各自的列数量之和都不可以超过12，且各自的列有不同的class前缀做标识。超小设备用.col-xs，小型设备用.col-sm，中型设备用.col-md-，大型设备用.col-lg-，不论哪种设备，他们的间隙都是30px（指列的padding-left：15px和padding-right：15px）

三、bookstrap排版

    使用bookstrap的排版特性可以创建标题、段落、列表以及其他内联元素。实际上它是把大部分html的基本标签加了初始样式而已。

1、标题：bookstrap中定义了所有的html标题（h1到h6）的样式

（1）内联子标题：如果需要向任何标题添加一个内联子标题，只需要在标题标签中添加，用small标签包裹副标题的内容（或是为元素添加.small类，会得到一个字号更小颜色更浅的文本）

使用bookstrap时需要按照它的规则来创建相关元素而不要自己去写样式，否则bookstrap的使用就没有了意义

2、引导主体副本：为了给段落添加强调文本则可以添加class="lead"，将会得到更大、行高更高的文本，作用相当于是文章摘要

3、对齐类：将文字对齐的类。一般用在p标签上(用在div上不符合规范，用在span标签不能生效)

（1）class="text-center"：文字居中显示

（1）class="text-left"：文字靠左显示

（1）class="text-right"：文字靠右显示

4、强调类：通过颜色表示强调。

（1）text-muted：减弱（文字颜色变浅）

（2）text-warning：这是警告色（橙灰色）

（3）text-danger：这是错误提示（红色）

（4）text-info：这只是信息（蓝色）

（5）text-success：这是正确的强调信息（绿色）

5、缩略语(注意这个不是类)

（1）在html4中有一个元素abbr用来指示简写或缩写，它使用title属性放完整内容，当鼠标悬停在缩写词上时就会显示title的内容。bookstrap实现了对html元素的增强样式，缩略语元素带有title属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有问号的指针

（2）address：bookstrap中为

地址标签进行了样式的重写，让联系信息以最接近日常使用的格式呈现。在html中address标签是以斜体显示的，而在bookstrap让它以正常字体显示。

6、表格

（1）用bookstrap添加表格就要添加.table类，这是bookstrap表格的基本样式。会添加很少的padding，表格的水平线，另外把每个单元格平均分开。

（2）可选样式

①.table-striped：为表格提供了斑马线的样式，原理是在表格内，通过:nth-shild CSS选择器为表格中的行添加斑马纹样式（表格行的背景色改变，背景色是可以自定义的，用浏览器的检查元素，然后改值，再复制到自己的代码中就可以了；如果是想要整体改变的话就要去min.css在源码里面查找、修改）

②.table-bordered：为表格增加边框

③.table-hover：为表格中的每一行赋予鼠标悬停样式，鼠标划过后会添加一个背景色

④.table-condensed：每个单元格的内补(padding)减半，可使表格更紧凑

7、表单

（1）单独的form标签会被自动赋予一些全局的样式。所有在设置了.form-control类里的、和<select>元素都被默认设置宽度为100%，将label元素和input、textarea、select这些元素一起包裹在.form-group中可以获得最好的排列（如果想要让label和input并排显示，使用form-horizontal）</span> </div> <div> <span style="font-size:9pt;">（2）.control-label：使label标签居中显示</span> </div> <div> <span style="font-size:9pt;">8、禁用状态：为输入框设置disabled属性可以禁止其与用户有任何交互（焦点、输入等），被禁用的输入框颜色更浅，并且还添加了鼠标禁止点击的状态</span> </div> <div> <span style="font-size:9pt;">9、控件尺寸</span> </div> <div> <span style="font-size:9pt;">（1）.input-lg类：大尺寸输入框</span> </div> <div> <span style="font-size:9pt;">（2）.input-sm类：小尺寸输入框</span> </div> <div> <span style="font-size:9pt;">10、按钮、图片</span> </div> <div> <span style="font-size:9pt;">（1）为<a>、<button>、<input>元素添加按钮类(button class)即可使用bookstrap提供的样式</span> </div> <div> <span style="font-size:9pt;">（2）为元素添加btn类和btn-default类可完成按钮的样式。btn是按钮通用样式，btn-default是增强样式</span> </div> <div> <span style="font-size:9pt;">（3）如果<a>元素被作为按钮使用，并用于在当前页面触发某些功能，而不是用于链接其他页面/当前页面中的其他部分，就必须要为其设置role="button"属性</span> </div> <div> <span style="font-size:9pt;">11、预定义样式：可以快速创建一个带有预定义样式的按钮</span> </div> <div> <span style="font-size:9pt;">（1）.btn-default：默认样式</span> </div> <div> <span style="font-size:9pt;">（2）.btn-primary：首选项（蓝色）</span> </div> <div> <span style="font-size:9pt;">（3）.btn-success：成功（绿色）</span> </div> <div> <span style="font-size:9pt;">（4）.btn-info：一般信息（浅蓝色）</span> </div> <div> <span style="font-size:9pt;">（5）.btn-warning：警告（橙色）</span> </div> <div> <span style="font-size:9pt;">（6）.btn-danger：危险（红色）</span> </div> <div> <span style="font-size:9pt;">12、按钮的尺寸</span> </div> <div> <span style="font-size:9pt;">（1）.btn-lg：大按钮</span> </div> <div> <span style="font-size:9pt;">（2）.btn-sm:小按钮</span> </div> <div> <span style="font-size:9pt;">（3）.btn-xs：超小按钮</span> </div> <div> <span style="font-size:9pt;">13、把按钮变为块级元素：通过给按钮添加.btn-block类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素</span> </div> <div> <span style="font-size:9pt;">14、激活状态：当按钮处于激活状态时，其表现为按压下去（底色、边框颜色更深，向内投射阴影）。对于<button>元素，是通过:active状态实现的。对于<a>元素，是通过.active类实现的。但是<button>也可以用.active（由于:active是伪状态，因此无需额外添加，但是在需要让其表现出同样外观的时候可以添加.active类）</span> </div> <div> <span style="font-size:9pt;">15、禁用状态：通过为按钮设置disabled="disabled"属性就可以呈现出无法点击的效果</span> </div> <div> <span style="font-size:9pt;">我们把.disabled作为工具类使用，就像.active类一样，因此不需要增加前缀，它是通用的类，不仅可以放在按钮上，也可以应用在其他元素上</span> </div> <div> <span style="font-size:9pt;">16、图片</span> </div> <div> <span style="font-size:9pt;">（1）图片形状：通过为<img>元素添加以下类可以让图片呈现不同的效果</span> </div> <div> <span style="font-size:9pt;"><1>img-rounded：圆角</span> </div> <div> <span style="font-size:9pt;">    例如：<img src="" alt="" class="img-rounded"></span> </div> <div> <span style="font-size:9pt;"><2>img-circle：圆</span> </div> <div> <span style="font-size:9pt;"><3>img-thumbnail：双线</span> </div> <div> <span style="font-size:9pt;">17、关闭按钮：直接就是写一个标签写一个close类名</span> </div> <div> <span style="font-size:9pt;">    例如：</span> </div> <div> <span style="font-size:9pt;">    <span class="close">×</span></span> </div> <div> <span style="font-size:9pt;">18、三角符号：通过使用三角符号可以指示某个元素具有下拉菜单的功能</span> </div> <div> <span style="font-size:9pt;">    直接就是写一个标签写一个caret类名</span> </div> <div> <span style="font-size:9pt;">    例如：</span> </div> <div> <span style="font-size:9pt;">    <span class="caret"></span></span> </div> <div> <span style="font-size:9pt;">19、元素位置</span> </div> <div> <span style="font-size:9pt;">（1）快速浮动：通过添加pull类，可以将任意元素向左/右浮动</span> </div> <div> <span style="font-size:9pt;">    <1>class="pull-left"：向左浮动</span> </div> <div> <span style="font-size:9pt;">    <2>class="pull-right"：向右浮动</span> </div> <div> <span style="font-size:9pt;">它的源码实际上是为元素添加了float属性，并且是优先级最高的</span> </div> <div> <span style="font-size:9pt;">（2）排列导航条时如果需要浮动可以使用工具类：.navbar-left或.navbar-right</span> </div> <div> <span style="font-size:9pt;">（3）清除浮动：通过为父元素添加.clearfix类可以清楚浮动</span> </div> <div> <span style="font-size:9pt;">20、让内容块居中：为元素添加.center-block类可以让元素居中显示，不论是行元素还是块元素。前提是要设置元素的宽。</span> </div> <div> <span style="font-size:9pt;">21、显示或隐藏内容:.show和.hidden类可以强制任意元素显示/隐藏。另外，.invisible类可以被用来仅仅影响元素的可见性，这个元素仍然在文档流中</span> </div> <div> <span style="font-size:9pt;">22、字体图标</span> </div> <div> <span style="font-size:9pt;">（1）使用：class="glyphicon glyphicon-search"</span> </div> <div> <span style="font-size:9pt;">     <1>需要有一个标签作为图标的容器。glyphicon glyphicon-search可以指向字体图标库中具体的某一个图标</span> </div> <div> <span style="font-size:9pt;">     <2>需要用哪个字体图标就在bookstrap中文网的组件一栏里选中，并复制该字体图标下面的内容，粘贴到容器标签的class里面</span> </div> <div> <span style="font-size:9pt;">（2）字体图标可以和其他元素配合使用（如：button+字体图标）</span> </div> <div> <span style="font-size:9pt;">23、下拉菜单：在bookstrap中用button和ul来模拟一个下拉菜单</span> </div> <div> <span style="font-size:9pt;">（1）结构</span> </div> <div> <span style="font-size:9pt;">    <div></span> </div> <div> <span style="font-size:9pt;">        <button></button></span> </div> <div> <span style="font-size:9pt;">        <ul></span> </div> <div> <span style="font-size:9pt;">            <li></li></span> </div> <div> <span style="font-size:9pt;">            <li></li></span> </div> <div> <span style="font-size:9pt;">        </ul></span> </div> <div> <span style="font-size:9pt;">    </div></span> </div> <div> <span style="font-size:9pt;">    div是容器，button放置这个列表默认显示的内容，ul中的li相当于是下拉列表中的option</span> </div> <div> <span style="font-size:9pt;">（2）书写格式</span> </div> <div> <span style="font-size:9pt;"><1>通过为下拉列表头部添加data-toggle="dropdown"，并添加dropdown-toggle类，来切换下拉菜单。然后在下拉列表头部中加入一个三角形，指示出点击此处会有更多内容出现</span> </div> <div> <span style="font-size:9pt;"><2>为ul添加dropdown-menu类，不然内容会被显示在外面而没有切换的效果。注意role=“menu”的意思是“描述一个非标准的标签的实际作用”，如果用div做button，那么div的role=“button”，辅助工具就可以认出这实际上是一个button。在这里，ul列表作为menu目录来使用</span> </div> <div> <span style="font-size:9pt;"><3>data-toggle(要注意这个不是一个类，只是一个属性)代表的是一个事件，点击的时候会有切换的效果</span> </div> <div> <span style="font-size:9pt;">   例如：</span> </div> <div> <span style="font-size:9pt;">   <button tyoe="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"></button></span> </div> <div> <span style="font-size:9pt;"><4>如果给容器添加.dropdown类就会给样式进行一定的布局（比如说字对齐）</span> </div> <div> <span style="font-size:9pt;"><5>如果ul的li不加超链接的话那么呈现出来的列表就是没有加边距的，包括hover的时候也没有效果</span> </div> <div> <span style="font-size:9pt;">（3）.divider类：下拉列表的分割线（是给li加的）：为下拉列表添加一条分割线用于将多个链接分组</span> </div> <div> <span style="font-size:9pt;">（4）禁用的菜单项：为下拉列表菜单中的<li>元素添加.disabled类，从而禁用相应的菜单项</span> </div> <div> <span style="font-size:9pt;">24、导航(除了导航，其他元素最好是放在一个container中)</span> </div> <div> <span style="font-size:9pt;">（1）基本结构</span> </div> <div> <span style="font-size:9pt;">    <nav class="navbar navbar-default">   //navbar声明导航样式，navbar-default还可以是反色（就是用浏览器查看元素打开时，当鼠标移到某一代码的时候该代码所在的区域的颜色发生改变）</span> </div> <div> <span style="font-size:9pt;">        <div class="container-fluid">    //container-fluid的width是100%，而container的width是用媒体查询获得的动态尺寸</span> </div> <div> <span style="font-size:9pt;">        </div></span> </div> <div> <span style="font-size:9pt;">    </nav></span> </div> <div> <span style="font-size:9pt;">    ①还可以为导航添加navbar-fixed-top或navbar-fixed-bottom将导航固定在顶部或底部</span> </div> <div> <span style="font-size:9pt;">    ②如果navbar-default改为navbar-inverse的话只不过是反色改变了颜色，变为了黑色。里面如</span> </div> <div> <span style="font-size:9pt;">     过添加文字的话，会根据default/inverse而改变字体的颜色</span> </div> <div> <span style="font-size:9pt;">（2）在导航中添加logo</span> </div> <div> <span style="font-size:9pt;">    <nav class="navbar navbar-default"></span> </div> <div> <span style="font-size:9pt;">        <div class="container-fluid"></span> </div> <div> <span style="font-size:9pt;">            <div class="navbar-header">     //navbar-header表示元素向左浮动</span> </div> <div> <span style="font-size:9pt;">                <a href="#" class="navbar-brand">    //navbar-brand表示会自动加一些边距展示logo</span> </div> <div> <span style="font-size:9pt;">                    <img src="" alt="" /></span> </div> <div> <span style="font-size:9pt;">                </a></span> </div> <div> <span style="font-size:9pt;">            </div></span> </div> <div> <span style="font-size:9pt;">        </div></span> </div> <div> <span style="font-size:9pt;">    </nav></span> </div> <div> <span style="font-size:9pt;">（3）在导航中添加列表</span> </div> <div> <span style="font-size:9pt;">    <nav class="navbar navbar-default"></span> </div> <div> <span style="font-size:9pt;">        <div class="container-fluid"></span> </div> <div> <span style="font-size:9pt;">            <ul class="nav navbar-nav">   //nav和navbar的样式不同，nav是专门为导航中的列表添加样式，而navbar是为整个导航添加样式，navbar-nav是让li左浮</span> </div> <div> <span style="font-size:9pt;">                <li class="active"><a href="#"></a></li>    //active表示把该元素声明为当前正在活动的状态</span> </div> <div> <span style="font-size:9pt;">            </ul></span> </div> <div> <span style="font-size:9pt;">        </div></span> </div> <div> <span style="font-size:9pt;">    </nav></span> </div> <div> <span style="font-size:9pt;">（4）在导航中添加搜索框</span> </div> <div> <span style="font-size:9pt;">    <form section="" class="navbar-form navbar-right"></span> </div> <div> <span style="font-size:9pt;">        <a href="#" class="navbar-link">登录</a>     //navbar-link会使超链接的字体和下划线变为灰色</span> </div> <div> <span style="font-size:9pt;">        <a href="#" class="navbar-link">注册</a></span> </div> <div> <span style="font-size:9pt;">        <input type="text" class="font-control" /></span> </div> <div> <span style="font-size:9pt;">        <input type="submit" class="btn btn-primary" /></span> </div> <div> <span style="font-size:9pt;">    </form></span> </div> <div> <span style="font-size:9pt;">25、分页：class="pagination"</span> </div> <div> <span style="font-size:9pt;">    <div class="row"></span> </div> <div> <span style="font-size:9pt;">            <div class="col-md-12"></span> </div> <div> <span style="font-size:9pt;">                <div class="text-center"></span> </div> <div> <span style="font-size:9pt;">                    <ul class="pagination"></span> </div> <div> <span style="font-size:9pt;">                        <li><a href="#">1</a></li></span> </div> <div> <span style="font-size:9pt;">                        <li><a href="#">2</a></li></span> </div> <div> <span style="font-size:9pt;">                        <li><a href="#">3</a></li></span> </div> <div> <span style="font-size:9pt;">                        <li><a href="#">4</a></li></span> </div> <div> <span style="font-size:9pt;">                    </ul></span> </div> <div> <span style="font-size:9pt;">                </div></span> </div> <div> <span style="font-size:9pt;">            </div></span> </div> <div> <span style="font-size:9pt;">        </div></span> </div> <div> <span style="font-size:9pt;">（1）如果想要表示当前页就在li的class里加active（active加在不同的容器会有不同的显示，是根据容器决定的）</span> </div> <div> <span style="font-size:9pt;">（2）«表示向左的翻页符箭头</span> </div> <div> <span style="font-size:9pt;">     »表示向右的翻页符箭头</span> </div> <div> <span style="font-size:9pt;">26、面包屑导航/路径导航（在导航中可以显示当前路径）</span> </div> <div> <span style="font-size:9pt;">    <div class="col-md-12"></span> </div> <div> <span style="font-size:9pt;">        <ul class="breadcrumb">     //定义一个面包屑导航</span> </div> <div> <span style="font-size:9pt;">             <li><a href="#">首页</a></li></span> </div> <div> <span style="font-size:9pt;">             <li><a href="#">当前页</a></li></span> </div> <div> <span style="font-size:9pt;">        </ul></span> </div> <div> <span style="font-size:9pt;">    </div></span> </div> <div> <span style="font-size:9pt;">27、徽章badge（徽章的颜色在不同的容器会有不同的效果）</span> </div> <div> <span style="font-size:9pt;">    <div class="col-md-6"></span> </div> <div> <span style="font-size:9pt;">        <span class="badge">徽章</span></span> </div> <div> <span style="font-size:9pt;">        <button class="btn btn-danger"></span> </div> <div> <span style="font-size:9pt;">            你有未读消息<span class="badge">99+</span></span> </div> <div> <span style="font-size:9pt;">        </button></span> </div> <div> <span style="font-size:9pt;">    </div></span> </div> <div> <span style="font-size:9pt;">    </span> </div> <div> <span style="font-size:9pt;">28、缩略图thumbnail</span> </div> <div> <span style="font-size:9pt;">    <div class="thumbnail">    //thumbnail定义了缩略图样式</span> </div> <div> <span style="font-size:9pt;">         <img src="" alt="" /></span> </div> <div> <span style="font-size:9pt;">         <div class="caption">    //caption定义了标题样式</span> </div> <div> <span style="font-size:9pt;">             <h3><a href="#">课程标题</a></h3></span> </div> <div> <span style="font-size:9pt;">             <p>测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容</p></span> </div> <div> <span style="font-size:9pt;">         </div></span> </div> <div> <span style="font-size:9pt;">    </div></span> </div> <div> <span style="font-size:9pt;">29、列表组list-group（会默认给每个列表项添加边框）</span> </div> <div> <span style="font-size:9pt;">    <div class="col-md-12">  </span> </div> <div> <span style="font-size:9pt;">        <div class="list-group">        //定义列表组</span> </div> <div> <span style="font-size:9pt;">            <div class="list-group-item">        //定义列表项</span> </div> <div> <span style="font-size:9pt;">                <h4><a href="#">教程</a></h4>            <p>测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本</p></span> </div> <div> <span style="font-size:9pt;">            </div></span> </div> <div> <span style="font-size:9pt;">        </div></span> </div> <div> <span style="font-size:9pt;">    </div></span> </div> <div> <span style="font-size:9pt;">如果不想要边框，可以把边框另外设置样式</span> </div> <div> <span style="font-size:9pt;">30、选项卡：有两个部分，上面的是选项卡的标题(头部)，下面的是选项卡的内容</span> </div> <div> <span style="font-size:9pt;">（1）选项卡头部（一般都是用ul写，一个li代表一个标题）</span> </div> <div> <span style="font-size:9pt;">    <div></span> </div> <div> <span style="font-size:9pt;">        <ul class="nav nav-tabs">    //首先是个导航，并且是选项卡的导航</span> </div> <div> <span style="font-size:9pt;">            <li class="active"><a href="#xxk1" data-toggle="tab">选项卡1</a></li>     //active表示当前选中的状态，data-toggle="tab"有切换的效果</span> </div> <div> <span style="font-size:9pt;">            <li><a href="#xxk2" data-toggle="tab">选项卡2</a></li></span> </div> <div> <span style="font-size:9pt;">        </ul></span> </div> <div> <span style="font-size:9pt;">    </div></span> </div> <div> <span style="font-size:9pt;">（2）选项卡内容（一个大的div，包含几个小的div，其中小的div和大的div是对应的。也就是说点击一个选项卡，下面会显示出来对应的div）</span> </div> <div> <span style="font-size:9pt;">     <div class="content">      //内容的容器</span> </div> <div> <span style="font-size:9pt;">        <div class="tab-pane active fade in" id="xxk1"></span> </div> <div> <span style="font-size:9pt;">            选项卡1的内容</span> </div> <div> <span style="font-size:9pt;">        </div></span> </div> <div> <span style="font-size:9pt;">        <div class="tab-pane fade" id="xxk2"></span> </div> <div> <span style="font-size:9pt;">            选项卡2的内容</span> </div> <div> <span style="font-size:9pt;">        </div></span> </div> <div> <span style="font-size:9pt;">     </div></span> </div> <div> <span style="font-size:9pt;"><1>tab-pane定义了每个选项卡面板，会将面板默认为隐藏的，点击后再显示并且没有切换的效果</span> </div> <div> <span style="font-size:9pt;"><2>active设置当前为显示状态</span> </div> <div> <span style="font-size:9pt;"><3>fade是切换时的效果，会把元素透明度变为0</span> </div> <div> <span style="font-size:9pt;"><4>in将元素显示出来，把元素透明度变为1，fade和in是要配合使用来达到渐变的效果</span> </div> <div> <span style="font-size:9pt;"><5>每个tab-pane要设置id，并且id被选项卡头部的a标签href所指向，href里面选项卡的id前需要加#（这样才能实现点击选项卡出现对应选项内容的效果）</span> </div> </div> </div> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1296680789668339712"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script> <!-- 文章页-底部 动态广告位 --> <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad"> <!-- 文章页-右侧1 动态广告位 --> <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div> <!-- 文章页-右侧2 动态广告位 --> <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div> <!-- 文章页-右侧3 动态广告位 --> <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(Bootstrap：前端框架)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1835411044768509952.htm" title="字节二面" target="_blank">字节二面</a> <span class="text-muted">Redstone Monstrosity</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文</div> </li> <li><a href="/article/1835239047803531264.htm" title="ODOO不同版本与平台选择" target="_blank">ODOO不同版本与平台选择</a> <span class="text-muted">chouchengyin2080</span> <a class="tag" taget="_blank" href="/search/c%23/1.htm">c#</a><a class="tag" taget="_blank" href="/search/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/1.htm">操作系统</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a> <div>1.10.0vs11.0vs8.0截至2017年底，最新的ODOO发布版为ODOO11.0，但功能上有一定精简（去除财务模块，去除工作流支持），技术上变动较大（代码逐步迁移至Python3，前端框架改写得抽象）。所以如果是从生产使用的角度来讲，ODOO10.0是当前最好选择，因为其更稳定，第三方模块也更多更全面。而如果是ODOO技术爱好从业者，则逐步迁移至ODOO11.0也有必要，因为其底层技术架</div> </li> <li><a href="/article/1835022544919425024.htm" title="思科路由器交换机密码破解过程详解" target="_blank">思科路由器交换机密码破解过程详解</a> <span class="text-muted">zhane_hao</span> <div>路由启动过程加电自检(POST)加载bootstrap代码检查配置寄存器寻找CiscoIOS加载CiscoIOS寻找配置文件加载配置文件若没有配置文件，进入Setup模式，进行初始化配置运行路由器操作系统查看命令•showversion：检查配置寄存器的值,硬件配置,IOS版本•showflash：检查Flash中的IOS,或是flash大小,使用情况(占用多少,剩下多少)•showstartup</div> </li> <li><a href="/article/1834919786136563712.htm" title="基于nodejs+vue的美妆彩妆网站的设计与实现(源码+LW+调试文档+讲解等)" target="_blank">基于nodejs+vue的美妆彩妆网站的设计与实现(源码+LW+调试文档+讲解等)</a> <span class="text-muted">程序员gelei</span> <a class="tag" taget="_blank" href="/search/nodejs%E6%AF%95%E4%B8%9A%E8%AE%BE%E8%AE%A1%E9%A1%B9%E7%9B%AE/1.htm">nodejs毕业设计项目</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>目录：博主介绍：完整视频演示：系统技术介绍：后端Java介绍前端框架Vue介绍具体功能截图：部分代码参考：Mysql表设计参考：项目测试：项目论文：为什么选择我：源码获取：博主介绍：博主：程序员gelei：全网拥有20W+粉丝、CSDN作者、博客专家、全栈领域优质创作者、平台优质Java创作者、专注于Java、小程序、python、安卓技术领域和毕业项目实战✌Java精品实战案例《1000套》20</div> </li> <li><a href="/article/1834755419474587648.htm" title="Kafka系列之：kafka命令详细总结" target="_blank">Kafka系列之：kafka命令详细总结</a> <span class="text-muted">快乐骑行^_^</span> <a class="tag" taget="_blank" href="/search/%E6%97%A5%E5%B8%B8%E5%88%86%E4%BA%AB%E4%B8%93%E6%A0%8F/1.htm">日常分享专栏</a><a class="tag" taget="_blank" href="/search/Kafka/1.htm">Kafka</a><a class="tag" taget="_blank" href="/search/Kafka%E7%B3%BB%E5%88%97/1.htm">Kafka系列</a><a class="tag" taget="_blank" href="/search/kafka%E5%91%BD%E4%BB%A4%E8%AF%A6%E7%BB%86%E6%80%BB%E7%BB%93/1.htm">kafka命令详细总结</a> <div>Kafka系列之：kafka命令详细总结一、添加和删除topic二、修改topic三、平衡领导者四、检查消费者位置五、管理消费者群体一、添加和删除topicbin/kafka-topics.sh--bootstrap-serverbroker_host:port--create--topicmy_topic_name\--partitions20--replication-factor3--con</div> </li> <li><a href="/article/1834645992071327744.htm" title="web前端达到什么水平，才能找到工作？" target="_blank">web前端达到什么水平，才能找到工作？</a> <span class="text-muted">cj瑾瑜</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a> <div>一、前端是什么？前端即网站前台部分，也叫前端开发，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，完美的动效设计，给用户带来极高的用户体验。（核心技术：HTML、CSS、JavaScript）核心技术是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时，HTML将元素进行定义</div> </li> <li><a href="/article/1834617504568274944.htm" title="前后端分离，Asp.net core webapi 如何配置跨域" target="_blank">前后端分离，Asp.net core webapi 如何配置跨域</a> <span class="text-muted">代码掌控者</span> <a class="tag" taget="_blank" href="/search/C%23/1.htm">C#</a><a class="tag" taget="_blank" href="/search/asp.net/1.htm">asp.net</a><a class="tag" taget="_blank" href="/search/core/1.htm">core</a><a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a><a class="tag" taget="_blank" href="/search/core/1.htm">core</a><a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a><a class="tag" taget="_blank" href="/search/c%23/1.htm">c#</a> <div>前言可以说，前后端分离已经成为当今信息系统项目开发的主流软件架构模式，微服务的出现，让前后端分离发展更是迅速，大量优秀的前端框架如vue.js、react的出现，也让前后端分离趋势加快。所谓的前后端分离软件架构模式，就是指将前端和后端的开发完全分离，后端负责提供API接口和数据处理，而前端通过各种现代的JavaScript技术如AJAX或者Fetch等，来调用后端提供的API接口获取数据，从而构建</div> </li> <li><a href="/article/1834156411374891008.htm" title="html5carousel图片轮播,全面解析Bootstrap中Carousel轮播的使用方法" target="_blank">html5carousel图片轮播,全面解析Bootstrap中Carousel轮播的使用方法</a> <span class="text-muted">RemusrickCat</span> <div>本文实例为大家全面的解析了Bootstrap中Carousel的使用方法，供大家参考，具体内容如下源码文件：Carousel.scssCarousel.js实现原理：隐藏所有要显示的元素，然后指定当前要显示的为block，宽、高自适应源码分析：1、Html结构：主要分为以四个部分1.1、容器：最外层div，需要一个data-ride=”carousel”来指定为轮播放插件，并且提供一个Id，方便圆</div> </li> <li><a href="/article/1834107503080730624.htm" title="基于java+ssm+vue毕业设计源码合集（1-100）源码+文档+调试+讲解" target="_blank">基于java+ssm+vue毕业设计源码合集（1-100）源码+文档+调试+讲解</a> <span class="text-muted">小程序设计</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E8%AF%BE%E7%A8%8B%E8%AE%BE%E8%AE%A1/1.htm">课程设计</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>技术栈介绍：SSM（Spring、SpringMVC、MyBatis）框架搭配Vue前端框架是当前较为流行的项目开发技术栈。以下是详细的技術列表：1.后端技术：-Spring：一个开源的Java平台，提供了用于构建企业级应用程序的全面解决方案。-SpringMVC：Spring框架的一个子项目，用于构建Web应用程序，提供了处理请求、数据验证、视图解析等功能的模块。-MyBatis：一个优秀的持久</div> </li> <li><a href="/article/1834071199676723200.htm" title="移动WEB开发（第四天）__响应式布局" target="_blank">移动WEB开发（第四天）__响应式布局</a> <span class="text-muted">加蓓努力我先飞</span> <a class="tag" taget="_blank" href="/search/5.%E7%A7%BB%E5%8A%A8web%E5%BC%80%E5%8F%91%E8%B5%84%E6%96%99/1.htm">5.移动web开发资料</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>移动WEB开发（第四天）__响应式布局移动端WEB开发之响应式布局1.0响应式开发原理1.1响应式开发原理1.2响应式布局容器2.0bootstrap的介绍2.1Bootstrap简介2.2bootstrap优点2.3版本简介2.4bootstrap基本使用2.5bootstrap布局容器2.6bootstrap栅格系统3.0阿里百秀案例制作3.1技术选型移动端WEB开发之响应式布局1.0响应式开</div> </li> <li><a href="/article/1834035907284529152.htm" title="【 前端优化】Vue 3 性能优化技巧" target="_blank">【 前端优化】Vue 3 性能优化技巧</a> <span class="text-muted">Passion不晚</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Vue3性能优化技巧：让你的应用飞起来！大家好！今天我想跟大家分享一些关于Vue3性能优化的实用技巧。Vue3带来了很多新的特性和改进，但只有了解并应用这些优化技巧，我们才能真正发挥它们的优势，打造更高效的应用。接下来，我将深入探讨一些有效的性能优化策略，希望对你有所帮助！引言Vue3的发布让我们迎来了一个更加高效和灵活的前端框架。虽然Vue3本身已经进行了一些性能优化，但在实际开发中，我们仍然需</div> </li> <li><a href="/article/1833933291904921600.htm" title="前端框架有哪些？全面解析主流前端框架" target="_blank">前端框架有哪些？全面解析主流前端框架</a> <span class="text-muted">weixin_51069555</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a> <div>一、ReactReact是由Facebook开发和维护的一个前端框架，它专注于构建用户界面。React采用组件化的开发模式，允许开发者将用户界面拆分成多个可复用的组件。主要特点组件化:React的核心是组件，它允许开发者将界面拆分成独立的、可复用的组件，简化了UI的管理和维护。虚拟DOM:React使用虚拟DOM技术，通过在内存中创建一个虚拟的DOM树，减少了与真实DOM的直接操作，提高了性能。单</div> </li> <li><a href="/article/1833824231050276864.htm" title="(附论文)基于ssm的高校大学生党建系统(688)" target="_blank">(附论文)基于ssm的高校大学生党建系统(688)</a> <span class="text-muted">KK ???</span> <a class="tag" taget="_blank" href="/search/%E5%AA%92%E4%BD%93/1.htm">媒体</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>获取源码请滑到最底部访问官网项目配套调试视频和相对应的软件安装包1、项目描述具体请看视频演示2、项目开发工具开发工具：Idea或Eclipse数据库：MysqlJar包仓库：Maven前端框架：Vue2后端框架：SSM3、项目图片4、演示视频(附论文)基于ssm的高校大学生党建系统(688)</div> </li> <li><a href="/article/1833801035320225792.htm" title="Vue 生命周期与 TypeScript：深入理解组件生命周期" target="_blank">Vue 生命周期与 TypeScript：深入理解组件生命周期</a> <span class="text-muted">shiming8879</span> <a class="tag" taget="_blank" href="/search/typescript/1.htm">typescript</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Vue生命周期与TypeScript：深入理解组件生命周期引言Vue.js作为一种流行的前端框架，其组件生命周期是开发过程中不可或缺的一部分。理解并正确利用Vue的生命周期，可以帮助开发者构建更加健壮和可维护的应用。而当TypeScript与Vue结合使用时，这种优势得到了进一步的增强。TypeScript作为一种强类型语言，提供了类型检查和代码清晰性，使得Vue组件的生命周期管理变得更加高效和可</div> </li> <li><a href="/article/1833633348753387520.htm" title="css 个人喜欢的样式 速查笔记" target="_blank">css 个人喜欢的样式 速查笔记</a> <span class="text-muted">waterHBO</span> <a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>起因，目的:记录自己喜欢的，觉得比较好看的css.下次用的时候，直接复制，很方便。1.个人html模板，导入常用的link设置英语字体:Noto导入默认的css使用网络icon图标导入Bootstrapcss框架html-->2.常用css模板todo,以后再增加。*{font-family:"NotoSerif",system-ui;font-optical-sizing:auto;}Noto字</div> </li> <li><a href="/article/1833503623452127232.htm" title="(代码可运行)Bootstrap框架的HTML示例" target="_blank">(代码可运行)Bootstrap框架的HTML示例</a> <span class="text-muted">程序员大侠</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/CSS/1.htm">CSS</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/bootstrap/1.htm">bootstrap</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Bootstrap：一套流行的前端开发框架，基于HTML、CSS和JavaScript，适用于快速构建响应式Web应用。以下是一个使用Bootstrap构建的简单响应式Web应用的HTML示例：BootstrapExampleHello,Bootstrap!CardtitleSomequickexampletexttobuildonthecardtitleandmakeupthebulkofthe</div> </li> <li><a href="/article/1833202561855877120.htm" title="基于微前端qiankun的多页签缓存方案实践" target="_blank">基于微前端qiankun的多页签缓存方案实践</a> <span class="text-muted">JavaMonsterr</span> <a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a><a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/%E8%AE%A1%E7%AE%97%E6%9C%BA/1.htm">计算机</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E7%BC%93%E5%AD%98/1.htm">缓存</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>本文梳理了基于阿里开源微前端框架qiankun，实现多页签及子应用缓存的方案，同时还类比了多个不同方案之间的区别及优劣势，为使用微前端进行多页签开发的同学，提供一些参考。一、多页签是什么？我们常见的浏览器多页签、编辑器多页签，从产品角度来说，就是为了能够实现用户访问可记录，快速定位工作区等作用；那对于单页应用，可以通过实现多页签，对用户的访问记录进行缓存，从而提供更好的用户体验。前端可以通过多种方</div> </li> <li><a href="/article/1833114030340927488.htm" title="前端框架有哪些 如何选择和优缺点" target="_blank">前端框架有哪些 如何选择和优缺点</a> <span class="text-muted">大白菜程序猿</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a> <div>前端框架是用于构建用户界面的工具和库，它们提供了一套预定义的组件、样式和交互模式，帮助开发者更高效地开发前端应用。目前市面上存在多种前端框架，每种框架都有其独特的优势和缺点。以下是一些常见的前端框架及其优势和缺点的概述：常见前端框架React优势：组件化：React鼓励开发者通过创建可复用的组件来构建应用，这有助于提高代码的可维护性和可重用性。高性能：React使用虚拟DOM来优化性能，减少了真实</div> </li> <li><a href="/article/1833107980619444224.htm" title="【鸿蒙实战开发】HarmonyOS-状态管理" target="_blank">【鸿蒙实战开发】HarmonyOS-状态管理</a> <span class="text-muted">代码改变世界996</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%B8%BF%E8%92%99/1.htm">鸿蒙</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%8D%93/1.htm">安卓</a><a class="tag" taget="_blank" href="/search/harmonyos/1.htm">harmonyos</a><a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BA/1.htm">华为</a><a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/%E9%B8%BF%E8%92%99/1.htm">鸿蒙</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%8D%93/1.htm">安卓</a> <div>前言本文基于鸿蒙Nextbeta1，beta2的新特性暂未深入研究和使用，且目前beta2已经可以试用。现在客户端所流行的结构无非就是MVVM或者MVI。MVI的特点是不仅把数据变化做了响应，连交互都封装了，鸿蒙目前最适合的是MVVM。鸿蒙使用声明式UI开发框架，那么和所有的流行的大前端框架一样，我们需要处理前端组件间的数据通信和变化响应，也就是所谓的状态管理。而MVVM中的viewmodel可以</div> </li> <li><a href="/article/1833067551303757824.htm" title="bootstrap直接对form表进行校验" target="_blank">bootstrap直接对form表进行校验</a> <span class="text-muted">IT和金融</span> <div>form表单可以前端进行校验，当然也可以直接采用bootstrap对form表单进行校验如form表单中有等相关字段进行校验，可直接用bootstrap的校验，方式如下：$("#auth_add_form").bootstrapValidator({//auth_add_form为form的id值feedbackIcons:{valid:'glyphiconglyphicon-ok',invali</div> </li> <li><a href="/article/1832861643386744832.htm" title="node模块" target="_blank">node模块</a> <span class="text-muted">weiweiweb888</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/bootstrap/1.htm">bootstrap</a> <div>模块系统模块化介绍传统开发的问题随着项目的扩大，然后代码就越来越庞大，如果没有很好的规划，后期维护非常复杂（甚至就维护不了）。比如：前端html中有很多特效会依赖js文件。比如：index.html:bootstrap以上就是一个依赖关系，bootstrap依赖于jquery。先引入jquery后引入bootstrap。而且随着项目的扩大，我们的html页面也就随之增加，并且每一个html页面都会</div> </li> <li><a href="/article/1832852944433803264.htm" title="java版本ERP管理系统源码 Spring Cloud alibaba Spring Boot MybatisPlus Redis VUE3 ElementUI 微服务" target="_blank">java版本ERP管理系统源码 Spring Cloud alibaba Spring Boot MybatisPlus Redis VUE3 ElementUI 微服务</a> <span class="text-muted">m0_66404702</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a><a class="tag" taget="_blank" href="/search/ERP%E7%AE%A1%E7%90%86%E7%B3%BB%E7%BB%9F%E6%BA%90%E7%A0%81/1.htm">ERP管理系统源码</a> <div>在当今数字化浪潮的推动下，企业对于高效、稳定且易于扩展的管理系统需求日益增长。为了满足这一需求，我们精心打造了一款基于Java技术的鸿鹄ERP（EnterpriseResourcePlanning）管理系统。该系统充分利用了SpringCloudAlibaba、SpringBoot、MybatisPlus、Redis等先进技术栈，并结合前端框架VUE3和ElementUI，构建了一个功能丰富、性能</div> </li> <li><a href="/article/1832716538570960896.htm" title="mirantis OpenStack9.0在virtualbox上的部署" target="_blank">mirantis OpenStack9.0在virtualbox上的部署</a> <span class="text-muted">Caroline_33</span> <a class="tag" taget="_blank" href="/search/openstack/1.htm">openstack</a><a class="tag" taget="_blank" href="/search/mirantis/1.htm">mirantis</a><a class="tag" taget="_blank" href="/search/virtualbox/1.htm">virtualbox</a> <div>实验环境安装包-VirtualBox-4.3.12-93733-Win.exe-Oracle_VM_VirtualBox_Extension_Pack-5.1.2-108956.vbox-extpack-Mirantis_Openstack9.0.iso-bootstrap.zip-mirrors.zip-xtfp-xshell实验机器-cpu:i3-3220以上-Ram:至少8G说明-保证内存至</div> </li> <li><a href="/article/1832614292248162304.htm" title="前端技术演进与未来发展趋势探究" target="_blank">前端技术演进与未来发展趋势探究</a> <span class="text-muted">科技语者</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>该论文为AI生成，请勿运用到正式的论文上，以下仅供参考一、引言1.1研究背景在当今数字化时代，前端领域呈现出蓬勃发展的态势。随着互联网的普及和技术的不断进步，前端技术在构建用户界面、提升用户体验方面发挥着至关重要的作用。从早期的静态网页到如今的动态交互界面，前端技术经历了巨大的变革。在过去的几十年里，前端技术的发展可谓日新月异。从1990年第一个Web浏览器的诞生，到如今各种先进的前端框架和工具的</div> </li> <li><a href="/article/1832563233609838592.htm" title="es遇到的问题" target="_blank">es遇到的问题</a> <span class="text-muted">云帆@</span> <a class="tag" taget="_blank" href="/search/elasticsearch/1.htm">elasticsearch</a><a class="tag" taget="_blank" href="/search/elasticsearch/1.htm">elasticsearch</a> <div>一、目录ERROR:[1]bootstrapchecksfailed.Youmustaddressthepointsdescribedinthefollowing[1]linesbeforestartingElasticsearch.ERROR:Elasticsearchexitedunexpectedly,withexitcode78二、实现ERROR:[1]bootstrapchecksfai</div> </li> <li><a href="/article/1832488979845443584.htm" title="JS基础-ClassList -移动端插件的引入-touch事件-sessionStorage 和 localStorage" target="_blank">JS基础-ClassList -移动端插件的引入-touch事件-sessionStorage 和 localStorage</a> <span class="text-muted">垦利不</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>目录1.classList属性添加类删除类切换类检查类是否存在替换类移动端touch事件2.消除点击延迟Fastclick插件的引入引入FastClick初始化3.Swiper插件的引入和使用通过CDN引入通过npm安装（vue中建议）使用SwiperHTML结构初始化Swiper4.zyMedia插件简介4.1下载与引入4.2使用4.3js初始化4.4参数说明5.bootstrap的安装和使用5</div> </li> <li><a href="/article/1832461120733016064.htm" title="前端开发必看：2024年最受欢迎的前端框架大盘点" target="_blank">前端开发必看：2024年最受欢迎的前端框架大盘点</a> <span class="text-muted">码上飞扬</span> <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E5%BC%80%E5%8F%91/1.htm">编程开发</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/React/1.htm">React</a><a class="tag" taget="_blank" href="/search/Vue.js/1.htm">Vue.js</a><a class="tag" taget="_blank" href="/search/Angular/1.htm">Angular</a><a class="tag" taget="_blank" href="/search/Svelte/1.htm">Svelte</a><a class="tag" taget="_blank" href="/search/Ember.js/1.htm">Ember.js</a> <div>在现代Web开发中，前端框架的选择对项目的成功与否至关重要。随着技术的不断发展，前端框架层出不穷，各自有着不同的特点和适用场景。本文将为您介绍目前最受欢迎的前端框架，帮助您选择最适合您项目的工具。1.React概述React是一个由Facebook开发的开源JavaScript库，专注于构建用户界面。它通过组件化的方式让开发者能够高效地管理UI状态。特点组件化：React允许开发者将UI拆分为可复</div> </li> <li><a href="/article/1832414969761722368.htm" title="electron调用python_Electron+Python界面开发（通过zerorpc）" target="_blank">electron调用python_Electron+Python界面开发（通过zerorpc）</a> <span class="text-muted">weixin_39574050</span> <div>Python开发GUI要么太繁琐要么太丑，而前端技术恰巧是最适合做漂亮UI的。所以考虑将Python和前端技术结合，通过进程通信和前端框架交流，打包成一个完整的桌面APP。教程分成两种实现方式，一个是zerorpc进程通信一个是http通信。这篇教程介绍zerorpc的方式，流程如下：start|V+--------------------+||start|electron+-----------</div> </li> <li><a href="/article/1832394426819899392.htm" title="前端框架有哪些？" target="_blank">前端框架有哪些？</a> <span class="text-muted">赎罪゛</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>熟悉掌握HTML、服务器端脚本语言、CSS和JavaScript之后，学习Web框架可以加快Web开发速度，节约时间。PHP程序员可选的框架包括CakePHP、CodeIgniter、Zend等，Python程序员喜欢使用Django和webpy，Ruby程序员常用RoR。随着Web越来越规范和标准的统一，Web组件化技术不断革新，移动端开发不断升华，以下是一些常见开源前端框架：Bootstrap</div> </li> <li><a href="/article/1832309059676631040.htm" title="CoreUI免费Laravel管理模板安装与使用指南" target="_blank">CoreUI免费Laravel管理模板安装与使用指南</a> <span class="text-muted">皮静滢Annette</span> <div>CoreUI免费Laravel管理模板安装与使用指南coreui-free-laravel-admin-templateCoreUIFreeLaravelBootstrapAdminTemplate项目地址:https://gitcode.com/gh_mirrors/co/coreui-free-laravel-admin-template1.项目目录结构及介绍CoreUI免费Laravel管理</div> </li> <li><a href="/article/118.htm" title="异常的核心类Throwable" target="_blank">异常的核心类Throwable</a> <span class="text-muted">无量</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%BA%90%E7%A0%81/1.htm">源码</a><a class="tag" taget="_blank" href="/search/%E5%BC%82%E5%B8%B8%E5%A4%84%E7%90%86/1.htm">异常处理</a><a class="tag" taget="_blank" href="/search/exception/1.htm">exception</a> <div>java异常的核心是Throwable，其他的如Error和Exception都是继承的这个类 里面有个核心参数是detailMessage，记录异常信息，getMessage核心方法，获取这个参数的值，我们可以自己定义自己的异常类，去继承这个Exception就可以了，方法基本上，用父类的构造方法就OK，所以这么看异常是不是很easy package com.natsu; </div> </li> <li><a href="/article/245.htm" title="mongoDB 游标（cursor） 实现分页 迭代" target="_blank">mongoDB 游标（cursor） 实现分页 迭代</a> <span class="text-muted">开窍的石头</span> <a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a> <div>上篇中我们讲了mongoDB 中的查询函数，现在我们讲mongo中如何做分页查询      如何声明一个游标        var mycursor = db.user.find({_id:{$lte:5}});       迭代显示游标数</div> </li> <li><a href="/article/372.htm" title="MySQL数据库INNODB 表损坏修复处理过程" target="_blank">MySQL数据库INNODB 表损坏修复处理过程</a> <span class="text-muted">0624chenhong</span> <a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>最近mysql数据库经常死掉，用命令net stop mysql命令也无法停掉，关闭Tomcat的时候，出现Waiting for N instance(s) to be deallocated 信息。查了下，大概就是程序没有对数据库连接释放，导致Connection泄露了。因为用的是开元集成的平台，内部程序也不可能一下子给改掉的，就验证一下咯。启动Tomcat,用户登录系统，用netstat -</div> </li> <li><a href="/article/499.htm" title="剖析如何与设计人员沟通" target="_blank">剖析如何与设计人员沟通</a> <span class="text-muted">不懂事的小屁孩</span> <a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a> <div>最近做图烦死了，不停的改图，改图……。烦，倒不是因为改，而是反反复复的改，人都会死。很多需求人员不知该如何与设计人员沟通，不明白如何使设计人员知道他所要的效果，结果只能是沟通变成了扯淡，改图变成了应付。 那应该如何与设计人员沟通呢？ 我认为设计人员与需求人员先天就存在语言障碍。对一个合格的设计人员来说，整天玩的都是点、线、面、配色，哪种构图看起来协调；哪种配色看起来合理心里跟明镜似的，</div> </li> <li><a href="/article/626.htm" title="qq空间刷评论工具" target="_blank">qq空间刷评论工具</a> <span class="text-muted">换个号韩国红果果</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a> <div> var a=document.getElementsByClassName('textinput'); var b=[]; for(var m=0;m<a.length;m++){ if(a[m].getAttribute('placeholder')!=null) b.push(a[m]) } var l</div> </li> <li><a href="/article/753.htm" title="S2SH整合之session" target="_blank">S2SH整合之session</a> <span class="text-muted">灵静志远</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/AOP/1.htm">AOP</a><a class="tag" taget="_blank" href="/search/struts/1.htm">struts</a><a class="tag" taget="_blank" href="/search/session/1.htm">session</a> <div>错误信息： Caused by: org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'cartService': Scope 'session' is not active for the current thread; consider defining a scoped</div> </li> <li><a href="/article/880.htm" title="xmp标签" target="_blank">xmp标签</a> <span class="text-muted">a-john</span> <a class="tag" taget="_blank" href="/search/%E6%A0%87%E7%AD%BE/1.htm">标签</a> <div>今天在处理数据的显示上遇到一个问题： var html = '<li><div class="pl-nr"><span class="user-name">' + user + '</span>' + text + '</div></li>'; ulComme</div> </li> <li><a href="/article/1007.htm" title="Ajax的常用技巧（2）---实现Web页面中的级联菜单" target="_blank">Ajax的常用技巧（2）---实现Web页面中的级联菜单</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a> <div>在网络上显示数据，往往只显示数据中的一部分信息，如文章标题，产品名称等。如果浏览器要查看所有信息，只需点击相关链接即可。在web技术中，可以采用级联菜单完成上述操作。根据用户的选择，动态展开，并显示出对应选项子菜单的内容。 在传统的web实现方式中，一般是在页面初始化时动态获取到服务端数据库中对应的所有子菜单中的信息，放置到页面中对应的位置，然后再结合CSS层叠样式表动态控制对应子菜单的显示或者隐</div> </li> <li><a href="/article/1134.htm" title="天-安-门，好高" target="_blank">天-安-门，好高</a> <span class="text-muted">atongyeye</span> <a class="tag" taget="_blank" href="/search/%E6%83%85%E6%84%9F/1.htm">情感</a> <div>    我是85后，北漂一族，之前房租1100，因为租房合同到期，再续，房租就要涨150。最近网上新闻，地铁也要涨价。算了一下，涨价之后，每次坐地铁由原来2块变成6块。仅坐地铁费用，一个月就要涨200。内心苦痛。     晚上躺在床上一个人想了很久，很久。        我生在农</div> </li> <li><a href="/article/1261.htm" title="android 动画" target="_blank">android 动画</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/%E9%80%8F%E6%98%8E%E5%BA%A6/1.htm">透明度</a><a class="tag" taget="_blank" href="/search/%E5%B9%B3%E7%A7%BB/1.htm">平移</a><a class="tag" taget="_blank" href="/search/%E7%BC%A9%E6%94%BE/1.htm">缩放</a><a class="tag" taget="_blank" href="/search/%E6%97%8B%E8%BD%AC/1.htm">旋转</a> <div>android的动画有两种  tween动画和Frame动画   tween动画;,透明度,缩放,旋转,平移效果   Animation   动画 AlphaAnimation 渐变透明度 RotateAnimation 画面旋转 ScaleAnimation 渐变尺寸缩放 TranslateAnimation 位置移动 Animation</div> </li> <li><a href="/article/1388.htm" title="查看本机网络信息的cmd脚本" target="_blank">查看本机网络信息的cmd脚本</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/cmd/1.htm">cmd</a> <div>@echo 您的用户名是：%USERDOMAIN%\%username%>"%userprofile%\网络参数.txt" @echo 您的机器名是：%COMPUTERNAME%>>"%userprofile%\网络参数.txt" @echo ___________________>>"%userprofile%\</div> </li> <li><a href="/article/1515.htm" title="plsql 清除登录过的用户" target="_blank">plsql 清除登录过的用户</a> <span class="text-muted">征客丶</span> <a class="tag" taget="_blank" href="/search/plsql/1.htm">plsql</a> <div>tools---preferences----logon history---history  把你想要删除的删除 -------------------------------------------------------------------- 若有其他凝问或文中有错误，请及时向我指出， 我好及时改正，同时也让我们一起进步。 email ： binary_spac</div> </li> <li><a href="/article/1642.htm" title="【Pig一】Pig入门" target="_blank">【Pig一】Pig入门</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/pig/1.htm">pig</a> <div>Pig安装 1.下载pig   wget http://mirror.bit.edu.cn/apache/pig/pig-0.14.0/pig-0.14.0.tar.gz   2. 解压配置环境变量      如果Pig使用Map/Reduce模式，那么需要在环境变量中，配置HADOOP_HOME环境变量   expor</div> </li> <li><a href="/article/1769.htm" title="Java 线程同步几种方式" target="_blank">Java 线程同步几种方式</a> <span class="text-muted">BlueSkator</span> <a class="tag" taget="_blank" href="/search/volatile/1.htm">volatile</a><a class="tag" taget="_blank" href="/search/synchronized/1.htm">synchronized</a><a class="tag" taget="_blank" href="/search/ThredLocal/1.htm">ThredLocal</a><a class="tag" taget="_blank" href="/search/ReenTranLock/1.htm">ReenTranLock</a><a class="tag" taget="_blank" href="/search/Concurrent/1.htm">Concurrent</a> <div>为何要使用同步？      java允许多线程并发控制，当多个线程同时操作一个可共享的资源变量时（如数据的增删改查），      将会导致数据不准确，相互之间产生冲突，因此加入同步锁以避免在该线程没有完成操作之前，被其他线程的调用，      从而保证了该变量的唯一性和准确性。 1.同步方法&</div> </li> <li><a href="/article/1896.htm" title="StringUtils判断字符串是否为空的方法（转帖）" target="_blank">StringUtils判断字符串是否为空的方法（转帖）</a> <span class="text-muted">BreakingBad</span> <a class="tag" taget="_blank" href="/search/null/1.htm">null</a><a class="tag" taget="_blank" href="/search/StringUtils/1.htm">StringUtils</a><a class="tag" taget="_blank" href="/search/%E2%80%9C%E2%80%9D/1.htm">“”</a> <div>转帖地址：http://www.cnblogs.com/shangxiaofei/p/4313111.html   public static boolean isEmpty(String str)   　　判断某字符串是否为空，为空的标准是 str== null  或 str.length()== 0  </div> </li> <li><a href="/article/2023.htm" title="编程之美-分层遍历二叉树" target="_blank">编程之美-分层遍历二叉树</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E4%B9%8B%E7%BE%8E/1.htm">编程之美</a> <div> import java.util.ArrayList; import java.util.LinkedList; import java.util.List; public class LevelTraverseBinaryTree { /** * 编程之美 分层遍历二叉树 * 之前已经用队列实现过二叉树的层次遍历，但这次要求输出换行，因此要</div> </li> <li><a href="/article/2150.htm" title="jquery取值和ajax提交复习记录" target="_blank">jquery取值和ajax提交复习记录</a> <span class="text-muted">chengxuyuancsdn</span> <a class="tag" taget="_blank" href="/search/jquery%E5%8F%96%E5%80%BC/1.htm">jquery取值</a><a class="tag" taget="_blank" href="/search/ajax%E6%8F%90%E4%BA%A4/1.htm">ajax提交</a> <div> // 取值 // alert($("input[name='username']").val()); // alert($("input[name='password']").val()); // alert($("input[name='sex']:checked").val()); // alert($("</div> </li> <li><a href="/article/2277.htm" title="推荐国产工作流引擎嵌入式公式语法解析器-IK Expression" target="_blank">推荐国产工作流引擎嵌入式公式语法解析器-IK Expression</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BA%94%E7%94%A8%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">应用服务器</a><a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/Excel/1.htm">Excel</a><a class="tag" taget="_blank" href="/search/%E5%B5%8C%E5%85%A5%E5%BC%8F/1.htm">嵌入式</a> <div>这个开源软件包是国内的一位高手自行研制开发的，正如他所说的一样，我觉得它可以使一个工作流引擎上一个台阶。。。。。。欢迎大家使用，并提出意见和建议。。。 ----------转帖--------------------------------------------------- IK Expression是一个开源的（OpenSource），可扩展的（Extensible），基于java语言</div> </li> <li><a href="/article/2404.htm" title="关于系统中使用多个PropertyPlaceholderConfigurer的配置及PropertyOverrideConfigurer" target="_blank">关于系统中使用多个PropertyPlaceholderConfigurer的配置及PropertyOverrideConfigurer</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div>1、PropertyPlaceholderConfigurer Spring中PropertyPlaceholderConfigurer这个类，它是用来解析Java Properties属性文件值，并提供在spring配置期间替换使用属性值。接下来让我们逐渐的深入其配置。 基本的使用方法是：(1) <bean id="propertyConfigurerForWZ&q</div> </li> <li><a href="/article/2531.htm" title="二叉树:二叉搜索树" target="_blank">二叉树:二叉搜索树</a> <span class="text-muted">dieslrae</span> <a class="tag" taget="_blank" href="/search/%E4%BA%8C%E5%8F%89%E6%A0%91/1.htm">二叉树</a> <div>    所谓二叉树,就是一个节点最多只能有两个子节点,而二叉搜索树就是一个经典并简单的二叉树.规则是一个节点的左子节点一定比自己小,右子节点一定大于等于自己(当然也可以反过来).在树基本平衡的时候插入,搜索和删除速度都很快,时间复杂度为O(logN).但是,如果插入的是有序的数据,那效率就会变成O(N),在这个时候,树其实变成了一个链表. tree代码: </div> </li> <li><a href="/article/2658.htm" title="C语言字符串函数大全" target="_blank">C语言字符串函数大全</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/function/1.htm">function</a> <div>C语言字符串函数大全     函数名: stpcpy 功 能: 拷贝一个字符串到另一个 用 法: char *stpcpy(char *destin, char *source); 程序例:   #include <stdio.h> #include <string.h>   int main</div> </li> <li><a href="/article/2785.htm" title="友盟统计页面技巧" target="_blank">友盟统计页面技巧</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/%E6%8A%80%E5%B7%A7/1.htm">技巧</a> <div>在基类调用就可以了, 基类ViewController示例代码 -(void)viewWillAppear:(BOOL)animated { [super viewWillAppear:animated]; [MobClick beginLogPageView:[NSString stringWithFormat:@"%@",self.class]]; </div> </li> <li><a href="/article/2912.htm" title="window下在同一台机器上安装多个版本jdk，修改环境变量不生效问题处理办法" target="_blank">window下在同一台机器上安装多个版本jdk，修改环境变量不生效问题处理办法</a> <span class="text-muted">flyvszhb</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jdk/1.htm">jdk</a> <div>window下在同一台机器上安装多个版本jdk，修改环境变量不生效问题处理办法 本机已经安装了jdk1.7，而比较早期的项目需要依赖jdk1.6，于是同时在本机安装了jdk1.6和jdk1.7. 安装jdk1.6前，执行java -version得到 C:\Users\liuxiang2>java -version java version "1.7.0_21&quo</div> </li> <li><a href="/article/3039.htm" title="Java在创建子类对象的同时会不会创建父类对象" target="_blank">Java在创建子类对象的同时会不会创建父类对象</a> <span class="text-muted">happyqing</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%88%9B%E5%BB%BA/1.htm">创建</a><a class="tag" taget="_blank" href="/search/%E5%AD%90%E7%B1%BB%E5%AF%B9%E8%B1%A1/1.htm">子类对象</a><a class="tag" taget="_blank" href="/search/%E7%88%B6%E7%B1%BB%E5%AF%B9%E8%B1%A1/1.htm">父类对象</a> <div>  1.在thingking in java 的第四版第六章中明确的说了，子类对象中封装了父类对象，   2."When you create an object of the derived class, it contains within it a subobject of the base class. This subobject is the sam</div> </li> <li><a href="/article/3166.htm" title="跟我学spring3 目录贴及电子书下载" target="_blank">跟我学spring3 目录贴及电子书下载</a> <span class="text-muted">jinnianshilongnian</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div>    一、《跟我学spring3》电子书下载地址： 《跟我学spring3》  （1-7 和 8-13） http://jinnianshilongnian.iteye.com/blog/pdf     跟我学spring3系列 word原版 下载     二、 源代码下载 最新依</div> </li> <li><a href="/article/3420.htm" title="第12章 Ajax（上）" target="_blank">第12章 Ajax（上）</a> <span class="text-muted">onestopweb</span> <a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a> <div>index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/</div> </li> <li><a href="/article/3547.htm" title="BI and EIM 4.0 at a glance" target="_blank">BI and EIM 4.0 at a glance</a> <span class="text-muted">blueoxygen</span> <a class="tag" taget="_blank" href="/search/BO/1.htm">BO</a> <div>http://www.sap.com/corporate-en/press.epx?PressID=14787   有机会研究下EIM家族的两个新产品~~~~   New features of the 4.0 releases of BI and EIM solutions include: Real-time in-memory computing – </div> </li> <li><a href="/article/3674.htm" title="Java线程中yield与join方法的区别" target="_blank">Java线程中yield与join方法的区别</a> <span class="text-muted">tomcat_oracle</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>长期以来，多线程问题颇为受到面试官的青睐。虽然我个人认为我们当中很少有人能真正获得机会开发复杂的多线程应用(在过去的七年中，我得到了一个机会)，但是理解多线程对增加你的信心很有用。之前，我讨论了一个wait()和sleep()方法区别的问题，这一次，我将会讨论join()和yield()方法的区别。坦白的说，实际上我并没有用过其中任何一个方法，所以，如果你感觉有不恰当的地方，请提出讨论。 &nb</div> </li> <li><a href="/article/3801.htm" title="android Manifest.xml选项" target="_blank">android Manifest.xml选项</a> <span class="text-muted">阿尔萨斯</span> <a class="tag" taget="_blank" href="/search/Manifest/1.htm">Manifest</a> <div>结构 继承关系 public final class Manifest extends Objectjava.lang.Objectandroid.Manifest 内部类 class Manifest.permission权限 class Manifest.permission_group权限组 构造函数 public Manifest () 详细 androi</div> </li> <li><a href="/article/3928.htm" title="Oracle实现类split函数的方" target="_blank">Oracle实现类split函数的方</a> <span class="text-muted">zhaoshijie</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a> <div>关键字：Oracle实现类split函数的方 项目里需要保存结构数据，批量传到后他进行保存，为了减小数据量，子集拼装的格式，使用存储过程进行保存。保存的过程中需要对数据解析。但是oracle没有Java中split类似的函数。从网上找了一个，也补全了一下。 CREATE OR REPLACE TYPE t_split_100 IS TABLE OF VARCHAR2(100); cr</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类：</strong> <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved. <!-- <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>--> </div> </div> </footer> <!-- 代码高亮 --> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>