`
lp895876294
  • 浏览: 285401 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

bootstrap使用

 
阅读更多

Bootstrap是一个前端框架,将常用的前端控件封装成了CSS样式和JS文件,能够方便灵活的设计出适用于移动设备和各个PC浏览器的前端页面,经过最近一段时间的使用感觉非常好用,再也不用担心前端页面布局和样式了。bootstrap能够兼容IE8浏览器,这样在XP电脑上也可以正常运行。相关学习资料如下。

bootstrap使用:http://v3.bootcss.com/getting-started/

bootstrap样式:http://v3.bootcss.com/css/

bootstrap组件:http://v3.bootcss.com/components/

font-awesome使用:http://fortawesome.github.io/Font-Awesome/get-started/

font-awesome例子(bootstrap图标扩展):http://fortawesome.github.io/Font-Awesome/examples/

分别使用bootstrap和font-awesome显示的图标:

 

<!-- bootstrap图标 -->
<span class="glyphicon glyphicon-search" style="font-size: 1.5em;"></span>
<!-- font-awesome图标 -->
<i class="fa fa-eye fa-2x" style="color: #7a9b76; cursor: pointer;" ></i>

 在页面开始引入相关的css和js文件:

<link rel="stylesheet" href="js/common/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="js/common/font-awesome/4.2.0/css/font-awesome.min.css">
<script type="text/javascript" src="js/common/jquery/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/common/bootstrap/3.2.0/js/bootstrap.min.js"></script>

 

 

  • 大小: 4.6 KB
分享到:
评论

相关推荐

    Bootstrap 使用Font Awesome图标字体文件,集成了圆角按钮,禁用状态按钮,自定义按钮尺寸,可设定按钮动画,旋转和闪烁动画。

    Bootstrap 使用Font Awesome图标字体文件 集成了圆角按钮 禁用状态按钮 自定义按钮尺寸 可设定按钮动画 旋转和闪烁动画 ps:字体文件在asset里面 说的不是很明白 看下面英文解释吧 Bootstrap buttons as per ...

    bootstrapValidator.js验证在bootstrap4.0使用

    1.bootstrap使用4.0 2.customValidator.css Bootstrap v4.0.0-beta (https://getbootstrap.com) jQuery v3.2.1

    bootstrap使用API

    此工具可以帮助对bootstrap的初学者,其中包括一些下拉,按钮、菜单、图标、样式等的代码快,帮助开发者实现快速进行代码生成。 此工具可以帮助对bootstrap的初学者,其中包括一些下拉,按钮、菜单、图标、样式等的...

    bootstrap 使用参考资料

    bootstrap 列表界面、窗口界面、操作信息提示界面以及验证信息等简单的工作参考资料,建议与我的博客一起使用 http://blog.csdn.net/rainbow_m/article/details/47042123

    bootstrap实现的自适应页面简单应用示例

    Bootstrap使用了媒体查询(Media Queries)来实现响应式设计,通过设置不同的断点来控制页面布局的变化。 现在,让我们来分析 Bootstrap 实现的自适应页面简单应用示例。该示例使用了Bootstrap的导航栏(Navbar)...

    Bootstrap展开收缩显示表格json格式数据.zip

    Bootstrap是一款广泛使用的前端框架,由Twitter开发,它提供了一套响应式布局、移动设备优先的Web开发工具,帮助开发者快速构建美观且功能丰富的网站。在本案例中,“Bootstrap展开收缩显示表格json格式数据.zip”是...

    bootstrap源码.rar

    - `fonts/`:Bootstrap使用的图标字体文件,如Glyphicons。 - `less/`:如果使用Less预处理器,这里包含了Bootstrap的less源码。 - `docs/`:包含Bootstrap的文档,可以帮助理解每个组件的用法和配置选项。 深入...

    Jasny-Bootstrap 的简单实例

    在Jasny Bootstrap中,固定格式的文本可能涉及到使用Affix组件。Affix可以让元素在页面滚动时保持固定在某个位置,例如顶部导航或侧边栏。要实现这个功能,我们需要在HTML中为需要固定的元素添加`data-spy="affix"`...

    bootstrap-4.6.2

    3. 图标字体文件:`glyphicons-halflings-regular.*`(可能是.svg、.eot、.ttf、.woff和.woff2格式),这些是Bootstrap使用的图标集。 4. JavaScript插件文件:如`carousel.js`、`collapse.js`等,分别对应不同的...

    BootStrap时间控件.zip

    Bootstrap使用jQuery库,所以大多数插件都是基于jQuery的。对于时间控件,开发者可能使用了诸如`datetimepicker`这样的插件,通过调用`.datetimepicker()`方法来初始化并配置控件。这个插件允许用户以日、小时和分钟...

    Bootstrap使用手册(操作手册)

    亲自将网页截取下来,整理出一份PDF文档提供大家方便,其中已设置书签快速浏览。内部使用代码后续上传。

    bootstrap.min.js+bootstrap.css

    1. **响应式设计(Responsive Design)**:Bootstrap使用媒体查询(media queries)和弹性网格系统,使网站能够适应不同设备的屏幕尺寸,无论是手机、平板还是桌面电脑。 2. **栅格系统(Grid System)**:...

    基于bootstrap-table的穿梭框

    例如,可以使用`$('#table-left').bootstrapTable({})`和`$('#table-right').bootstrapTable({})`来初始化。 4. **穿梭框插件**:引入穿梭框插件,通常通过调用`$.fn.bootstrapTable.defaults.extend('transfer', {...

    JQuery+BootStrap+BootStrapTable.rar

    BootStrap使用CSS预处理器Sass编写,并通过Less或Sass的变量、混合、嵌套规则等特性,使样式定制变得更加灵活。"bootstrap-3.3.7-dist"这个文件夹可能包含了BootStrap 3.3.7版本的所有必要资源,如CSS样式表、...

    Bootstrap_4_Site_Blueprints

    综上所述,本书《Bootstrap 4 Site Blueprints》提供了详尽的Bootstrap使用指南,从基础的网站结构搭建到高级功能的定制,再到自动化工具的集成,都进行了深入浅出的介绍。对于想要掌握Bootstrap 4的开发者而言,这...

    Bootstrap使用基础教程详解

    Bootstrap是一个广泛使用的前端开发框架,源自Twitter,它极大地提升了开发者构建网页的速度和效率。这个框架包含了一套完整的CSS样式库、预定义的样式表、基于jQuery的JavaScript插件,以及一个灵活的响应式网格...

    android-bootstrap

    在`android-bootstrap使用流程.txt`文件中,详细阐述了如何将`Android-Bootstrap`集成到项目中: 1. **添加依赖**:首先,在项目的`build.gradle`文件中添加`Android-Bootstrap`的依赖库。 2. **引入布局**:在XML...

    bootstrap经典实用案例

    8. **最佳实践**:学习如何有效地组织HTML结构,正确地使用Bootstrap的类,以及如何避免常见的问题,这些都是提升Bootstrap使用技巧的关键。 总的来说,"bootstrap经典实用案例"这个压缩包将帮助你深入理解和掌握...

    Bootstrap 项目实战(入门版)

    3. **CSS样式**:Bootstrap使用Sass作为其CSS预处理器,提供了一套完整的样式库,包括颜色、字体、间距和过渡效果。学习如何有效地利用这些样式将使你的页面更加专业和统一。 4. **JavaScript插件**:Bootstrap还...

    23种bootstrap导航菜单布局

    在HTML和CSS方面,Bootstrap使用栅格系统(Grid System)和预处理器(如SASS或LESS)来实现响应式布局。通过调整栅格列数和断点,可以轻松地适应不同设备屏幕尺寸。CSS样式表提供了丰富的预定义样式,如字体、颜色、...

Global site tag (gtag.js) - Google Analytics