bootstrap学习
发布时间：2020-12-17 20:57:07 所属栏目：安全 来源：网络整理
导读：特别提示：以下代码参考此网页构建：https://www.firecode.io/ css 及 js 请替换成你自己的文件地址 1.外层套container-fluid类名 2.container 3.row 4.col-sm-数字 最大为12 如： col-sm-6 5.font-size 我设置的是绝对单位的16px 针对图片的处理（来自“阿
|
特别提示：以下代码参考此网页构建：https://www.firecode.io/ css 及 js 请替换成你自己的文件地址 1.外层套container-fluid类名 针对图片的处理（来自“阿发”的帮助） 针对流式布局 在元素底部添加padding样式 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bootstrap学习</title>
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0" />
<!-- 优先使用 IE 最新版本和 Chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 页面描述 -->
<meta name="description" content="优顾留学" />
<!-- 页面关键词 -->
<meta name="keywords" content="优顾留学,优顾,顾问" />
<!-- 定义网页作者 -->
<meta name="author" content="巨大奇迹" />
<!-- 搜索引擎抓取 -->
<meta name="robots" content="index,follow" />
<link rel="stylesheet" type="text/css" href="dist/css/bootstrap.min.css"/>
<script src="coJS/jquery-2.2.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<style>
body {
font-size: 16px;
}
body,ul {
padding: 0;
margin: 0;
}
.container-fluid {
padding-left: 0;
padding-right: 0;
}
.contentOne {
background: #007BB6;
}
.navPar {
padding-top: 10px;
line-height: 40px;
}
.navUl {
font-weight: bold;
font-size: 18px;
}
.navUl li span:before {
margin-right: 10px;
}
.navUl {
overflow: hidden;
}
.navUl li {
display: inline-block;
list-style-type: none;
cursor: pointer;
}
.navUl span {
display: block;
padding: 10px;
margin-right: 20px;
}
.contentOne-1 {
padding-top: 10px;
}
.contentOne-1,.contentOne-2 {
color: #fff;
}
.contentOne-2 {
padding-top: 60px;
}
.contentOne-2 h2 {
margin: 10px 0;
font-size: 48px;
line-height: 60px;
}
.contentOne-2 .p1 {
margin-bottom: 30px;
font-size: 16px;
line-height: 25px;
}
.form-box {
padding-bottom: 80px;
}
.form-top {
padding: 15px 20px;
font-size: 20px;
background: rgba(0,0.2);
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
.form-top h3 {
text-align: left;
line-height: 40px;
}
.form-content {
padding: 40px 20px;
background: rgba(0,0.4);
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
.submit {
margin-top: 20px;
margin-bottom: 20px;
}
.signType .btn {
width: 100%;
margin: 10px 0;
padding: 15px;
border-radius: 10px;
}
@media(min-width: 960px){
.pic {
width: 500px;
}
}
@media(max-width: 960px){
.pic {
width: 100%;
}
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="contentOne">
<header class="container contentOne-1">
<div class="row navPar">
<div class="col-sm-6">
<a href="/">
<img src="img/UrgooTb@2x.png" alt="" />
</a>
</div>
<ul class="col-sm-6 navUl ">
<li>
<span class="glyphicon glyphicon-home">Home</span>
</li>
<li>
<span class="glyphicon glyphicon-question-sign">FQA</span>
</li>
</ul>
</div>
</header>
<div class="container contentOne-2">
<div class="row">
<div class="col-sm-7" style="padding-bottom: 80px;">
<h2>
A <strong>learning-first</strong>
approach to getting a <strong>six-figure</strong>
technology job
</h2>
<p class="p1">
Firecode.io uses learning algorithms and curated coding interview questions to help you land your next dream tech job.
</p>
<img class="pic" src="https://www.firecode.io/assets/new-macbook-landing.png"
style="height: auto;"/>
</div>
<div class="col-sm-5 form-box">
<div class="form-top">
<h3>Sign up and start learning in minutes - for free</h3>
</div>
<div class="form-content">
<div class="form-group-lg">
<input type="text" class="form-control" placeholder="Sgin in">
</div>
<button type="button" class="btn btn-primary btn-lg btn-block submit">
Large button
</button>
<div class="row signType">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
<button class="btn" style="background: #3A5898;">Sign up with Facebook</button>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
<button class="btn" style="background: #C64333;">Sign up with Facebook</button>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
<button class="btn" style="background: #007AB5;">Sign up with Facebook</button>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
<button class="btn" style="background: #44658E;">Sign up with Facebook</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
