对于Bootstrap的介绍以及如何使用

Bootstrap是HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。

可以自动适配任何设备,解决了响应式实现的繁琐问题,可以修改其中的各种样式,同样,其内部功能的强大包含了整个HTML,CSS,JS的各个方面。

通过Bootstrap制作的网站,极大地节省了代码,而且网页的整洁度有明显提高,熟练掌握使用可以更快更好的完成网站的制作。

http://v3.bootcss.com/getting-started/这是Bootstrap3.3.7的下载地址

如何使用:

如上,如果要插入自己的css文件,要将自己的css文件插入在之后



JS文件则必须将JQuery文件放在Bootstrap文件之前,否则运行会出错。在head中要记住写入这段代码,虽然是注释体,但是会生效:第一个js让ie8能支持HTML5的新标签                            第二个js让ie8能支持CSS3媒体查询

那么到底如何在代码中应用,需要从Bootstrap的官方网站了解各个样式的组名Bootstrap是通过不同的组名来判别各个标签应有哪种效果
例如一个table上有了这些class,那么出现的table样式为:

而不是传统的table样式

通过对每个标签不同的分组,可以实现各种不同的效果,并不需要css样式或js的设置改动,只需要在自己的css文件中改变需要的文字样式或颜色等即可快速做出框架网站。

 

栅格系统是Bootstrap制作响应式的重要系统,通过使用栅格,可以快速的完成响应式

栅格系统有这几种宽度适配,具体应用为:

表现出的效果为:全屏

宽度逐步减少:

宽度再次减少:

变为一列显示的效果。栅格系统熟练应用,可以使响应式布局迅速完成,只需在内部设置好相应的内容即可。

 
时间: 2024-10-19 16:38:22

对于Bootstrap的介绍以及如何使用的相关文章

Bootstrap简单介绍

一.一个小知识点 1.截取长屏的操作 2.设置默认格式 3.md,sm, xs 4.空格和没有空格的选择器 二.响应式介绍 - 响应式布局是什么? 同一个网页在不同的终端上呈现不同的布局等 - 响应式怎么实现的? 1. CSS3 media query 媒体查询 2. JS去控制网页的布局和样式等 - 缺点:工作量大,网页响应慢 - 优点: 专治疑难杂症 3. 用框架 - Bootstrap 测试用css 媒体查询实现响应式 方式一.link.css文件 主文件中导入link.css文件 方式二

Bootstrap简要介绍

Bootstrap是一个CSS的框架,它有Twitter工程师开发,但是目前这个框架比Twitter本身更为流行,ppt中重点描述了Bootstrap的网格布局原理,当然,作为一个框架,需要前端工程师能够深入看更多的例程,本文仅仅对最核心的思想做了概要介绍. 篇幅过长 点击链接下载资源https://www.slidestalk.com/s/TDAP_Bootstrap77698 原文地址:https://www.cnblogs.com/slidestalk/p/9765637.html

bootstrap treeview 介绍

简要教程 bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件.该jQuery插件基于Twitter Bootstrap,以简单和优雅的方式来显示一些继承树结构,如视图树.列表树等等. 插件依赖 Bootstrap v3.0.3 jQuery v2.0.3 以上两个外部依赖文件已经经过测试可以正常使用,其他版本的Bootstrap需要另行测试.该插件不支持bootstrap 2. 使用方法 首先要在页面中引入依赖文件和 bootstrap-tr

bootstrap简要介绍整理

bootstrap使用了一些html5元素和css属性,所以页面的文档类型应为html5 <!DOCTYPE html> <html> .... </html> bootstrap3设计目标是移动设备优先,所以是一个开发移动端页面的好的选择,为了让它更好的对移动设备友好,需要添加如下标签: <meta name="viewport" content="width=device-width, initial-scale=1.0"

Bootstrap框架-快速上手

什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.由 Twitter 的 Mark Otto 和 Jacob Thornton 合作开发的一套HTML.CSS和JS框架.Bootstrap是基于HTML5和CSS3开发的,它在jQuery的基础上进行了更为个性化和人性化的完善,形成一套自己独有的网站风格,并兼容大部分jQuery插件.用过HTML5和CSS3的人都知道,现在一些高大上的网站都少不了html5和css3.而Bootstrap正式

bootstrap模板

一.bootstrap基本介绍 1.什么是bootstrap? bootstrap就是个前端快速开发的工具,该工具是个简单.直观.强悍的前端开发框架,让web开发更加迅速简单 2.bootstrap安装方法 不同的应用场景安装方式不同,请大家参考bootstrap官网进行安装,这里我们直接下载源码复制的pycharm上就可以直接使用了 二.

Bootstrap框架的学习(一)

一.Bootstrap框架介绍 Bootstrap是一个非常优秀的前端UI框架,一个轻量级的UI前端框架,是基于HTML+CSS+JavaScript的框架. 二.简单介绍 Bootstrap框架是属于UI框架,与Jquery不一样,准确的描述Bootstrap框架属于CSS框架,而非JavaScript框架,但是它本身使用JavaScript来完善Bootstrap框架来完善视觉效果. 三.优点 完美的支持H5和CSS3,以及支持移动端浏览器 四.内容 可以参考一下官方文档http://v3.

Bootstrap基本使用[转]

Bootstrap是Twitter推出的一个由动态CSS语言Less写成的开源CSS/HTML框架(同时提供Sass 移植版代码).Bootstrap提供了全面的基本及组件样式并自带了13个jQuery插件(模态对话框.标签页.滚动条.弹出框等),可满足常用开发 需要,而且还根据需要定制.另外,Bootstrap提供了优雅的HTML和CSS规范,使用者也可以参考学习.本文作者(jawidx)仅在结构层面对 Bootstrap进行介绍. 全局样式 1 Bootstrap 中用到一些 HTML元素和

ASP.NET MVC使用Bootstrap系列(1)——开始使用Bootstrap

阅读目录 Bootstrap结构介绍 在ASP.NET MVC 项目中添加Bootstrap文件 为网站创建Layout布局页 使用捆绑打包和压缩来提升网站性能 在Bootstrap项目中使用捆绑打包 测试打包和压缩 小结 作为一名Web开发者而言,如果不借助任何前端框架,从零开始使用HTML和CSS来构建友好的页面是非常困难的.特别是对于Windows Form的开发者而言,更是难上加难. 正是由于这样的原因,Bootstrap诞生了.Twitter Bootstrap为开发者提供了丰富的CS