冠军
冠军

实现 Bootstrap 基本布局

看到了一篇 20 分钟打造 Bootstrap 站点的文章，内容有点老，重新使用 Bootstrap3 实现一下，将涉及的内容也尽可能详细说明。

1. 创建基本的页面

我们先创建一个基本的 HTML 模板页面，使用 sublime + emmet 可以直接创建这个页面。

1.1 新建一个文件， Ctrl + N

1.2 保存到页面文件中，Ctrl + S，命名为 index.html

1.3 在这个空白页面中，输入 html:5，然后直接按制表键 Tab，就应该可以看到一个基本的 HTML5 模板页面了。

1.4 再次保存，按 Ctrl + S.

页面内容应该如下：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
head>
<body>
    
body>
html>

2. 添加 Bootstrap 文件引用

在 index.html 文件所在的文件夹中，创建 css 文件夹，用来保存所有的样式文件，在 css 子文件夹中创建一个名为 bootstrap 的文件夹，用来保存我们的 bootstrap 文件。

从 bootstrap 官网可以下载到 bootstrap 的包，其中有一个 dist 的文件夹，这个文件夹中包含了三个子文件夹：css, font 和 js。将这三个子文件夹复制到你的 css/bootstrap 文件夹中。

在页面中会涉及两部分内容，样式和脚本。

2.1 添加样式引用

在 header 中添加 bootstrap 的样式引用。注意路径。

<link href="css/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
<link href="css/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet"/>

 

bootstrap.min.css 是 bootstrap 的样式文件，包含了所有的 bootstrap 样式定义，bootstrap-theme.min.css 则是主题定义。

2.2 添加脚本引用

由于 bootstrap 使用了 jQuery 的脚本，所以，你还需要下载 jquery 脚本库。

在你的 index.html 文件所在目录中，创建一个名为 lib 的子目录，用来保存以后使用的脚本库，将下载得到的 jquery.min.js 复制到这个目录中。

在紧邻你的 之间添加 jquery 和 bootstrap 脚本库引用。

    <script type="text/javascript" src="lib/jquery.min.js">script>
    <script type="text/javascript" src="css/bootstrap/js/bootstrap.min.js">script>
body>

 

 3. 添加 bootstrap 容器

bootstrap的 .container 类是非常有用的，它能在页面中创建一个居中的区域，然后我们能够把其他位置的内容放到里面。container类等价于创建了一个具有静态宽度并且magin值为auto的一个居中的div框。twitter bootstrap的 container类的优点在于它是响应式的，它会以当前屏幕的宽度为基础计算出最佳的宽度予以使用。

.container-fluid 则是一个全宽的容器，使用整个宽度。

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}
.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

 

在body标签中，使用container类创建一个div。它会作为页面主要的放置其他代码的外层包裹.

顺便还可以添加一个 title，现在你的页面应该是这样的。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Twitter Bootstrap Tutorial - A responsive layout tutorialtitle>
    <link href="css/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="css/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet"/>
head>
<body>
    <div class="container">
    div>
    <script type="text/javascript" src="lib/jquery.min.js">script>
    <script type="text/javascript" src="css/bootstrap/js/bootstrap.min.js">script>
body>
html>

 

虽然现在在浏览器中还看不到什么内容，但是，已经为后面的操作打好了基础。

4. 标题和导航

现在我们可以为页面添加一些可见的内容了。

4.1 标题

添加标题非常简单，直接添加一个 h1 元素就可以了。

    <div class="container">
        <h1>Twitter bootstrap tutorialh1>
    div>

 

刷新页面应该看到一个醒目的标题了。下面我们看导航。

4.2 导航

使用 nav 元素可以创建导航，而且我们希望创建一个导航条来组织导航项目，在 bootstrap 中，导航条称为 navbar，继续在容器中添加导航条。

    <div class="container">
        <h1>Twitter bootstrap tutorialh1>
        <nav class="navbar navbar-inverse">
        nav>
    div>

 

navbar 会帮助我们创建导航条，默认是白色的底色，navbar-inverse 设置反白，这样底色会是黑色，文字会是白色，比较醒目。现在刷新页面，你会看到一个黑色的导航条，里面还没有任何导航内容。

添加导航内容如下

    <div class="container">
        <h1>Twitter bootstrap tutorialh1>
        <nav class="navbar navbar-inverse">
            <div class="navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Homea>li>
                    <li><a href="#">Page Onea>li>
                    <li><a href="#">Page Twoa>li>
                ul>
            div>
        nav>
    div>

ul 是实际的导航内容，其中的 .nav 说明这是一组导航，.navbar-nav 说明是用于 navbar 中的导航。li 则是实际的导航项目，可以使用 .active 用来说明当前活动的导航。

注意 .navbar-collapse，它是说在视口的宽度小于 768px 的时候，将导航变成垂直方向。

大于 768px

实现 Bootstrap 基本布局_第1张图片

小于 768px

实现 Bootstrap 基本布局_第2张图片

4.3 三明治菜单

变成垂直的导航也不方便，我们希望成为流行的样式，比如这样。

实现 Bootstrap 基本布局_第3张图片

我们需要额外做一些工作，一方面，我们需要说明，在视口小于一定宽度的时候，显示出来我们的特定的导航，添加额外的导航内容。


<div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-menu" aria-expanded="false">
        <span class="sr-only">Toggle navigationspan>
        <span class="icon-bar">span>
        <span class="icon-bar">span>
        <span class="icon-bar">span>
    button>
    <a class="navbar-brand" href="#">Branda>
div>

 

其实里面是两部分组成的，button 部分看起来很多，就是用来画出右面的三明治按钮。后面的 a 元素则是左边的导航。

通常它不会显示出来。

然后，我们需要制定点击三明治按钮的时候，需要显示我们原来的导航。button 元素中，我们有一个 attribute ，data-target="#navbar-menu" ，就是用来完成这一步工作的，这个 #navbar-menu 就是我们为原来的导航所起的 id 标识。

这样，我们的导航就是这样的了。

<h1>Twitter bootstrap tutorialh1>
<nav class="navbar navbar-inverse">
    
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-menu" aria-expanded="false">
            <span class="sr-only">Toggle navigationspan>
            <span class="icon-bar">span>
            <span class="icon-bar">span>
            <span class="icon-bar">span>
        button>
        <a class="navbar-brand" href="#">Branda>
    div>
    <div id="navbar-menu" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Homea>li>
            <li><a href="#">Page Onea>li>
            <li><a href="#">Page Twoa>li>
        ul>
    div>
nav>
div>

 

 

5. 内容和边栏

主要内容部分，我们使用 div 来进行布局。

    <div id="content" class="row-fluid">
        <div class="col-md-9">
            <h2>Main Content Sectionh2>
        div>
        <div class="col-md-3">
            <h2>Sidebarh2>  
        div>
    div>

 

这里使用了 bootstrap 的栅格布局，栅格系统利用了12列的布局，这意味着一个页面可以被分割成12个相同的列。下面这张从bootstrap官方文档中拿到的图片给出了一个很好的展示。

 实现 Bootstrap 基本布局_第4张图片

这张表格则给出了详细的说明。

实现 Bootstrap 基本布局_第5张图片

现在页面看起来是这样的。

实现 Bootstrap 基本布局_第6张图片

 

6. 侧边栏导航

在侧边栏中添加一些导航内容。这里就是普通的导航，使用 .nav 进行声明，.nav-tabs 和 .nav-stacked 是导航的外观。

<div class="col-md-3">
    <h2>Sidebarh2>
    <ul class="nav nav-tabs nav-stacked">
        <li><a href='#'>Another Link 1a>li>
        <li><a href='#'>Another Link 2a>li>
        <li><a href='#'>Another Link 3a>li>
    ul>    
div>

 

看看最终的效果，一个基于 bootstrap 的响应式布局页面就完成了。

实现 Bootstrap 基本布局_第7张图片

 

7. 参考资料

1. 20 分钟打造你的 Bootstrap 站点

2. Bootstrap tutorial: A responsive design tutorial with Twitter Bootstrap 3

 

你可能感兴趣的:(实现 Bootstrap 基本布局)

  • 5步打造完善的物联网IoT测试体系 moton2017 物联网可用性测试iot物联网测试测试体系测试工具
    前言智能硬件和软件测试规范涉及概述用于测试系统功能、性能和可靠性的详细说明和标准，以帮助确保系统的可靠性和质量。请记住，测试是一个迭代过程，需要根据项目不断发展的性质进行调整。一、物联网测试流程概览测试基本流程物联网测试基本流程阶段流程版本开发需求分析>编写测试计划>编写测试用例>用例评审版本测试研发自测>提测>第一轮测试>bug管理>修改bug>第二轮测试>修改bug>第三轮测试版本上线提交版本
  • 物联网名词----物模型、设备影子 moton2017 物联网
    在物联网(IoT)背景下，术语“物模型”和“设备影子”是指与管理和表示连接设备相关的概念。物模型：IoT中的物模型表示IoT实体或事物的结构和行为。它定义了数据和功能如何在物联网生态系统中组织和交互。物模型指定与IoT对象相关的属性、方法和关系，从而实现与设备通信和交互的标准化方式。这有助于实现不同物联网设备和系统的互操作性和无缝集成。设备影子：设备影子是物联网平台中常用的概念，用于维护物理物联网
  • Python 实现车牌识别 菜狗小测试 Python技术专栏python计算机视觉opencv
    一、车牌识别的基本原理车牌识别主要包括以下几个步骤：图像采集：通过摄像头或其他图像采集设备获取包含车牌的图像。图像预处理：对采集到的图像进行灰度化、滤波、增强等操作，以提高图像的质量和清晰度，便于后续的处理。车牌定位：从预处理后的图像中找出车牌的位置。这可以通过一些特征提取和机器学习算法来实现，例如基于颜色特征、边缘特征等方法来定位车牌区域。字符分割：将定位到的车牌区域中的字符分割开，以便对每个字
  • 深入解析Vue3响应式系统：从Proxy实现到依赖收集的核心原理 荆州克莱 面试题汇总与解析springcloudspringbootspring技术css3
    深入解析Vue3响应式系统：从Proxy实现到依赖收集的核心原理响应式系统的基本原理作为一个热门的JavaScript框架，Vue在3.x版本中引入了基于Proxy的响应式系统。这个系统的核心思想是利用Proxy对象拦截对数据的访问和修改，从而实现数据的自动更新。当我们改变一个被代理的对象时，相关的视图会自动更新，无需手动干预。这一创新的设计让Vue3在性能和开发体验上都有了大幅度的改进。如何实现
  • 微服务网关springcloud gateway整合nacos实现动态路由 程序猿20 nacos微服务springcloudgatewaynacos微服务
    1.添加依赖com.alibaba.cloudspring-cloud-starter-alibaba-nacos-config2.添加配置spring:cloud:nacos:config:#配置中心地址server-addr:127.0.0.1:8848#配置文件格式file-extension:ymlusername:password:3.定义读取配置和监听类packagecom.demo.
  • Qt调用FFmpeg库实时播放UDP组播视频流 daqinzl qtffmpeg流媒体qtffmpegudp组播流
    基于以下参考链接，通过改进实现实时播放UDP组播视频流https://blog.csdn.net/u012532263/article/details/102736700源码在windows（qt-opensource-windows-x86-5.12.9.exe）、ubuntu20.04.6(x64)(qt-opensource-linux-x64-5.12.12.run)、以及针对arm64的
  • Solon2 接口开发: 熟悉 Gateway 组合缺一 SolonJavaFrameworkgatewayjavasolon
    Gateway是Solon框架的特殊控制器（也是Handler的一个实现类）。它通过注册收集之后，在局部范围内提供：二级路由、拦截、过滤、融断、异常处理等功能，并统一到网关处理。另一个作用：可以为同一批接口安排多个网关，进而定制不同的协议效果。1、定义2个组件API_0@Component(tag="api")publicclassAPI_0{@MappingpublicResultexec(){
  • Spring Cloud Gateway 动态路由加载：使用 Nacos 实现动态路由配置 Takumilovexu 微服务javaspringcloud开发语言
    文章目录背景介绍代码实现关键步骤解析总结在微服务架构中，路由配置的动态更新是非常重要的环节。通过动态路由，我们可以在不重启服务的情况下，灵活地增加、修改或删除路由配置。今天，我将分享如何在SpringCloudGateway中使用Nacos实现动态路由配置的实现方法。背景介绍在日常开发中，经常遇到运行时动态管理路由配置的需求。传统方式通常需要重启网关服务，这显然不够优雅且效率较低。为了解决这个问题
  • 什么是iPaaS？ 谷云科技RestCloud iPaaS混合集成平台数字化转型
    一、iPaaS简介iPaaS，即集成平台即服务（IntegrationPlatformasaService），是一种基于云计算的自助服务模型，它为企业提供了一种标准化的应用程序集成方式。能够促进开发、执行和治理集成流程，连接本地和云基础的流程、服务、应用和数据。iPaaS的核心价值在于使技术专业人员甚至非技术人员能够快速构建集成流程，实现企业内部数据的互联互通。二、企业集成方式的演变随着企业信息化
  • MyBatis技术详解与实战 小码快撩 mybatisjava开发语言
    引言MyBatis是一款优秀的Java持久层框架，它支持定制化SQL、存储过程以及高级映射。MyBatis避免了几乎所有的JDBC代码和手动设置参数以及获取结果集的工作，使开发者能更专注于对业务逻辑的实现。本文将详细介绍MyBatis的核心概念，并通过示例代码进行深入讲解。一、配置文件MyBatis配置文件（通常命名为mybatis-config.xml）是MyBatis框架的核心配置文件，它定义
  • SpringCloud系列教程：微服务的未来（十七）监听Nacos配置变更、更新路由、实现动态路由 程序猿零零漆 SpringCloud专栏springcloud微服务java
    前言在微服务架构中，API网关是各个服务之间的入口点，承担着路由、负载均衡、安全认证等重要功能。为了实现动态的路由配置管理，通常需要通过中心化的配置管理系统来实现灵活的路由更新，而无需重启网关服务。Nacos作为一个开源的动态服务发现与配置管理平台，可以方便地实现这一目标。本文将介绍如何利用Nacos配置中心来动态更新SpringCloudGateway的路由配置，确保路由信息的实时更新，并提升系
  • python实现dbscan 怎么就重名了 算法python开发语言
    python实现dbscan原理DBSCAN(Density-BasedSpatialClusteringofApplicationswithNoise)是一个比较有代表性的基于密度的聚类算法。它将簇定义为密度相连的点的最大集合，能够把具有足够高密度的区域划分为簇，并可在噪声的空间数据库中发现任意形状的聚类。DBSCAN中的几个定义：Ε邻域：给定对象半径为Ε内的区域称为该对象的Ε邻域；核心对象：如
  • 动物判别系统python实现 L C H python人工智能算法矩阵线性代数
    动物判别系统由于明天的实验时间较为紧张，所以本人提前完成实验，将代码呈现如下（有些许参考）：由于明天的实验时间较为紧张，所以本人提前完成实验，将代码呈现如下（有些许参考）：#判断有无重复元素defjudge_repeat(value,list=[]):foriinrange(0,len(list)):if(list[i]==value):return1else:if(i!=len(list)-1)
  • 04-标准库开发STM32-UART串口通信 坏柠 嵌入式开发笔记stm32单片机嵌入式硬件
    六、USART同步/异步串口6.1基本介绍USART（UniversalSynchronous/AsynchronousReceiver/Transmitter）是STM32内部集成的硬件外设，用于实现通用同步/异步串行通信。USART不仅可以作为全双工通信接口，还支持多种通信模式，包括同步和异步通信。这使得STM32能够与其他设备（如单片机、电脑、模块等）进行高效的数据传输。USART与UART
  • 02数组+字符串+滑动窗口+前缀和与差分+双指针（D5_双指针） Java丨成神之路 06数据结构与算法java
    目录一、基本介绍二、算法思想三、算法模型1.对撞指针2.快慢指针3.滑动窗口一、基本介绍双指针是一种应用很广泛且基础的算法，严格来说双指针不是算法更像是一种思想。双指针中的“指针”不仅仅是大家所熟知的C/C++里面的地址指针，还是索引、游标。二、算法思想双指针是指在遍历对象时，使用两个或多个指针进行遍历及相应的操作。大多用于数组操作，这利用了数组连序性的特点。双指针常用来降低算法的时间复杂度，因为
  • Python实现图像（边缘）锐化：梯度锐化、Roberts 算子、Laplace算子、Sobel算子的详细方法 闲人编程 pythonpython计算机视觉人工智能SobelLaplaceRoberts锐化
    目录Python实现图像（边缘）锐化：梯度锐化、Roberts算子、Laplace算子、Sobel算子的详细方法引言一、图像锐化的基本原理1.1什么是图像锐化？1.2边缘检测的基本概念二、常用的图像锐化算法2.1梯度锐化2.1.1实现步骤2.2Roberts算子2.2.1实现步骤2.3Laplace算子2.3.1实现步骤2.4Sobel算子2.4.1实现步骤三、Python实现图像锐化3.1导入必
  • 鸿蒙开发（OpenHarmony）栅格容器组件-GridRow 你我皆是牛马星人 OpenHarmony鸿蒙开发HarmonyOSharmonyos华为android前端鸿蒙uiOpenHarmony
    鸿蒙NEXT开发实战往期必看文章：一分钟了解”纯血版！鸿蒙HarmonyOSNext应用开发！“非常详细的”鸿蒙HarmonyOSNext应用开发学习路线！（从零基础入门到精通）HarmonyOSNEXT应用开发案例实践总结合（持续更新......）HarmonyOSNEXT应用开发性能优化实践总结（持续更新......）栅格布局可以为布局提供规律性的结构，解决多尺寸多设备的动态布局问题，保证不同
  • 从零到手搓一个Agent：AI Agents新手入门精通 大模型. 人工智能chatgpt大数据深度学习智能体算法大模型
    今日主题：当什么是Agent，与LLM的区别又是啥这一天，你的女朋友问你（假设我们有女朋友），宝宝，什么是Agent啊，Agent和LLM有什么区别呀，最近大家都在说的Agent究竟是什么，包括很多文章都在写的Agent，还有之前谷歌发布的Agents白皮书究竟是什么，对我们有什么帮助，对我们有什么影响呢？现在，编者专门做了一个系列，从最简单的讲起，解开这个迷雾，这个系列的教程，会帮助你了解基本概
  • 使用Qt实现Ribbon效果 ArqLoop qtribbon开发语言QT
    Qt是一种跨平台的C++应用程序开发框架，它提供了丰富的工具和库来创建各种类型的应用程序界面。在本文中，我们将探讨如何使用Qt实现Ribbon效果，Ribbon是一种常见的用户界面模式，用于创建具有多个选项卡的功能丰富的应用程序。步骤1：创建Qt应用程序首先，我们需要创建一个Qt应用程序项目。打开QtCreator，选择"新建项目"，然后选择"QtWidgets应用程序"。输入项目名称并选择保存位
  • AWTK 骨骼动画控件发布 李先静 ZLG开源GUIAWTKAWTKspine
    Spine是一款广泛使用的2D骨骼动画工具，专为游戏开发和动态图形设计设计。它通过基于骨骼的动画系统，帮助开发者创建流畅、高效的角色动画。本项目是基于Spine实现的AWTK骨骼动画控件。代码：https://gitee.com/zlgopen/awtk-widget-spine2d准备获取awtk并编译gitclonehttps://github.com/zlgopen/awtk.gitcdaw
  • [VC] 检测AVX系列指令集的支持级别（AVX、AVX2、F16C、FMA、FMA4、XOP） zyl910 #All-所有SIMDc汇编functionreferenceapplicationnull
    从2011年的SandyBridge微架构处理器开始，现在支持AVX系列指令集的处理器越来越多了。本文探讨如何用VC编写检测AVX系列指令集的程序，并利用了先前的CPUIDFIELD方案。一、AVX系列指令集简介SSE5指令：SSE5是一个纸面上的指令集，并没有最终实现，AMD在2007年8月公布SSE5指令集规范，在2009年5月AMD推出了XOP，FMA4以及CVT16来取代SSE5指令。AV
  • [C#] 对24位图像进行水平翻转(FlipX)的跨平台SIMD硬件加速向量算法（使用YShuffleX3Kernel） zyl910 VectorTraitsc#算法开发语言SIMD图像处理
    文章目录一、标量算法1.1算法实现1.2基准测试代码二、向量算法2.1算法思路2.1.1难点说明2.1.2解决办法：每次处理3个向量2.1.3用YShuffleX3Kernel对3个向量内的24位像素进行翻转2.2算法实现2.3基准测试代码2.4使用YShuffleX3Kernel_Args来做进一步的优化三、基准测试结果3.1X86架构3.1.1X86架构上`.NET6.0`程序的测试结果3.1
  • C++和Python实现SQL Server数据库导出数据到S3并导入Redshift数据仓库 weixin_30777913 c++python数据库数据仓库sqlserver
    用C++实现高性能数据处理，Python实现操作Redshift导入数据文件。在VisualStudio2022中用C++和ODBCAPI导出SQLServer数据库中张表中的所有表的数据为CSV文件格式的数据流，用逗号作为分隔符，用双引号包裹每个数据，字符串类型的数据去掉前后的空格，数据中如果包含双引号，则将一个双引号替换为两个双引号，创建gzip压缩文件，输出数据流写入到gzip压缩文件包中的
  • scikit-learn基本功能和示例代码 weixin_30777913 深度学习机器学习pythonscikit-learn
    scikit-learn（简称sklearn）是一个广泛使用的Python机器学习库，提供了丰富的工具和算法，涵盖了数据预处理、模型训练、评估和优化等多个方面。scikit-learn是一个功能强大的机器学习库，涵盖了数据预处理、分类、回归、聚类、降维、模型选择与评估等多个方面。通过上述代码示例，您可以快速上手并使用scikit-learn进行机器学习任务。以下是对scikit-learn主要功能
  • 从腾讯云数据仓库TCHouse安全地转移数据到AWS Redshift weixin_30777913 数据仓库腾讯云云计算pythonaws
    实现从AWSDirectConnect连接到腾讯云数据仓库TCHouse-P、TCHouse-C或TCHouse-D，然后使用AWSGlue读取数据并在AWSRedshift中创建对应表并复制数据，需要按照以下步骤进行操作：网络连接设置AWSDirectConnect配置：在AWS管理控制台中，创建一个DirectConnect连接到你的本地网络或腾讯云所在的网络环境。配置虚拟接口（VIF），确保
  • 构建级联下拉列表：AJAX和jQuery实战教程 不胖的羊
    本文还有配套的精品资源，点击获取简介：级联下拉列表是网页交互中常见的元素，用于根据用户的选择动态更新后续选项。本文通过示例展示如何利用AJAX和jQuery技术实现级联下拉列表，并简单介绍了Prototype框架和jquery.jar文件的可能用途。详细步骤包括HTML结构设置、事件监听、AJAX请求构建、服务器响应处理以及界面更新，同时提供了提高用户体验的额外功能。1.级联下拉列表概念及应用场景
  • 前端开发实战：创建简易HTML计算器 不胖的羊
    本文还有配套的精品资源，点击获取简介：计算器是执行基本数学运算的应用程序，通常在IT和前端开发领域中通过HTML、CSS和JavaScript实现。HTML定义页面结构和布局，JavaScript赋予计算器动态交互功能，例如监听按钮点击事件、执行计算和更新结果显示。该项目涉及HTML的元素结构、JavaScript的事件处理和DOM操作，是学习Web开发基础的理想练习。1.计算器的基本概念和应用1
  • Windows平台下使用DirectX实现的飞行射击游戏详解 不胖的羊
    本文还有配套的精品资源，点击获取简介：本文深入解析了一款在Windows平台上利用DirectX技术实现的飞行射击游戏“打飞机大战”。文章涵盖了Windows编程基础、DirectX技术的应用，以及游戏开发中使用的各种技术细节，如实时3D渲染、事件驱动编程、动画和物理模拟、声音处理以及性能优化等。通过这个项目，展示了Windows编程结合DirectX创造游戏的无限可能。1.Windows编程基础
  • 是不是网站服务器限速最高11,限制网速多少合适(100m访客限速多少kb合适) 不胖的羊 是不是网站服务器限速最高11
    浏览网页一般50--80就可以了，不用特别高，这个速度不光上网页，听音乐都足够了.4.若要按照个别IP来限制网速的话，使用控制规则来实现。左边选项IP带宽控制，选.那么用路由器限制速度多少比较合适。当然，17只是最大限度的提升的比方。。上行总带宽：512下行总带宽：4096(你的大概是4M的样子。)IP范围：1921681100~1921681199(参考路由器DHCP中的范围输入。)上行：10K
  • Android架构组件中的MVVM 小村学长毕业设计 android架构
    Android架构组件中的MVVM（Model-View-ViewModel）模式是一种广泛应用的设计模式，它通过将应用程序分为三个主要部分（Model、View、ViewModel）来分离用户界面和业务逻辑，从而提高代码的可维护性、可扩展性和可测试性。下面将详细介绍MVVM模式在Android开发中的实战应用，包括基本概念、实现步骤、优势以及一个实际案例。一、MVVM模式基本概念MVVM是Mod
  • 微信开发者验证接口开发 362217990 微信 开发者 token 验证
    微信开发者接口验证。 Token，自己随便定义，与微信填写一致就可以了。 根据微信接入指南描述 http://mp.weixin.qq.com/wiki/17/2d4265491f12608cd170a95559800f2d.html 第一步：填写服务器配置 第二步：验证服务器地址的有效性 第三步：依据接口文档实现业务逻辑 这里主要讲第二步验证服务器有效性。 建一个
  • 一个小编程题-类似约瑟夫环问题 BrokenDreams 编程
            今天群友出了一题：         一个数列,把第一个元素删除,然后把第二个元素放到数列的最后,依次操作下去,直到把数列中所有的数都删除,要求依次打印出这个过程中删除的数。      &
  • linux复习笔记之bash shell (5) 关于减号-的作用 eksliang linux关于减号“-”的含义linux关于减号“-”的用途linux关于“-”的含义linux关于减号的含义
        转载请出自出处： http://eksliang.iteye.com/blog/2105677        管道命令在bash的连续处理程序中是相当重要的，尤其在使用到前一个命令的studout（标准输出）作为这次的stdin（标准输入）时，就显得太重要了，某些命令需要用到文件名，例如上篇文档的的切割命令（split）、还有
  • Unix(3) 18289753290 unix ksh
    1)若该变量需要在其他子进程执行，则可用"$变量名称"或${变量}累加内容 什么是子进程？在我目前这个shell情况下，去打开一个新的shell，新的那个shell就是子进程。一般状态下，父进程的自定义变量是无法在子进程内使用的，但通过export将变量变成环境变量后就能够在子进程里面应用了。 2)条件判断： &&代表and  ||代表or&nbs
  • 关于ListView中性能优化中图片加载问题 酷的飞上天空 ListView
    ListView的性能优化网上很多信息，但是涉及到异步加载图片问题就会出现问题。 具体参看上篇文章http://314858770.iteye.com/admin/blogs/1217594   如果每次都重新inflate一个新的View出来肯定会造成性能损失严重，可能会出现listview滚动是很卡的情况，还会出现内存溢出。 现在想出一个方法就是每次都添加一个标识，然后设置图
  • 德国总理默多克：给国人的一堂“震撼教育”课 永夜-极光 教育
    http://bbs.voc.com.cn/topic-2443617-1-1.html德国总理默多克：给国人的一堂“震撼教育”课　 安吉拉—默克尔，一位经历过社会主义的东德人，她利用自己的博客，发表一番来华前的谈话，该说的话，都在上面说了，全世界想看想传播——去看看默克尔总理的博客吧！ 　　德国总理默克尔以她的低调、朴素、谦和、平易近人等品格给国人留下了深刻印象。她以实际行动为中国人上了一堂
  • 关于Java继承的一个小问题。。。 随便小屋 java
    今天看Java 编程思想的时候遇见一个问题，运行的结果和自己想想的完全不一样。先把代码贴出来！ //CanFight接口 interface Canfight { void fight(); } //ActionCharacter类 class ActionCharacter { public void fight() { System.out.pr
  • 23种基本的设计模式 aijuans 设计模式
    Abstract Factory：提供一个创建一系列相关或相互依赖对象的接口，而无需指定它们具体的类。 　　Adapter：将一个类的接口转换成客户希望的另外一个接口。A d a p t e r模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。 　　Bridge：将抽象部分与它的实现部分分离，使它们都可以独立地变化。 　　Builder：将一个复杂对象的构建与它的表示分离，使得同
  • 《周鸿祎自述：我的互联网方法论》读书笔记 aoyouzi 读书笔记
    从用户的角度来看,能解决问题的产品才是好产品,能方便/快速地解决问题的产品,就是一流产品.   商业模式不是赚钱模式 一款产品免费获得海量用户后,它的边际成本趋于0,然后再通过广告或者增值服务的方式赚钱,实际上就是创造了新的价值链.   商业模式的基础是用户,木有用户,任何商业模式都是浮云.商业模式的核心是产品,本质是通过产品为用户创造价值. 商业模式还包括寻找需求
  • JavaScript动态改变样式访问技术 百合不是茶 JavaScriptstyle属性ClassName属性
      一:style属性 格式:  HTML元素.style.样式属性="值";   创建菜单:在html标签中创建 或者 在head标签中用数组创建   <html> <head> <title>style改变样式</title> </head> &l
  • jQuery的deferred对象详解 bijian1013 jquerydeferred对象
            jQuery的开发速度很快，几乎每半年一个大版本，每两个月一个小版本。         每个版本都会引入一些新功能，从jQuery 1.5.0版本开始引入的一个新功能----deferred对象。    &nb
  • 淘宝开放平台TOP Bill_chen C++c物流C#
    淘宝网开放平台首页：http://open.taobao.com/ 淘宝开放平台是淘宝TOP团队的产品，TOP即TaoBao Open Platform， 是淘宝合作伙伴开发、发布、交易其服务的平台。 支撑TOP的三条主线为：    1.开放数据和业务流程     * 以API数据形式开放商品、交易、物流等业务；  &
  • 【大型网站架构一】大型网站架构概述 bit1129 网站架构
    大型互联网特点 面对海量用户、海量数据 大型互联网架构的关键指标 高并发 高性能 高可用 高可扩展性 线性伸缩性 安全性 大型互联网技术要点   前端优化 CDN缓存 反向代理 KV缓存 消息系统 分布式存储 NoSQL数据库 搜索 监控 安全 想到的问题： 1.对于订单系统这种事务型系统，如
  • eclipse插件hibernate tools安装 白糖_ Hibernate
    eclipse helios(3.6)版 1.启动eclipse 2.选择 Help > Install New Software...> 3.添加如下地址： http://download.jboss.org/jbosstools/updates/stable/helios/ 4.选择性安装：hibernate tools在All Jboss tool
  • Jquery easyui Form表单提交注意事项 bozch jquery easyui
    jquery easyui对表单的提交进行了封装，提交的方式采用的是ajax的方式，在开发的时候应该注意的事项如下：         1、在定义form标签的时候，要将method属性设置成post或者get，特别是进行大字段的文本信息提交的时候，要将method设置成post方式提交，否则页面会抛出跨域访问等异常。所以这个要
  • Trie tree(字典树)的Java实现及其应用-统计以某字符串为前缀的单词的数量 bylijinnan java实现
    import java.util.LinkedList; public class CaseInsensitiveTrie { /** 字典树的Java实现。实现了插入、查询以及深度优先遍历。 Trie tree's java implementation.(Insert,Search,DFS) Problem Description Igna
  • html css 鼠标形状样式汇总 chenbowen00 htmlcss
    css鼠标手型cursor中hand与pointer  Example：CSS鼠标手型效果 <a href="#" style="cursor:hand">CSS鼠标手型效果</a><br/>  Example：CSS鼠标手型效果 <a href="#" style=&qu
  • [IT与投资]IT投资的几个原则 comsci it
          无论是想在电商,软件,硬件还是互联网领域投资,都需要大量资金,虽然各个国家政府在媒体上都给予大家承诺,既要让市场的流动性宽松,又要保持经济的高速增长....但是,事实上,整个市场和社会对于真正的资金投入是非常渴望的,也就是说,表面上看起来,市场很活跃,但是投入的资金并不是很充足的......    
  • oracle with语句详解 daizj oraclewithwith as
    oracle with语句详解 转 在oracle中，select 查询语句，可以使用with,就是一个子查询，oracle 会把子查询的结果放到临时表中，可以反复使用 例子:注意，这是sql语句，不是pl/sql语句， 可以直接放到jdbc执行的 ----------------------------------------------------------------
  • hbase的简单操作 deng520159 数据库hbase
    近期公司用hbase来存储日志,然后再来分析 ,把hbase开发经常要用的命令找了出来. 用ssh登陆安装hbase那台linux后 用hbase shell进行hbase命令控制台! 表的管理 1）查看有哪些表 hbase(main)> list 2）创建表   # 语法：create <table>, {NAME => <family&g
  • C语言scanf继续学习、算术运算符学习和逻辑运算符 dcj3sjt126com c
    /* 2013年3月11日20:37:32 地点：北京潘家园 功能：完成用户格式化输入多个值 目的：学习scanf函数的使用 */ # include <stdio.h> int main(void) { int i, j, k; printf("please input three number:\n"); //提示用
  • 2015越来越好 dcj3sjt126com 歌曲
    越来越好 房子大了电话小了 感觉越来越好 假期多了收入高了 工作越来越好 商品精了价格活了 心情越来越好 天更蓝了水更清了 环境越来越好 活得有奔头人会步步高 想做到你要努力去做到 幸福的笑容天天挂眉梢 越来越好 婆媳和了家庭暖了 生活越来越好 孩子高了懂事多了 学习越来越好 朋友多了心相通了 大家越来越好 道路宽了心气顺了 日子越来越好 活的有精神人就不显
  • java.sql.SQLException: Value '0000-00-00' can not be represented as java.sql.Tim feiteyizu mysql
    数据表中有记录的time字段（属性为timestamp）其值为：“0000-00-00 00:00:00” 程序使用select 语句从中取数据时出现以下异常： java.sql.SQLException:Value '0000-00-00' can not be represented as java.sql.Date   java.sql.SQLException: Valu
  • Ehcache（07）——Ehcache对并发的支持 234390216 并发ehcache锁ReadLockWriteLock
    Ehcache对并发的支持          在高并发的情况下，使用Ehcache缓存时，由于并发的读与写，我们读的数据有可能是错误的，我们写的数据也有可能意外的被覆盖。所幸的是Ehcache为我们提供了针对于缓存元素Key的Read（读）、Write（写）锁。当一个线程获取了某一Key的Read锁之后，其它线程获取针对于同
  • mysql中blob,text字段的合成索引 jackyrong mysql
      在mysql中，原来有一个叫合成索引的，可以提高blob,text字段的效率性能， 但只能用在精确查询，核心是增加一个列，然后可以用md5进行散列，用散列值查找 则速度快 比如： create table abc(id varchar(10),context blog,hash_value varchar(40)); insert into abc(1,rep
  • 逻辑运算与移位运算 latty 位运算逻辑运算
    源码：正数的补码与原码相同例+7 源码：00000111 补码 ：00000111 （用8位二进制表示一个数） 负数的补码： 符号位为1，其余位为该数绝对值的原码按位取反；然后整个数加1。   -7 源码： 10000111 ，其绝对值为00000111  取反加一：11111001 为-7补码 已知一个数的补码，求原码的操作分两种情况：
  • 利用XSD 验证XML文件 newerdragon javaxmlxsd
    XSD文件 （XML Schema 语言也称作 XML Schema 定义（XML Schema Definition，XSD）。 具体使用方法和定义请参看： http://www.w3school.com.cn/schema/index.asp java自jdk1.5以上新增了SchemaFactory类 可以实现对XSD验证的支持，使用起来也很方便。 以下代码可用在J
  • 搭建 CentOS 6 服务器(12) - Samba rensanning centos
    （1）安装 # yum -y install samba Installed: samba.i686 0:3.6.9-169.el6_5 # pdbedit -a rensn new password:123456 retype new password:123456 …… （2）Home文件夹 # mkdir /etc
  • Learn Nodejs 01 toknowme nodejs
    （1）下载nodejs https://nodejs.org/download/ 选择相应的版本进行下载     （2）安装nodejs 安装的方式比较多，请baidu下 我这边下载的是“node-v0.12.7-linux-x64.tar.gz”这个版本 （1）上传服务器 （2）解压 tar -zxvf  node-v0.12.
  • jquery控制自动刷新的代码举例 xp9802 jquery
    1、html内容部分  复制代码代码示例: <div id='log_reload'> <select name="id_s" size="1"> <option value='2'>-2s-</option> <option value='3'>-3s-</option
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他