电商网站建设与课程设计,泊头哪里有做网站的,南昌地宝网最新招聘信息,山东一建建设有限公司网站大家好#xff0c;欢迎来到无限大的频道。
今天继续带领大家开始0基础学前端。
一、 什么是Bootstrap框架#xff1f;
Bootstrap是一个开源前端框架#xff0c;于2011年由Twitter的开发团队开发并发布。其主要目的是简化开发过程#xff0c;并使开发者能够轻松快速地构建…大家好欢迎来到无限大的频道。
今天继续带领大家开始0基础学前端。
一、 什么是Bootstrap框架
Bootstrap是一个开源前端框架于2011年由Twitter的开发团队开发并发布。其主要目的是简化开发过程并使开发者能够轻松快速地构建响应式网站和应用程序。它提供了一系列的HTML、CSS和JavaScript组件如网格系统、按钮、导航栏、表单等帮助开发者创建一致且美观的用户界面。Bootstrap最大的优势在于其响应式设计能够自动适应各种设备尺寸。此外Bootstrap的丰富文档和活跃的社区使其成为初学者和专业开发者的热门选择。
著名的应用
众多网站和应用程序使用Bootstrap来构建其前端界面。其中一些著名的例子包括
Twitter: 作为Bootstrap的发源地Twitter为初始开发提供了很多资源。LinkedIn: 职业社交平台LinkedIn利用Bootstrap确保其界面的可维护性和高效性。Vogue: 著名时尚杂志Vogue的网站也使用了Bootstrap来提高用户体验。
这些企业利用Bootstrap来快速构建和迭代其产品同时确保跨设备的用户体验一致性。
二、Bootstrap的重要和常用内容
1. 网格系统Grid System
Bootstrap的网格系统是其核心之一它使用灵活的容器container来进行布局通过行row和列col的组合构成。默认情况下它基于12列的布局允许你通过组合不同的列宽来创建不同的页面布局。网格系统通过响应式设计确保布局在各种设备上都能良好显示。 容器Container: container类用于固定宽度的布局而container-fluid用于全宽度布局。它们是每行的父元素。 div classcontainer!-- Content here --
/div行Row: row类用于水平排列列。每个row必须包含在container内。 div classrowdiv classcolColumn/div
/div列Columns: col-*类定义列的宽度。可以是动态col或固定比例col-md-4。 div classcol-md-4Medium 4/12/div
div classcol-md-8Medium 8/12/div2. 排版Typography
Bootstrap提供了一整套一致的排版样式包括标题、段落、文本格式化和对齐选项。默认字体使用Helvetica Neue, Helvetica, Arial, sans-serif。 标题和副标题: 使用h1到h6标签自带Bootstrap的样式。 字体大小与颜色: 提供了一系列帮助类如text-primary、text-secondary等用于快速修改文本颜色。 h1 classtext-primaryPrimary Heading/h1
p classleadThis is a lead paragraph./p3. 组件Components
Bootstrap提供了丰富的UI组件这些组件已经过精心设计、测试和调试使得它们在各类项目中高度复用和便捷使用。 按钮Buttons: 多种样式可选如btn-primary蓝色btn-secondary灰色等。 button typebutton classbtn btn-primaryPrimary Button/button导航栏Navbar: 提供响应式、可定制的导航栏。 nav classnavbar navbar-expand-lg navbar-light bg-lighta classnavbar-brand href#Brand/a
/nav模态框Modal: 用于创建模态提示和对话框。 button typebutton classbtn btn-primary data-togglemodal data-target#exampleModal Open Modal/button4. JavaScript插件JavaScript Plugins
Bootstrap包含了一些JavaScript插件用于增强UI的交互性。这些插件大多依赖于jQuery因此需要在页面中引入jQuery。 模态框Modals: 提供对话框、多媒体查看器、lightbox等功能。 轮播Carousel: 用于创建响应式、自动循环的图片或内容滑块。 div idcarouselExample classcarousel slide data-ridecarousel!-- Carousel content here --
/div5. 表单Forms
Bootstrap提供了格式统一且美观的表单样式包括输入框、选择框、单选按钮、复选框等所有组件均有一致的间距和风格。 表单控制Form Control: 使用类如form-control来美化输入元素。 input typetext classform-control placeholderEnter text表单布局: 支持水平表单和内联表单布局样式为复杂的表单设计提供了良好的基础。
通过使用Bootstrap这一前端框架可以大幅减少开发时间提高代码可维护性并确保在不同设备上的一致性。Bootstrap的灵活性和易用性使其成为初学者和经验丰富的开发者都青睐的选择。
自定义样式Customizing Styles
开发者可以通过覆盖Bootstrap的默认样式或者直接编辑其源代码来定制自己想要的风格。此外Bootstrap 4开始引入的SCSS支持更是提升了其定制的灵活性。
使用Bootstrap优化代码实例
个人主页优化
首先引入Bootstrap的CSS文件
head!-- Add Bootstrap CSS CDN link --link hrefhttps://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css relstylesheet
/head然后将代码中的结构修改以适应Bootstrap的类如使用container、row、col进行布局结构的调整。
!DOCTYPE html
html langzh-CN
head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的个人主页/title !-- 替换为国内可访问的Bootstrap CSS CDN -- link hrefhttps://cdn.jsdelivr.net/npm/bootstrap4.5.2/dist/css/bootstrap.min.css relstylesheet link relstylesheet hrefstyles.css
/head
body !-- Navbar -- nav classnavbar navbar-expand-lg navbar-dark bg-dark a classnavbar-brand href#个人主页/a button classnavbar-toggler typebutton data-togglecollapse data-target#navbarNav aria-controlsnavbarNav aria-expandedfalse aria-labelToggle navigation span classnavbar-toggler-icon/span /button div classcollapse navbar-collapse idnavbarNav ul classnavbar-nav ml-auto li classnav-item activea classnav-link href#首页/a/li li classnav-itema classnav-link href#bio关于我/a/li li classnav-itema classnav-link href#hobbies兴趣/a/li li classnav-itema classnav-link href#contact联系/a/li /ul /div /nav !-- Header -- header classheader bg-dark text-white text-center py-3 h1欢迎来到我的个人主页/h1 /header !-- Main Content -- main classcontent container mt-4 div classrow !-- Bio Section -- section idbio classcol-lg-4 col-md-6 mb-4 div classcard shadow-sm img srchttps://wxdwuxd.oss-cn-beijing.aliyuncs.com/4027b724a62b206a73ba495e732af2b.jpg classcard-img-top altProfile Image div classcard-body h2 classcard-title关于我/h2 p classcard-text你好我是一个前端开发的初学者正在学习如何创建美观且有用的网页。/p /div /div /section !-- Hobbies Section -- section idhobbies classcol-lg-4 col-md-6 mb-4 div classcard shadow-sm div classcard-body h2 classcard-title爱好与兴趣/h2 ul classlist-group list-group-flush li classlist-group-item编程/li li classlist-group-item阅读/li li classlist-group-item旅行/li /ul /div /div /section !-- Projects Section -- section classcol-lg-4 col-md-6 mb-4 div classcard shadow-sm div classcard-body h2 classcard-title查看我的作品/h2 ul classlist-group list-group-flush li classlist-group-itema href#我的第一个项目/a/li li classlist-group-itema href#一个有趣的项目/a/li /ul /div /div /section /div !-- Contact Form Section -- section idcontact classpy-4 bg-light rounded shadow-sm h2 classtext-center联系我/h2 form classpx-4 div classform-row div classform-group col-md-6 label forname姓名/label input typetext classform-control idname placeholder输入姓名 /div div classform-group col-md-6 label foremail邮箱/label input typeemail classform-control idemail placeholder输入邮箱 /div /div div classform-group label formessage留言/label textarea classform-control idmessage rows4 placeholder输入留言/textarea /div button typesubmit classbtn btn-primary发送/button /form /section /main !-- Footer -- footer classfooter bg-dark text-white text-center py-2 p联系我a classtext-white hrefhttps://blog.csdn.net/wxdzuishaui?spm1010.2135.3001.5343我的博客/a/p /footer /body
/html把对应的css代码也进行一个调整
body { margin: 0; font-family: Roboto, sans-serif;
} .header { text-shadow: 2px 2px 4px #000000;
} .navbar-brand,
.nav-link { font-size: 1.1em;
} .content { padding: 20px 0;
} .card { border: none; /* 清除默认边框 */ border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); transition: transform 0.3s; overflow: hidden;
} .card:hover { transform: scale(1.05);
} .card-img-top { object-fit: cover; height: 200px;
} .card-title { font-size: 1.5em;
} ul { list-style: none; padding: 0;
} li { margin-bottom: 10px;
} a { color: #0066cc; text-decoration: none;
} a:hover { text-decoration: underline; color: #004999;
} .form-control { margin-bottom: 15px;
} .btn-primary { background-color: #0066cc; border-color: #0066cc;
} .btn-primary:hover { background-color: #004999; border-color: #004999;
} .footer { background-color: #333; color: white; text-align: center; padding: 10px; width: 100%; box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.2);
}KD介绍代码优化
如上在head中引入Bootstrap的CSS。在body中用Bootstrap类替换现有的结构以实现响应式设计。
!DOCTYPE html
html langzh-CN
head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title凯文·杜兰特/title !-- 使用国内可访问的Bootstrap CSS CDN -- link hrefhttps://cdn.jsdelivr.net/npm/bootstrap4.5.2/dist/css/bootstrap.min.css relstylesheet link relstylesheet hrefkd.css
/head
body !-- Navbar -- nav classnavbar navbar-expand-lg navbar-dark bg-dark a classnavbar-brand href#杜兰特主页/a button classnavbar-toggler typebutton data-togglecollapse data-target#navbarNav aria-controlsnavbarNav aria-expandedfalse aria-labelToggle navigation span classnavbar-toggler-icon/span /button div classcollapse navbar-collapse idnavbarNav ul classnavbar-nav ml-auto li classnav-item activea classnav-link href#首页/a/li li classnav-itema classnav-link href#bio简介/a/li li classnav-itema classnav-link href#career职业生涯/a/li li classnav-itema classnav-link href#teams球队历程/a/li li classnav-itema classnav-link href#achievements成就/a/li li classnav-itema classnav-link href#personal-life个人生活/a/li /ul /div /nav header classheader h1凯文·杜兰特/h1 /header main classcontainer content mt-4 div classrow div classcol-md-4 section classimage text-center mb-4 img srchttps://wxdwuxd.oss-cn-beijing.aliyuncs.com/6fa6ec013f49061e5c313827b6099f2.png alt凯文·杜兰特 classrounded-circle img-fluid /section /div div classcol-md-8 section idbio classbio mb-4 h2简介/h2 p凯文·杜兰特Kevin Durant是NBA著名篮球运动员司职小前锋.../p /section section idcareer classcareer mb-4 h2职业生涯/h2 p杜兰特的职业生涯始于2007年他在2007年NBA选秀中被西雅图超音速以第一顺位选中.../p /section /div /div div classrow div classcol-md-6 section idteams classteams mb-4 h2球队历程/h2 ul classlist-group li classlist-group-item西雅图超音速 (2007-2008)/li li classlist-group-item俄克拉荷马城雷霆 (2008-2016)/li li classlist-group-item金州勇士 (2016-2019)/li li classlist-group-item布鲁克林篮网 (2019-2022)/li li classlist-group-item菲尼克斯太阳 (2022-至今)/li /ul /section /div div classcol-md-6 section idachievements classachievements mb-4 h2成就/h2 ul classlist-group li classlist-group-item两届NBA总冠军 (2017, 2018)/li li classlist-group-item四届NBA得分王 (2010, 2011, 2012, 2014)/li li classlist-group-item两届总决赛MVP (2017, 2018)/li li classlist-group-itemNBA常规赛MVP (2014)/li li classlist-group-item2021年东京奥运会金牌/li li classlist-group-item十届NBA全明星/li /ul /section /div /div section idpersonal-life classpersonal-life mb-5 h2个人生活/h2 p杜兰特在场外也十分活跃他积极参与慈善和社区活动成立了「凯文·杜兰特慈善基金会」旨在帮助年轻人和改善社区生活。此外他还是投资者参与了多个初创公司的投资。/p /section /main footer classfooter bg-dark text-white text-center py-2 p© 2024 凯文·杜兰特粉丝页面/p /footer
/body
/htmlbody { font-family: Roboto, sans-serif; color: #f0f0f0; margin: 0; padding: 0; background-color: #121212;
} .header { background: linear-gradient(135deg, #1a1a1a 25%, #000000 100%); color: #f0f0f0; text-align: center; padding: 20px; text-shadow: 2px 2px 5px #000000;
} .content { padding: 0 15px;
} .img-fluid { max-width: 70%; border-radius: 50%; transition: transform 0.5s;
} .img-fluid:hover { transform: rotate(360deg);
} .bio, .career, .achievements, .teams, .personal-life { background: rgba(34, 34, 34, 0.8); color: #f0f0f0; padding: 20px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
} h1, h2 { margin-top: 0;
} .list-group-item { background: transparent; color: #f0f0f0; border: none;
} .footer { background-color: #1a1a1a; color: #f0f0f0; text-align: center; padding: 10px; box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.3);
}
