网站建设什么公司专业,网站建设方案书封面,网页主图模板,合肥做网站联系方式前端框架Bootstrap 该框架已经帮我们写好了很多页面样式#xff0c;如果需要使用#xff0c;只需要下载对应文件 直接CV拷贝即可 在使用Bootstrap的时候#xff0c;所有的页面样式只需要通过修改class属性来调节即可 什么是Bootstrap
Bootstrap是一个开源的前端框架…前端框架Bootstrap 该框架已经帮我们写好了很多页面样式如果需要使用只需要下载对应文件 直接CV拷贝即可 在使用Bootstrap的时候所有的页面样式只需要通过修改class属性来调节即可 什么是Bootstrap
Bootstrap是一个开源的前端框架用于快速构建响应式和移动设备优先的网站或应用程序。 它包含了HTML、CSS和JavaScript的模板和工具集使开发人员能够快速地创建具有一致性和现代外观的页面布局和UI组件。Bootstrap最初由Twitter的一些工程师创建旨在简化Web开发的过程。 它提供了一个广泛的预定义样式和组件库可以轻松自定义和扩展以满足各种需求。使用Bootstrap开发人员可以更加专注于网站或应用程序的功能和逻辑而不必从头开始编写CSS样式和设计页面布局。 它提供了响应式布局的支持使得页面能够自适应不同的设备和屏幕尺寸。此外Bootstrap还提供了丰富的UI组件(如导航栏、按钮、表单、模态框等)使开发人员能够轻松地在项目中使用这些现成的组件。总而言之Bootstrap是一个强大的开发工具可帮助开发人员快速搭建出现代化和具备自适应能力的网站或应用程序。
Bootstrap引入 中文文档查询https://www.bootcss.com/ CDN加速链接 twitter-bootstrap Bootstrap 是全球最受欢迎的前端组件库用于开发响应式布局、移动设备优先的 WEB 项目。 压缩文档链接引入 https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js 注意
网络连接引入在本地不会提示相关的补充下载本地文档较为友好 Bootstrap的js代码是基于jQuery的 在使用bootstrap做动态效果时一定要引入jQuery!!! 布局容器
布局容器是指用于组织和排列其他元素的容器或容器类。在前端开发中常用的布局容器有以下三种
块级布局容器(Block-Level Layout Container)
块级布局容器会生成一个块级框它可以使用display属性设置为block、flex或者grid。常见的HTML元素如、 、 等都是块级布局容器。块级容器会独占一行并通过CSS属性进行自上而下的垂直排列。
行内布局容器(Inline Layout Container)
行内布局容器会生成一个行内框它可以使用display属性设置为inline或者inline-block。常见的HTML元素如、、等都是行内布局容器。行内容器会水平地从左到右排列直到行的边缘然后自动换行。
弹性布局容器(Flexbox Layout Container)
弹性布局容器是CSS3中的一种新型布局技术通过定义父元素作为弹性容器将其子元素称为弹性项。弹性容器通过一系列的属性灵活地控制和调整弹性项的尺寸和位置。常见的属性包括flex-direction、justify-content、align-items等。弹性布局容器的主要好处是可以实现响应式布局和灵活的排列方式。
留白
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js/scriptscript srchttps://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css/scriptscript srchttps://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js/scriptstyle.c1 {height: 1000px;width: 1000px;background-color: red;}.c2 {height: 1000px;width: 1000px;background-color: red;}/style/head
body
div classcontainer c1/div /*左右两侧有留白*/
div classcontainer-fluid c2/div /*左右两侧没有留白*/
/body
/html
栅格系统
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title!-- 本地 链接 引入方法 --!-- Websource 文件夹 拷贝到当前文件夹下即可使用 --script srcWebsource\jQuery\node_modules\jquery\dist\jquery.min.js/scriptscript srcWebsource\Bootstrap\js\bootstrap.min.js/scriptlink relstylesheet hrefWebsource\Bootstrap\css\bootstrap.min.css!-- CDN 链接 引入方法 --link relstylesheet hrefhttps://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.cssscript srchttps://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js// bootstrap /scriptscript srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js // jquery/scriptstyle.c1 {height: 100px;background-color: red;border: 5px solid black;}.c2 {height: 100px;background-color: green;}/style/head
bodydiv classcontainerdiv classrowdiv classcol-md-6 c1/divdiv classcol-md-6 c1/divdiv classcol-md-1 c1/divdiv classcol-md-1 c1/divdiv classcol-md-1 c1/divdiv classcol-md-1 c1/divdiv classcol-md-1 c1/divdiv classcol-md-1 c1/divdiv classcol-md-1 c1/divdiv classcol-md-1 c1/divdiv classcol-md-1 c1/divdiv classcol-md-1 c1/divdiv classcol-md-1 c1/divdiv classcol-md-1 c1/div/div/div/body
/html div classrow 写一个 row 就是将所在区域划分成 12 份 div classcol-md-6/div 写一个 col-md-6 获取想要的份数 列偏移
使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距(margin)。例如.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列(column)的宽度。
排版 bootstrap在设置页面的时候将字体设置成了肉眼可以接受的好看一点的字体。 表单标签 针对form表单加样式优先考虑form-control 按钮组
颜色
!-- Standard button --
button typebutton classbtn btn-default(默认样式)Default/button!-- Provides extra visual weight and identifies the primary action in a set of buttons --
button typebutton classbtn btn-primary(首选项)Primary/button!-- Indicates a successful or positive action --
button typebutton classbtn btn-success(成功)Success/button!-- Contextual button for informational alert messages --
button typebutton classbtn btn-info(一般信息)Info/button!-- Indicates caution should be taken with this action --
button typebutton classbtn btn-warning(警告)Warning/button!-- Indicates a dangerous or potentially negative action --
button typebutton classbtn btn-danger(危险)Danger/button!-- Deemphasize a button by making it look like a link while maintaining button behavior --
button typebutton classbtn btn-link(链接)Link/button
大小
pbutton typebutton classbtn btn-primary btn-lg(大按钮)Large button/buttonbutton typebutton classbtn btn-default btn-lg(大按钮)Large button/button
/p
pbutton typebutton classbtn btn-primary(默认尺寸)Default button/buttonbutton typebutton classbtn btn-default(默认尺寸)Default button/button
/p
pbutton typebutton classbtn btn-primary btn-sm(小按钮)Small button/buttonbutton typebutton classbtn btn-default btn-sm(小按钮)Small button/button
/p
pbutton typebutton classbtn btn-primary btn-xs(超小尺寸)Extra small button/buttonbutton typebutton classbtn btn-default btn-xs(超小尺寸)Extra small button/button
/p
图片
形状
img src... alt... classimg-rounded
img src... alt... classimg-circle
img src... alt... classimg-thumbnail
颜色
p classbg-primary.../p
p classbg-success.../p
p classbg-info.../p
p classbg-warning.../p
p classbg-danger.../p
清除浮动
!-- Usage as a class --
div classclearfix.../div
// Mixin itself
.clearfix() {:before,:after {content: ;display: table;}:after {clear: both;}
}// Usage as a mixin
.element {.clearfix();
}
图标 span标签 button typebutton classbtn btn-default aria-labelLeft Alignspan classglyphicon glyphicon-align-left aria-hiddentrue/span
/buttonbutton typebutton classbtn btn-default btn-lgspan classglyphicon glyphicon-star aria-hiddentrue/span Star
/button 可以改颜色 - 操作普通文本方法相同 script
.c {color:red;}
/script 图标参考网站:https://fontawesome.com.cn/
