【笔记】《Bootstrap实战》——第2章 作品展示站点

其他 2020-05-18 11:41:37 阅读次数: 0

文章目录

一、搭建传送带（轮播图）

文档：https://getbootstrap.com/docs/3.4/javascript/#carousel

文档中的示例：Carousel Template for Bootstrap

1.主要代码

  • 进度指示器
<div id="homepage-feature" class="carousel slide">
    <ol class="carousel-indicators">
        <li data-target="#homepage-feature" data-slide-to="0" class="active"></li>
        <li data-target="#homepage-feature" data-slide-to="1" ></li>
        <li data-target="#homepage-feature" data-slide-to="2" ></li>
        <li data-target="#homepage-feature" data-slide-to="3" ></li>
    </ol>
  • 图片项
    <div class="carousel-inner">
        <div class="item active">
            <img >
        </div>
        <div class="item ">
            <img >
        </div>
        ...
    </div>
  • 切换按钮
    <a class="left carousel-control" href="#homepage-feature" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#homepage-feature" data-slide="next">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
</div>

2.使用说明

  • https://getbootstrap.com/docs/3.4/dist/css/bootstrap.min.css
<!-- Bootstrap core CSS -->
    <link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
  • https://getbootstrap.com/docs/3.4/examples/carousel/carousel.css
<!-- Custom styles for this template -->
<link href="carousel.css" rel="stylesheet">

  • #homepage-feature：传送带主标识ID

  • .carousel：用于样式设置

  • data-target="#homepage-feature"：数据目标必须绑定主标识ID#homepage-feature

  • data-slide-to必须从0开始

  • active：可见项（js控制其循环）

  • .carousel-inner：传送项（可为图片或自定义内容）

  • .carousel-control：切换按钮

  • 调整自动切换时间5s到8s

$( document ).ready(function() {

	// Set carousel options
	$('.carousel').carousel({
	  interval: 8000 // 8 seconds vs. default 5
	});

});

二、创建响应式分栏

1.网格系统引入

文档：网格系统：https://getbootstrap.com/docs/3.4/css/#grid

  • Bootstrap内置12栏网格系统，col-12表示全宽，col-6表示半宽，col-4为1/3宽。类推
  • Bootstrap内置的浏览器屏幕断点：768px,992px,1200px
  • 小断点之上使用三栏，class=”col-sm-4”
<div class="container" accesskey="">
    <div class="row" accesskey="">
        <div class="col-sm-4">
            <h2>Welcome!</h2>
        </div>
        <div class="col-sm-4">
            <h2>Recent Updates</h2>
        </div>
        <div class="col-sm-4">
            <h2>Our Team</h2>
        </div>
    </div>
</div>

2.使用说明

  • container类 约束内容宽度，使其页面居中。
  • row类 包装3个栏，并留出左右外边距
  • container类和row类都设清除，可包含浮动元素的同时清除之前的浮动元素

三、链接转按钮

1.关键类说明

  • btn类：链接转按钮样式
  • btn-primary类：按钮变主品牌颜色
  • pull-right类：把链接浮动到右侧，使其占据更大空间，便于发现和点击

2.代码

<a class="btn btn-primary pull-right" href="#">文字内容</a>

四、理解LESS

Less 快速入门 | Less.js 中文文档 - Less 中文网

1.嵌套（Nesting）

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

转为css后：

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

2.变量（Variables）

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}

转为css后：

#header {
  width: 10px;
  height: 20px;
}

3.混合（Mixins）

  • 混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。定义了一个类（class）如下：
.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
  • 在其它规则集中使用这些属性，只需输入所需属性的类（class）名称即可，如下所示：
#menu a {
  color: #111;
  .bordered();
}

.post a {
  color: red;
  .bordered();
}

4.运算（Operations）

  • 算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义，则忽略单位。无效的单位换算例如：px 到 cm 或 rad 到 % 的转换。
// 所有操作数被转换成相同的单位
@conversion-1: 5cm + 10mm; // 结果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm

// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // 结果是 4px

// example with variables
@base: 5%;
@filler: @base * 2; // 结果是 10%
@other: @base + @filler; // 结果是 15%

5.导入（Importing）

  • 如果导入的文件是 .less 扩展名，则可以将扩展名省略掉
@import "library"; // library.less
@import "typo.css";

五、定制LESS文件

1.准备工作

  • __main.less是bootstrap.less的副本
  • 复制variables.less到less根目录（和bootstrap同级）并重命名为_variables.less
  • 打开并修改如下对应部分内容：
// Grays
// -------------------------

@gray-darker:            #222;
@gray-dark:              #454545;
@gray:                   #777;
@gray-light:             #aeaeae;
@gray-lighter:           #ccc;
@gray-lightest:          #ededed;
@off-white:           	 #fafafa;
  • 修改变量@brand-primary的值
// Brand colors
// -------------------------

@brand-primary:         #c1ba62;

2.导入新变量

  • 打开 __main.less，导入_variables.less
  • 编译__main.less到css/main.css
  • 刷新index.html（按钮和导航栏颜色发生变化）

3.编辑导航条变量

@navbar-height:                    64px;
@navbar-margin-bottom:             0; // was @line-height-computed

@navbar-default-color:             @gray;
@navbar-default-bg:                #fff;
@navbar-default-border:            @gray-light; // darken(@navbar-default-bg, 9.5%);

// Navbar links
@navbar-default-link-color:                @navbar-default-color;
@navbar-default-link-hover-color:          @link-hover-color;
@navbar-default-link-hover-bg:             @off-white;
@navbar-default-link-active-color:         @link-hover-color;
@navbar-default-link-active-bg:            @gray-lightest;
@navbar-default-link-disabled-color:       @gray-lighter;
@navbar-default-link-disabled-bg:          transparent;
  • 第259行开始（或附近）
原值为： 
 
 
// Basics of a navbar
@navbar-height:                    50px;
@navbar-margin-bottom:             @line-height-computed;
...
@navbar-default-color:             #777;
@navbar-default-bg:                #f8f8f8;
@navbar-default-border:            darken(@navbar-default-bg, 6.5%);

// Navbar links
@navbar-default-link-color:                #777;
@navbar-default-link-hover-color:          #333;
@navbar-default-link-hover-bg:             transparent;
@navbar-default-link-active-color:         #555;
@navbar-default-link-active-bg:            darken(@navbar-default-bg, 6.5%);
@navbar-default-link-disabled-color:       #ccc;
@navbar-default-link-disabled-bg:          transparent;

 
 
     
  
  • 保存修改、编译并刷新
    •  
  
  • 导航条效果： 
   
       
    
    • 高度增加64px；
      •  
    
    • 背景颜色变白；
      •  
    
    • 底部边框变暗
      •  
    
    • 导航项背景悬停或活动时都变暗
      •  
    
    • 链接文本颜色悬停变色（#c1ba62）
      •  
   
     
    •  
 
 
 
 
 
六、添加Logo图片
 
 
1.加img
 
 
<a class="navbar-brand" href="index.html">Bootstrappin'</a>

 
 
替换为
 
 
<a class="navbar-brand" href="index.html"><img src="img/logo.png" alt="Bootstrappin'" width="120"></a>

 
 
2.调整导航条内边距
 
 
     
  
  • navbar.less->_navbar.less
    •  
  
  • 150行左右位置找到如下内容：
    •  
 
 
 
.navbar-brand {
  float: left;
  padding: @navbar-padding-vertical @navbar-padding-horizontal;

 
 
     
  
  • 修改padding为：
    •  
 
 
 
padding: 22px 30px 0 15px;

 
 
     
  
  • 替换__main.less中bootstrap/navbar.less为_navbar.less
    •  
  
  • 保存修改、编译并刷新
    •  
  
  • 查看，导航条已经对齐
    •  
 
 
 
 
 
七、调整导航项内边距
 
 
     
  
  • 在_navbar.less找到如下内容（第240行左右）：
    •  
 
 
 
// Uncollapse the nav
  @media (min-width: @grid-float-breakpoint) {
    float: left;
    margin: 0;

    > li {
      float: left;
      > a {
        padding-top: ((@navbar-height - @line-height-computed) / 2);
        padding-bottom: ((@navbar-height - @line-height-computed) / 2);
      }
    }
  }

 
 
     
  
  • 替换相应内容为：
    •  
 
 
 
    > a {
        // padding-top: ((@navbar-height - @line-height-computed) / 2);
        // padding-bottom: ((@navbar-height - @line-height-computed) / 2);
        padding: 30px 30px 14px;
		    font-size: 18px;
      }

 
 
     
  
  • 保存修改、编译并刷新
    •  
  
  • 查看，导航项已经对齐logo基线
    •  
 
 
 
 
 
八、添加图标
 
 
1.使用BootStrap自带的Glyphicons
 
 
 
  
文档：https://getbootstrap.com/docs/3.4/components/#glyphicons
 
 
 
 
     
  
  • 文本前添加带有类名的span标签即可<span class="glyphicon glyphicon-iconname">
    •  
 
 
 
  <ul class="nav navbar-nav">
    <li class="active"><a href="index.html">
        <span class="glyphicon glyphicon-home"></span> Home
    </a></li>
    <li><a href="#">
        <span class="glyphicon glyphicon-picture"></span> Portfolio
    </a></li>
    <li><a href="#">
        <span class="glyphicon glyphicon-user"></span> Team
    </a></li>
    <li><a href="#">
        <span class="glyphicon glyphicon-envelope"></span> Contact
    </a></li>
  </ul>

 
 
     
  
  • 保存修改、编译并刷新
    •  
  
  • 查看，图标出现
    •  
 
 
 
2.使用Font Awesome图标
 
 
 
  
Font Awesome，一套绝佳的图标字体库和CSS框架
 
 
 
 
 
  
Font Awesome 中文网 – | 字体图标
 
 
 
 
 
  
Font Awesome
 
 
 
 
 
  
Github Font-Awesome
 
 
 
 
     
  
  • 下载：链接1
    •  
  
  • 复制Font Awesome的fonts文件夹的字体文件到项目的fonts文件夹
    •  
  
  • 复制Font Awesome的less文件夹的文件到项目的less/fontawesome文件夹
    •  
  
  • 在__main.less文件找到如下内容：
    •  
 
 
 
@import "bootstrap/glyphicons.less";

 
 
修改为：
 
 
// @import "bootstrap/glyphicons.less";
@import "font-awesome/font-awesome.less";

 
 
     
  
  • 确定font-awesome/variables.less中fonts路径是@fa-font-path: "../fonts";(这里的路径是相对编译后生成的的css文件而言的)
    •  
  
  • 保存修改、编译
    •  
  
  • 修改index.html的导航条部分：
    •  
 
 
 
  <ul class="nav navbar-nav">
    <li class="active"><a href="index.html">
        <span class="icon fa fa-home"></span> Home
    </a></li>
    <li><a href="#">
        <span class="icon fa fa-desktop"></span> Portfolio
    </a></li>
    <li><a href="#">
        <span class="icon fa fa-group"></span> Team
    </a></li>
    <li><a href="#">
        <span class="icon fa fa-envelope"></span> Contact
    </a></li>
  </ul>

 
 
     
  
  • 保存修改、刷新查看结果
    •  
 
 
 
 
 
九、调整导航项图标颜色
 
 
     
  
  • 在_navbar.less中找到选择符.navbar-default（注释// Alternate navbars下第360行左右），再找到如下内容：
    •  
 
 
 
  .navbar-nav {
    > li > a {
      color: @navbar-default-link-color;

      &:hover,
      &:focus {
        color: @navbar-default-link-hover-color;
        background-color: @navbar-default-link-hover-bg;
      }
    }
    > .active > a {
      &,
      &:hover,
      &:focus {
        color: @navbar-default-link-active-color;
        background-color: @navbar-default-link-active-bg;
      }
    }
    > .disabled > a {
      &,
      &:hover,
      &:focus {
        color: @navbar-default-link-disabled-color;
        background-color: @navbar-default-link-disabled-bg;
      }
    }
  }

 
 
     
  
  • 修改为
    •  
 
 
 
  .navbar-nav {
    > li > a {
      color: @navbar-default-link-color;

      .icon { // added rule set
      	color: @gray-light;
      }

      &:hover,
      &:focus,
      &:hover .icon, // added selector
      &:focus .icon { // added selector
        color: @navbar-default-link-hover-color;
        background-color: @navbar-default-link-hover-bg;
      }

    }
    > .active > a {
      &,
      &:hover,
      &:focus,
      .icon, // added selector
      &:hover .icon, // added selector
      &:focus .icon { // added selector
        color: @navbar-default-link-active-color;
        background-color: @navbar-default-link-active-bg;
      }
    }
    > .disabled > a {
      &,
      &:hover,
      &:focus {
        color: @navbar-default-link-disabled-color;
        background-color: @navbar-default-link-disabled-bg;
      }
    }
  }

 
 
     
  
  • 保存编译、刷新查看结果（图标颜色变浅）
    •  
 
 
 
 
 
十、调整响应式导航条断点
 
 
     
  
  • 表现：在480px左右会遇到导航项被挤到logo下方
    •  
  
  • 原因：窗口在@screen-md-min和@screen-sm-min，即768px~991px之间时，导航对于它的容器来说太宽。
    •  
  
  • 修改变量@grid-float-breakpoint的值为@screen-md-min（原值为@screen-sm-min）
    •  
  
  • 保存编译、刷新查看结果（bug解决）
    •  
 
 
 
 
 
十一、调整传送带
 
 
     
  
  • 复制一份carousel.less到less根目录，并重命名为_carousel.less
    •  
  
  • 修改修改__main.less里的导入文件为 _carousel.less（原为bootstrap/carousel.less）
    •  
  
  • _carousel.less开头注释修改为Customized Carousel
    •  
 
 
 
1.控件改用Font Awesome图标
 
 
     
  
  • index.html中，修改以下内容
    •  
 
 
 
<a class="left carousel-control" href="#homepage-feature" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#homepage-feature" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
</a>

 
 
为：
 
 
<a class="left carousel-control" href="#homepage-feature" data-slide="prev">
    <span class="icon fa fa-chevron-left"></span>
</a>
<a class="right carousel-control" href="#homepage-feature" data-slide="next">
    <span class="icon fa fa-chevron-right"></span>
</a>

 
 
     
  
  • 找到_carousel.less文件中// Left/right controls for nav注释下的.carousel-control选择符，在其嵌套规则中找到注释// Toggles，添加如下内容（修改注释部分）：
    •  
 
 
 
// Toggles
  .icon-prev,
  .icon-next,
  .glyphicon-chevron-left,
  .glyphicon-chevron-right,
  .icon {  // added
    position: absolute;
    top: 50%;
    z-index: 5;
    display: inline-block;
  }
  .icon-prev,
  .glyphicon-chevron-left,
  &.left .icon { // added
    left: 20%; // edited was 50%
  }
  .icon-next,
  .glyphicon-chevron-right,
  &.right .icon { // added
    right: 20%; // edited was 50%
  }

 
 
     
  
  • 保存编译、刷新查看结果（Font Awesome图标粉墨登场）
    •  
 
 
 
2.添加上下内边距
 
 
     
  
  • 在_carousel.less文件开头相应位置添加如下内容：
    •  
 
 
 
.carousel {
  position: relative;

  padding-top: 4px; // added
  padding-bottom: 28px; // added
  background-color: @gray-lighter; // added

}

 
 
     
  
  • 保存编译、刷新查看结果（图片上下各出现亮灰色背景）
    •  
 
 
 
3.强制图片全宽
 
 
     
  
  • 找到.carousel-inner的注释// Account for jankitude on images下的如下内容：
    •  
 
 
 
    > img,
    > a > img {
      .img-responsive();
      line-height: 1;
    }

 
 
修改为：
 
 
    > img,
    > a > img {
      .img-responsive();
      line-height: 1;
      min-width: 100%; // added
    }

 
 
     
  
  •  
    保存编译、刷新查看结果
     
    •  
  
  •  
    注：也可用响应式图片方案
     
    •  
 
 
 
4.约束传送带高度
 
 
     
  
  • 找到.carousel-inner的如下内容：
    •  
 
 
 
  > .item {
    display: none;
    position: relative;
    .transition(.6s ease-in-out left);

    // Account for jankitude on images
    > img,
    > a > img {
      .img-responsive();
      line-height: 1;
      min-width: 100%; // added
    }
  }

 
 
修改为：
 
 
  > .item {
    display: none;
    position: relative;
    .transition(.6s ease-in-out left);

    max-height: 640px; // added

    // Account for jankitude on images
    > img,
    > a > img {
      .img-responsive();
      line-height: 1;
      min-width: 100%; // added
      // adding media queries to position images
      @media (min-width: @screen-md-min) {
        margin-top: -40px;
      }
      @media (min-width: @screen-lg-min) {
        margin-top: -60px;
      }
    }
  }

 
 
     
  
  • 保存编译、刷新查看结果
    •  
  
  • 注：@media这里使用了嵌套媒体查询
    •  
 
 
 
5.重定位指示器
 
 
     
  
  • 找到.carousel-inner的如下内容：
    •  
 
 
 
.carousel-indicators {
  position: absolute;
  bottom: 10px;

 
 
修改为：
 
 
.carousel-indicators {
  position: absolute;
  bottom: 0; // edited
  margin-bottom: 0; // added

 
 
     
  
  • 此时大屏幕上不起作用，找到如下位置：
    •  
 
 
 
// Move up the indicators
  .carousel-indicators {
    bottom: 20px;
  }

 
 
注释掉。
 
 
     
  
  • 保存编译、刷新查看结果
    •  
 
 
 
6.调整指示器外观
 
 
     
  
  • 打开_variables.less文件，找到在注释// Carousel后下面两行代码
    •  
 
 
 
@carousel-indicator-active-bg:                #fff;
@carousel-indicator-border-color:             #fff;

 
 
修改变量值为如下：
 
 
@carousel-indicator-bg:						  @gray-light; // added
@carousel-indicator-active-bg:                @gray-lightest; // edited
@carousel-indicator-border-color:             transparent; // edited

 
 
保存
 
 
     
  
  • 打开_carousel.less文件，找到.carousel-indicators选择器，修改其中的li选择器的属性，如下：
    •  
 
 
 
li {
    display: inline-block;
    width:  10px;
    height: 10px;
    margin: 1px;
    text-indent: -999px;
    border: 1px solid @carousel-indicator-border-color;
    border-radius: 10px;
    cursor: pointer;

 
 
修改为：
 
 
li {
    display: inline-block;
    width:  18px; // edited
    height: 18px; // edited
    // margin: 1px; // edited
    text-indent: -999px;
    background-color: @carousel-indicator-bg; // added
    // border: 1px solid @carousel-indicator-border-color;
    border-radius: 10px;
    cursor: pointer;

 
 
     
  
  • 并注释掉两个针对IE8-9的属性
    •  
 
 
 
// background-color: #000 \9; // IE8
// background-color: rgba(0,0,0,0); // IE9

 
 
     
  
  • 再注释掉下面.active选择器下的如下几条属性（下面已注释）：
    •  
 
 
 
.active {
    // margin: 0;
    // width:  12px;
    // height: 12px;
    background-color: @carousel-indicator-active-bg;
  }

 
 
     
  
  • 最后与.active选择器并列添加一个:hover选择符，增加悬停效果：
    •  
 
 
 
}
  li:hover, // added
  .active {

 
 
     
  
  • 保存编译、刷新查看结果（指示器颜色改变，形状变大）
    •  
 
 
 
十二、调整分栏及其内容
 
 
1.为链接添加 font-awesome 图标
 
 
     
  
  • 打开index.html，添加后如下：
    •  
 
 
 
<p><a class="btn btn-primary pull-right" href="#">See our portfolio<span class="icon fa fa-arrow-circle-right"></span></a></p>

 
 
     
  
  • 每个都如此添加
    •  
 
 
 
2.增加文本栏与传送带的垂直内边距
 
 
     
  
  • 在less文件夹根目录创建新less文件_page-contents.less，并添加如下内容：
    •  
 
 
 
//
// Page Contents
// --------------------------

.page-contents {
	padding-top: 20px;
	padding-bottom: 40px;

	@media (max-width: @screen-xs-max) { // fits within col-sm-min in markup
		[class^="col"] {
			clear: both;
			padding-bottom: 40px;
		}
	}
}

 
 
     
  
  • 此文件用来为页面内容添加额外改动
    •  
  
  • 保存，编译
    •  
  
  • 在index.html中，找到含container类的div标签，增加page-contents类，如下：
    •  
 
 
 
<div class="page-contents container" accesskey="">

 
 
     
  
  • 保存，刷新查看结果（文本栏之间垂直边距拉开）。
    •  
  
  • 这里用到的媒体查询的变量@screen-xs-max在_variables.less第239行左右
    •  
 
 
 
十三、修饰页脚
 
 
     
  
  • 查询Font Awesome文档的Brand Icons部分，找到需要的图标，添加到index.html
    •  
 
 
 
<ul class="social">
  <li><a href="#" title="Twitter Profile"><span class="icon fa fa-twitter"></span></a></li>
  <li><a href="#" title="Facebook Page"><span class="icon fa fa-facebook"></span></a></li>
  <li><a href="#" title="LinkedIn Profile"><span class="icon fa fa-linkedin"></span></a></li>
  <li><a href="#" title="Google+ Profile"><span class="icon fa fa-google-plus"></span></a></li>
  <li><a href="#" title="GitHub Profile"><span class="icon fa fa-github-alt"></span></a></li>
</ul>

 
 
     
  
  • 为了使图标水平居中排列，在less根目录新建_footer.less文件
    •  
 
 
 
//
// Footer
// ---------------------------

footer[role="contentinfo"] {
	padding-top: 24px;
	padding-bottom: 36px;
	text-align: center;
}

ul.social {
	margin: 0;
	padding: 0;
	width: 100%;
	text-align: center;
	> li {
			display: inline-block;
		> a {
			display: inline-block;
			font-size: 18px;
			line-height: 30px;
			.square(30px);
	    border-radius: 36px;
			background-color: @gray-light;
			color: #fff;
			margin: 0 3px 3px 0;
			&:hover {
				text-decoration: none;
				background-color: @link-hover-color;
			}
		}
	}
}

 
 
     
  
  • 保存，编译，刷新查看结果。
    •  
 
 
 
 
 
十四、总结
 
 
     
  
  • 接下来优化： 
   
       
    
    • __main.less中注释掉不需要的less文件，重新编译，然后完成css非格式化，进一步压缩大小
      •  
    
    • 把之前复制进plugins.js文件中的bootstrap.min.js替换成项目中用到的carousel.js、collapse.js、transitions.js
      •  
   
     
    •  
  
  • 项目完善优化 
   
       
    
    • 附录A 优化站点资源
      •  
    
    • 附录B 实现响应式图片
      •  
    
    • 附录C 让传送带支持手势
      •  
   
     
    •  
  
  • 完成效果：http://oliverdada.gitee.io/sample_bootstrapsiteblueprints/Chapter 2/02_Code_COMPLETE/
    •  
 
 
 
 
 
 
  
Less教程™
 
 
 

 
 

 

 
 
 
     
 
 
 
 
  
 
   onc-virn 
    
    
  
 
  
 
   原创文章 60 
   获赞 216 
   访问量 3万+ 
  
 
 
 
 
 
  关注 
  私信  
 
 


                    
                    
                    
                    
                    
                    
                    
                    
                    

                        
猜你喜欢

                        

                            
                            
                        

                    


                    
转载自blog.csdn.net/qq_32682301/article/details/105513616

                    

                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                    

                    


                

            

            


                

                    

                        
                        
                        
                        
                    


                    

                        

                            

                                今日推荐
                            


                            

                        

                    

                    

                        

                            

                                开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
                            

                        

                        

                            

                                微软回应中国区AI团队“打包赴美”传闻
                            

                        

                        

                            

                                基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
                            

                        

                        

                            

                                美国拟限制 AI 大模型出口中国和俄罗斯
                            

                        

                        

                            

                                苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
                            

                        

                        

                            

                                openKylin 社区生态委员会第六次会议圆满召开
                            

                        

                        

                            

                                阿里云正式发布通义千问 2.5
                            

                        

                        

                            

                                Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
                            

                        

                        

                            

                                Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
                            

                        

                        

                            

                                Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
                            

                        

                        

                            

                                《2024 年一季度互联网投融资运行情况》研究报告
                            

                        

                        

                            

                                报告：Django 仍然是 74% 开发者的首选
                            

                        

                        
                        
                    

                


                

                    

                        

                            

                                周排行
                            

                            

                        

                    

                    

                        

                            

                                返回指定时间格式
                            

                        

                        

                            

                                fopen函数中的mode参数
                            

                        

                        

                            

                                Java 单例模式探讨
                            

                        

                        

                            

                                Flex remoteobject工作原理探讨
                            

                        

                        

                            

                                寻找mplayer的便捷安装方法
                            

                        

                        

                            

                                30天了解30种技术系列---(26)MySQL自动化运维工具Inception
                            

                        

                        

                            

                                关于Jboss/Tomcat/Jetty的JNDI定义123
                            

                        

                        

                            

                                程序减肥，strip，eu-strip 及其符号表
                            

                        

                        

                            

                                AsyncTask、View.post(Runnable)、ViewTreeObserver三种方式总结frame animation自动启动
                            

                        

                        

                            

                                Json和Bean的互相转换
                            

                        

                    

                

                

                    

                        

                            

                                每日归档
                            

                            

                                更多
                            

                            

                        

                    

                    

                        

                            2024-05-15(24)
                        

                        

                            2024-05-14(0)
                        

                        

                            2024-05-13(18)
                        

                        

                            2024-05-12(0)
                        

                        

                            2024-05-11(38)
                        

                        

                            2024-05-10(38)
                        

                        

                            2024-05-09(35)
                        

                        

                            2024-05-08(42)
                        

                        

                            2024-05-07(14)
                        

                        

                            2024-05-06(40)
                        

                    

                


            


            
        

    






















    


        

            
代码天地 © 2018 codetd.com

            境外服务器
             
            最新电视剧2022