详解Bootstrap使用基础教程

来源:爱站网时间:2019-09-05编辑:网友分享
Bootstrap是用于快速开发Web应用程序和网站的前端框架,Bootstrap基于HTML、CSS、JavaScript而建成,那么让爱站技术频道小编来给大家说说详解Bootstrap使用基础教程吧。

Bootstrap是用于快速开发Web应用程序和网站的前端框架,Bootstrap基于HTML、CSS、JavaScript而建成,那么让爱站技术频道小编来给大家说说详解Bootstrap使用基础教程吧。

一:Bootstrap简介

  Boostrap是一个非常受欢迎的前端开发框架,该框架极大的提高前端团队的开发效率。 Bootstrap对常见的CSS布局组件和JavaScript插件进行了完整的封装,使开发人员可以轻松使用。 使用Bootstrap可以快速制作精美的响应式页面,并且兼容移动端。

二:Bootstrap特性

  提供一套完整的CSS插件 丰富的预定义样式表 一组基于jQuery的JS插件表 灵活的响应式删格系统 移动先行 基于Less和Sass开发。

三:使用Bootstrap

 1. 第一步:

  到http://www.bootcss.com/下载最新的bootstrap。 解压后有三个文件夹,分别放置css,js和字体。 CSS和JavaScript文件分别有一个压缩版,可以根据需要选择一个版本。开发时使用未压缩版,在发布时使用压缩版本。

 2.固定模板代码展示


 

  

你好,世界!

3.基本用法:

  3.1整体框架-12栅格系统

  bootstrap的核心是12栅格系统。 12栅格系统就是把网页的内容区域按照宽度平分为12份,网页开发人员可以自由按份组合,方便网页的布局,使排版看起来整齐规范。

  bootstarp提供了一个名为container的样式容器 .container是一个自动居中,高度自适应的样式。用.container作为网页内容最外层的div样式,可以轻松的实现12栅格的网页布局。 并且,这种12栅格系统是根据屏幕大小自适应的,.container会自动根据屏幕大小调整总宽度和栅格的平均宽度。

  col-lg-n 最大列宽95px 在>=1200px像素的情况下将.container12等分 每份宽度95px 其余情况宽度为100%

  col-md-n 最大宽度78px; 在>=992px像素的情况下将.container12等分 其余情况100%

  col-sm-n 最大列宽60px 在>=768px像素的情况下将.container12等分 其余情况100%

  col-xs-n 列宽根据视口大小12等分 在任何尺寸的屏幕下都将.container 12等分

  3.2基础样式

    (1)Bootstrap的h1-h6样式取消了加粗,重新定义了上下外边距 h1-h3 margin-top:20px; margin-bottom-10px; H3-h6 margin-top:10px; margin-bottom-10px;

    (2)定义了4个对齐方式的样式,分别是.text-left, .text-center, .text-right,.text-justify .text-justify 英文字母的两端对齐

    (3)Bootstrap提供了五种默认的颜色样式,-primary 重点蓝, -success成功绿,-info信息蓝 -warning 警告橙,-danger危险红

  3.3btn组件+btn-group  

 alert组件 
危险警告

    一般的组件都有四种尺寸,超小xs, 小型sm, 普通, 大型lg 使用方法是 组件名-尺寸 同一组件不同类型的按钮可以结合使用 



 3.4table表格样式:

    给table元素添加一个div父元素,给这个div添加class=”table-responsive” 创建相应式表格,当视口像素小于768px时候,会出现水平滚动条


1 1 1
2 2 2
3 3 3

  3.5Badge徽章

  3.6导航条

(1)胶囊式导航条

(2)标签式导航条


  • 公司新闻
  • 公司新闻
  • 公司新闻
  • 行业新闻
  • 行业新闻
  • 行业新闻
  • 通知公告
  • 通知公告
  • 通知公告

  3.7 input-group


  3.8轮播


 

  3.9面板panel-group


 
面板内容
面板内容

  3.10媒体查询


 

上一篇:JS查找字符串中出现次数最多的字符

下一篇:JS注册页面的简单实例

您可能感兴趣的文章

相关阅读

热门软件源码

最新软件源码下载