每个人都想创建一个与所有设备(例如计算机,笔记本电脑,平板电脑和移动设备)兼容的网站。因此,使网站具有响应性的最佳方法是使用Bootstrap创建网站。
由于它是一个单页网站,当您单击网站上的任何菜单时,它将带您进入特定部分。
代码实现:
HTML代码:
在HTML代码中,您必须从引导程序复制入门模板,然后将其粘贴到HTML文件中。之后,创建一个导航栏。
然后,您只需要使用引导程序的网格系统,就可以创建一个像这样的简单且响应迅速的网站。
index.html
GFG
SERVICES
Website Design
User Experience Design.
Website Content Strategy.
Cross Browser
and Platform Testing.
Bulk SMS
1.Toll Free Number
2. IVR
3. Virtual Number
4. Political or any
Voice Broadcasting
Payment Gateways
PayU India is the flagship company of
Naspers group which is a $25
Billion internet and media conglomerate
listed on London and
Johannesburg stock exchanges respectively.
About Us
Why Us
-
Probuz is all about Delivering High
Quality web design and development
services, Cost effective and
reliable solutions.
- SCHOOL/COLLEGE MANAGEMENT SOFTWARE
(CAMPUS PRO)
-
Let us take care of your Business needs.
Customer Productivity is our Priority.
- Our expertise in Business includes
Our Products
Product List
- CLINIC MANAGMENT SYSTEM
- SCHOOL/COLLEGE MANAGEMENT
SOFTWARE (CAMPUS PRO)
- SERVICE MANAGEMENT SOFTWARE
- E-COMMERCE WEBSITE
style.css
*{
margin: 0;
padding: 0;
font-family: 'Roboto Condensed', sans-serif;
}
/* navbar */
.navbar-nav{
margin-right: 0 !important;
padding-right: 100px;
}
.navbar{
background-color: #0a193d;
color: white !important;
}
.nav-item a{
color: white !important;
}
.nav-item{
padding-left: 2px;
}
.navbar-brand{
color: white !important;
padding-left: 100px;
}
#navbar button{
color: white !important;
}
/* banner */
#banner-container{
background-color: #0a193d;
color: white !important;
padding-top: 80px;
padding-bottom: 80px;
}
#banner-row img{
max-width: 70%;
height: auto;
display: block;
padding-left: 30px;
}
#banner-row h3, p{
padding-left: 20px;
padding-top: 20px;
text-align: center;
}
#banner-row a{
background-color: white !important;
color: black !important;
border: none;
margin-left: 20px;
margin-top: 20px;
}
#banner-col{
padding-left: 20px;
}
/* service */
#service{
padding-top: 80px;
padding-bottom: 80px;
}
#service h1{
padding-bottom: 70px;
}
/* about */
#about{
padding-top: 80px;
padding-bottom: 80px;
}
#about h1{
padding-bottom: 70px;
}
#about-col ul{
padding-top: 50px;
padding-left: 50px;
}
#about-col ul li{
padding-top: 15px;
}
/* product */
#product{
padding-top: 80px;
padding-bottom: 80px;
}
#product h1{
padding-bottom: 70px;
}
#product-col2 ul{
padding-top: 90px;
}
#product-col2 ul li{
padding-top: 15px;
}
/* social */
#social{
padding-top: 80px;
padding-bottom: 80px;
}
#social h1{
padding-bottom: 70px;
}
.social-col a:hover img{
transform: translateY(-10px);
}
#social-row{
flex-direction: row;
}
/* footer */
.mb-3{
padding-top: 10px;
}
/* media */
@media only screen and (max-width: 987px){
.navbar-brand{
padding-left: 0px;
}
}
@media only screen and (max-width: 768px){
#banner-row img{
padding-top: 20px;
}
.social-col{
width: 33%;
}
}
CSS代码:
因此,众所周知,引导程序不足以使网站具有交互性,因此请在此处添加一些CSS。
您可以根据需要更改导航栏的背景颜色。
style.css
*{
margin: 0;
padding: 0;
font-family: 'Roboto Condensed', sans-serif;
}
/* navbar */
.navbar-nav{
margin-right: 0 !important;
padding-right: 100px;
}
.navbar{
background-color: #0a193d;
color: white !important;
}
.nav-item a{
color: white !important;
}
.nav-item{
padding-left: 2px;
}
.navbar-brand{
color: white !important;
padding-left: 100px;
}
#navbar button{
color: white !important;
}
/* banner */
#banner-container{
background-color: #0a193d;
color: white !important;
padding-top: 80px;
padding-bottom: 80px;
}
#banner-row img{
max-width: 70%;
height: auto;
display: block;
padding-left: 30px;
}
#banner-row h3, p{
padding-left: 20px;
padding-top: 20px;
text-align: center;
}
#banner-row a{
background-color: white !important;
color: black !important;
border: none;
margin-left: 20px;
margin-top: 20px;
}
#banner-col{
padding-left: 20px;
}
/* service */
#service{
padding-top: 80px;
padding-bottom: 80px;
}
#service h1{
padding-bottom: 70px;
}
/* about */
#about{
padding-top: 80px;
padding-bottom: 80px;
}
#about h1{
padding-bottom: 70px;
}
#about-col ul{
padding-top: 50px;
padding-left: 50px;
}
#about-col ul li{
padding-top: 15px;
}
/* product */
#product{
padding-top: 80px;
padding-bottom: 80px;
}
#product h1{
padding-bottom: 70px;
}
#product-col2 ul{
padding-top: 90px;
}
#product-col2 ul li{
padding-top: 15px;
}
/* social */
#social{
padding-top: 80px;
padding-bottom: 80px;
}
#social h1{
padding-bottom: 70px;
}
.social-col a:hover img{
transform: translateY(-10px);
}
#social-row{
flex-direction: row;
}
/* footer */
.mb-3{
padding-top: 10px;
}
/* media */
@media only screen and (max-width: 987px){
.navbar-brand{
padding-left: 0px;
}
}
@media only screen and (max-width: 768px){
#banner-row img{
padding-top: 20px;
}
.social-col{
width: 33%;
}
}
输出:
您可以通过给定的链接检出该项目– https://saurabhsonewane.github.io/gfg1.github.io/
Get In Touch