蓝绿蓝绿色绿色漂亮设计博客blogbootstrap手机响应式个人主页个人ui设计师.rar资源-CSDN文库

共11个文件

js：4个

css：3个

jpg：2个

需积分: 5 199 浏览量 2023-09-12 08:45:55 上传评论收藏 220KB RAR 举报

标题中的“蓝绿蓝绿色绿色漂亮设计博客blogbootstrap手机响应式个人主页个人ui设计师.rar”表明这是一个关于网页设计的资源包，特别强调了颜色主题为蓝绿色，且采用了Bootstrap框架来构建一个响应式的个人主页，适合UI设计师使用。描述中的信息进一步确认了这是一款基于Bootstrap的模板，适用于创建美观的个人博客，特别是对于女性博主，具有良好的手机适应性。 Bootstrap是一个广泛使用的开源前端开发框架，它提供了一系列预先设计的CSS和JavaScript组件，如网格系统、导航条、模态框等，可以帮助开发者快速构建响应式和移动优先的网站。在这个模板中，我们可以看到几个关键的文件： 1. `theme.css`：这是主题样式表，包含特定于这个博客模板的CSS样式，用于定制界面的外观和布局，包括蓝绿色调的应用。 2. `bootstrap.min.css`：Bootstrap的核心样式文件，包含了框架的所有基本样式和组件样式，已经进行了压缩，以减少页面加载时间。 3. `jquery.mCustomScrollbar.css`：这是一个自定义滚动条插件的CSS文件，用于美化网页的滚动条，提升用户体验。 4. `index.html`：这是网站的主入口文件，包含了HTML结构，引用了其他的CSS和JS文件，并可能包含了一些基本的页面内容。 5. `responsive-template-for-woman-blog.jpg`：可能是一个预览图，展示了这个模板在女性博客场景下的响应式效果。 6. `thumb1.jpg`：可能是一个示例图片，用于在模板中展示内容或作为占位符。 7. `jquery.js`：jQuery库，一个轻量级的JavaScript库，简化了DOM操作、事件处理和动画制作。 8. `bootstrap_mode_blogalt.js`：这个可能是对Bootstrap功能的扩展或定制，尤其是针对博客的特定功能。 9. `jquery.mCustomScrollbar.js`：与`jquery.mCustomScrollbar.css`相匹配的JavaScript文件，实现了自定义滚动条的功能。 10. `jquery.localscroll-1.2.7-min.js`：这是jQuery的一个插件，用于实现平滑的局部滚动效果，增加页面的交互性和视觉吸引力。综合这些文件，我们可以了解到这个模板利用Bootstrap的响应式特性，为个人UI设计师提供了一个蓝绿色调、具有良好手机适应性的博客平台。用户可以自定义主题，通过`index.html`调整内容布局，利用`jquery.*.js`文件增强交互体验，同时，通过`theme.css`和`bootstrap.min.css`调整视觉风格，以满足个人品牌或设计需求。对于那些希望快速建立个人博客或展示作品的UI设计师来说，这是一个非常实用的工具。

资源推荐

资源详情

资源评论

收起资源包目录

蓝绿色漂亮UI设计博客bootstrap模板_蓝绿蓝绿色绿色漂亮设计博客blogbootstrap手机响应式个人主页个人ui设计师.rar （11个子文件）

thumb.png 37KB

bootstrap.min.css 90KB

jquery.mCustomScrollbar.css 13KB

theme.css 129KB

index.html 25KB

bootstrap_mode_blogalt.js 56KB

responsive-template-for-woman-blog.jpg 76KB

thumb1.jpg 38KB

jquery.js 90KB

jquery.mCustomScrollbar.js 44KB

jquery.localscroll-1.2.7-min.js 2KB

<!DOCTYPE html>  <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <title>Base page</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content="">    <link href="css/theme.css" rel="stylesheet"> <link href="assets/css/jquery.mCustomScrollbar.css" rel="stylesheet">  <link href='http://fonts.googleapis.com/css?family=Roboto:400,300,700italic,700,500&subset=latin,latin-ext' rel='stylesheet' type='text/css'>  <style type="text/css"> body { padding-top: 0px; padding-bottom: 40px; padding-top: 0px; padding-bottom: 0px; font-family: 'Roboto', sans-serif; } h1,h2,h3,h4,h5,h6{ font-weight:200; } .navbar-inverse .navbar-inner{ -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; background:#282828; border:none; } .page-header{ border:none; padding: 10px 0px 0px; margin: 0px 0 0px; } .brand{ margin-left:20px; font-weight:700; } .thumbnail{ border:none; padding:0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; margin-bottom:20px; } .thumbnail img{ min-width:100%; height:auto; } .well { min-height: 20px; padding: 19px; margin-bottom: 20px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .tab-content .tab-pane{ max-height:600px; position:relative; overflow:auto; } .fixed-top{ position:fixed; top:0px; bottom:0px; display:inline-block; max-width:360px; z-index:1030; } footer{ padding-top:40px; margin-top:40px; border-top:1px solid #dedede; } .related-projects{ padding-top:40px; margin-top:40px; } /*************** @media ******************/ @media (max-width: 940px){ .brand { display:block; text-align:center; font-size:26px; } } @media (max-width: 1200px) and (min-width: 940px){ .fixed-top{ max-width:300px; } } @media (max-width: 940px) and (min-width: 768px){ .fixed-top{ max-width:225px; } } </style> <link href="assets/css/font-awesome.min.css" rel="stylesheet">       <link rel="shortcut icon" href="assets/ico/favicon.ico"> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png"> <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png"> <body> <div class="container">   <div class="navbar navbar-inverse"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Project name</a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li class="dropdown-header">Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> </div> </div> </div> </div> <div class="page-header"> <div class="container"> <div class="row"> <div class="col-sm-4 col-lg-4"> <a class="brand" href="#">YOURBRAND.COM</a> </div> <div class="col-sm-8 col-lg-8"> <div class="well text-center"> <a href="#">#</a> ADDS HERE </div> </div> </div> <div class="row"> <div class="col-sm-12 col-lg-12"> <p class="alert alert-success" style="text-transform:uppercase; display:inline-block; box-sizing:border-box; -moz-box-sizing:border-box;width:100%;"><span class="label label-important">Announcement:</span> Here goes your news and infos lorem ipsum Here goes your news and infos lorem ipsum </p> </div> </div> </div>  </div> <div class="container">  <div class="row">  <div class="visible-md visible-lg col-sm-4 col-lg-4"> <div id="left-side-menu"> <div class="well"> <div class="tabbable"> <ul class="nav nav-tabs"> <li class="active"><a href="#1" data-toggle="tab">Popular</a></li> <li><a href="#2" data-toggle="tab">Latest</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="1">  <div class="row"> <div class="col-sm-8 col-lg-8"> <p>PANE#1 Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </div> <div class="col-sm-4 col-lg-4"> <div class="thumbnail"> <img class="img-responsive" src="images/thumb.png" alt="post image"> </div> </div> </div>  <hr>  <div class="row"> <div class="col-sm-8 col-lg-8"> <p>Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </div> <div class="col-sm-4 col-lg-4"> <div class="thumbnail"> <img class="img-responsive" src="images/thumb.png" alt="post image"> </div> </div> </div>  <hr>  <div class="row"> <div class="col-sm-8 col-lg-8"> <p>Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </div> <div class="col-sm-4 col-lg-4"> <div class="thumbnail"> <img class="img-responsive" src="images/thumb.png" alt="post image"> </div> </div> </div> <!-- /

评论收藏

内容反馈