使用bootstrap前端UI框架 ,现学现用搭建个人博客
2020-07-13 04:51
351 查看
先下载bootstrap 到本地电脑官网地址 创建一个文件夹把 下载好的bootstrap文件里面的 css,fonts,js放进文件夹里面然后打开编译器 导入文件夹 在创建一个HTML文件
运行第一个bootstrap helloword页面
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! --> <title>Bootstrap helloword</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!--手动引入bootstra.min.css文件--> <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 --> <!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 --> <!--[if lt IE 9]> <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script> 用来兼容ie8 <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script> <![endif]--> </head> <body> <h1>Bootstrap helloword</h1> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) --> <script src="js/jquery-1.11.1.min.js"></script> <!--引入jquery.js文件--> <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --> <script src="js/bootstrap.min.js"></script> <!--引入bootstrap.js文件--> </body> </html>
响应式布局,栅格系统
一行12个格子 指定元素占几个格子
定义容器相当于 table 容器分2种 :.container (固定宽度)或 .container-fluid (100% 宽度)
定义行相当于 tr, 行(row)
定义元素相当于 td 改元素在不同的设备上,所占的格子数目 样式:.col-设备代号-格子数目
设备代号:4中不同大小的屏幕
1, xs: col-xs-12 超小屏幕 手机 (<768px) 2, sm: col-sm- 小屏幕 平板 (≥768px) 3, md: col-md- 中等屏幕 桌面显示器 (≥992px) 4, lg: col-lg- 大屏幕 大桌面显示器 (≥1200px)
1,一行如果格子数目超过12 ,超出的地方自动换行 ,
2,向上兼容属性就是 栅格属性小 真实设备大 可以向上兼容 反之
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! --> <title>栅格系统的基本使用</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!--手动引入bootstra.min.css文件--> <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 --> <!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 --> <!--[if lt IE 9]> <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script> 用来兼容ie8 <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script> <![endif]--> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) --> <script src="js/jquery-1.11.1.min.js"></script> <!--引入jquery.js文件--> <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --> <script src="js/bootstrap.min.js"></script> <!--引入bootstrap.js文件--> <style> .inner{ border: 2px solid rebeccapurple; } </style> </head> <body> <div class="container-fluid "> <!--定义容器 container-fluid 宽度100% container两边留白--> <div class="row"> <!--定义行--> <div class="col-lg-1 col-sm-2 inner">一个</div> <!--定义元素--> <div class="col-lg-1 col-sm-2 inner">一个</div> <div class="col-lg-1 col-sm-2 inner">一个</div> <div class="col-lg-1 col-sm-2 inner">一个</div> <div class="col-lg-1 col-sm-2 inner">一个</div> <div class="col-lg-1 col-sm-2 inner">一个</div> <div class="col-lg-1 col-sm-2 inner">一个</div> <div class="col-lg-1 col-sm-2 inner">一个</div> <div class="col-lg-1 col-sm-2 inner">一个</div> <div class="col-lg-1 col-sm-2 inner">一个</div> <div class="col-lg-1 col-sm-2 inner">一个</div> <div class="col-lg-1 col-sm-2 inner">一个</div> </div> </div> </body> </html>
熟悉一下全局css样式
按钮 : btn btn-default default指默认 <a class="btn btn-default" href="#" role="button">Link</a> <button class="btn btn-default" type="submit">Button</button> <input class="btn btn-default" type="button" value="Input"> <input class="btn btn-default" type="submit" value="Submit"> ----- 其它颜色:可以换其他btn-primary">(首选项),btn-success">(成功) <button type="button" class="btn btn-primary">(首选项)Primary</button> ------ 大小:btn-lg <button type="button" class="btn btn-primary btn-lg">(大按钮)Large button</button> 图片: img-responsive 图片永远占100% <img src="..." alt="..." class="img-responsive"> 三种形态 圆形,正方形 ,元正方形 <img src="..." alt="..." class="img-rounded"> <img src="..." alt="..." class="img-circle"> <img src="..." alt="..." class="img-thumbnail"> 表格:<table class="table table-striped table-bordered table-hover"></table> 表格:table 条纹状表格:table-striped 带边框的表格:table-bordered 鼠标悬停:table-hover 。。。。。。。 表单:form-control <form> <div class="form-group"> <div class="container-fluid col-sm-5"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control " id="exampleInputEmail1" placeholder="Email"> </div> </div> <div class="checkbox"> <label> <input type="checkbox"> Check me out </label> </div> <button type="submit" class="btn btn-default">Submit</button> </form> 导航条: <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></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 role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></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 role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav>
js轮播图
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="..." alt="..."> <div class="carousel-caption"> ... </div> </div> <div class="item"> <img src="..." alt="..."> <div class="carousel-caption"> ... </div> </div> ... </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
**个人博客已经搭建好了 欢迎访问 博客地址http://dogslovecats.cool/
第二个 博客地址http://120.78.125.30/
相关文章推荐
- 从零开始,搭建博客系统MVC5+EF6搭建框架(4)上,前后台页面布局页面实现,介绍使用的UI框架以及JS组件
- ThinkPHP 5 项目搭建与h-ui前端框架的使用
- [置顶] Hexo-免费个人博客搭建框架使用
- 从零开始,搭建博客系统MVC5+EF6搭建框架(4)上,前后台页面布局页面实现,介绍使用的UI框架以及JS组件
- Django搭建个人博客:使用 Bootstrap 4 改写模板文件
- 【干货】利用MVC5+EF6搭建博客系统(四)(上)前后台页面布局页面实现,介绍使用的UI框架以及JS组件
- 基于之前写的博客(SSM框架搭建以及简单增删改查以及分页功能的实现(前端bootstrap+css+jq))进一步的封装(改为SqlSessionTemplate方式实现)
- 使用GitHub + Hexo搭建个人博客(三)- npm(Node Packaged Modules)
- 如何使用hugo搭建个人博客(四):添加评论系统disqus
- DigitalOcean上使用Tornado+MongoDB+Nginx+Supervisor+DnsPod快速搭建个人博客
- 使用hexo搭建个人博客
- 利用ASP.NET MVC+Bootstrap搭建个人博客之修复UEditor编辑时Bug(四)
- 使用hexo搭建个人博客
- 使用GitHub + Hexo搭建个人博客(二)- nvm(Node Version Manager)
- 使用 Github Pages 和 Hexo 搭建个人博客
- web前端框架中bootstrap学习,并且网页中插件动画插件的使用。
- django使用bootstrap前端框架
- 利用ASP.NET MVC和Bootstrap快速搭建响应式个人博客站(一)
- amazeui/bootstrap框架及前端相关的知识概要!
- mac 使用Github搭建个人博客