bootstrap的css组件

一、输入框

1、创建一个span标签和input标签组

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <meta name="viewport"          content="width=device-width,user-scalable=no,          initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"/>    <link rel="stylesheet" href="bootstrap.min.css"/>    <title></title></head><body>    <div class="input-group">        <span>@</span>        <input type="text" class="form-control" placeholder="请输入你的姓名"/>    </div>

    <script src="jquery-1.10.2.min.js"></script>    <script src="bootstrap.min.js"></script></body></html>

2、如何让span与input在一行显示

<div class="input-group">    <span

class="input-group-addon

">@</span>    <input type="text" class="form-control" placeholder="请输入你的姓名"/></div>

3、将上述代码调整模拟百度样式

<div class="container">    <div class="row">        <div class="col-md-6 col-md-offset-3">            <div class="input-group">

            </div>        </div>    </div></div>

3、百度一下这里如何增加链接

<div class="container">    <div class="row">        <div class="col-md-6 col-md-offset-3">            <div class="input-group">                <input type="text" class="form-control" placeholder="请输入你的姓名"/>

            </div>        </div>    </div></div>

4、图标使用

进入网页https://www.bootcss.com/

点击

进入

点击组件可以进入图标选择页

复制这个图标名称

<span class="glyphicon glyphicon-envelope"></span>

5、图标与表单配合使用

<div class="input-group">    <span class="input-group-addon">        <span class="glyphicon glyphicon-envelope"></span>    </span>    <input type="text" class="form-control" placeholder="请输入你的姓名"/></div>

6、下拉菜单

<div class="dropdown open">    <button class="btn btn-primary" data-toggle="dropdown">        点击我        <span class="caret"></span>    </button>    <ul class="dropdown-menu">        <li>测试1</li>        <li>测试2</li>        <li>测试3</li>        <li>测试4</li>    </ul></div>

</br></br></br></br></br></br><div class

="dropup">

    <button class="btn btn-primary" data-toggle="dropdown">        点击我        <span class="caret"></span>    </button>    <ul class="dropdown-menu">        <li>测试1</li>        <li>测试2</li>        <li>测试3</li>        <li>测试4</li>    </ul></div>

7、按钮组

<button class="btn btn-primary">测试1</button><button class="btn btn-default">测试2</button><button class="btn btn-danger">测试3</button><button class="btn btn-success">测试4</button>

<div class="btn-group">    <button class="btn btn-primary">测试1</button>    <button class="btn btn-default">测试2</button>    <button class="btn btn-danger">测试3</button>    <button class="btn btn-success">测试4</button></div>

<div class="btn-toolbar">    <div class="btn-group">        <button class="btn btn-primary">测试1</button>        <button class="btn btn-default">测试2</button>        <button class="btn btn-danger">测试3</button>        <button class="btn btn-success">测试4</button>    </div>    <div class="btn-group">        <button class="btn btn-primary">测试1</button>        <button class="btn btn-default">测试2</button>        <button class="btn btn-danger">测试3</button>        <button class="btn btn-success">测试4</button>    </div>    <div class="btn-group">        <button class="btn btn-primary">测试1</button>        <button class="btn btn-default">测试2</button>        <button class="btn btn-danger">测试3</button>        <button class="btn btn-success">测试4</button>    </div></div>

<div class="btn-toolbar">

        <button class="btn btn-primary">测试1</button>        <button class="btn btn-default">测试2</button>        <button class="btn btn-danger">测试3</button>        <button class="btn btn-success">测试4</button>    </div>

        <button class="btn btn-primary">测试1</button>        <button class="btn btn-default">测试2</button>        <button class="btn btn-danger">测试3</button>        <button class="btn btn-success">测试4</button>    </div>    <div class="btn-group">        <button class="btn btn-primary">测试1</button>        <button class="btn btn-default">测试2</button>        <button class="btn btn-danger">测试3</button>        <button class="btn btn-success">测试4</button>    </div></div>

<div class="btn-toolbar">    <div class="btn-group btn-group-lg">        <button class="btn btn-primary">测试1</button>        <button class="btn btn-default">测试2</button>        <button class="btn btn-danger">测试3</button>        <button class="btn btn-success">测试4</button>    </div>    <div class="btn-group btn-group-xs">        <button class="btn btn-primary">测试1</button>        <button class="btn btn-default">测试2</button>        <button class="btn btn-danger">测试3</button>        <button class="btn btn-success">测试4</button>    </div>    <div class="btn-group">        <button class="btn btn-primary">测试1</button>        <button class="btn btn-default">测试2</button>        <button class="btn btn-danger">测试3</button>        <button class="btn btn-success">测试4</button>

            <button class="btn btn-primary" data-toggle="dropdown">                点击我                <span class="caret"></span>            </button>            <ul class="dropdown-menu">                <li>测试1</li>                <li>测试2</li>                <li>测试3</li>                <li>测试4</li>            </ul>        </div>    </div></div>

自适应

<div class="btn-group btn-group-justified">    <button class="btn btn-primary">测试1</button>    <button class="btn btn-default">测试2</button>    <button class="btn btn-danger">测试3</button>    <button class="btn btn-success">测试4</button></div>

<div class="btn-group btn-group-justified">    <a href="#" class="btn btn-danger">测试1</a>    <a href="#" class="btn btn-danger">测试2</a>    <a href="#" class="btn btn-danger">测试3</a>    <a href="#" class="btn btn-danger">测试4</a></div>

利用button如何实现

<div class="btn-group btn-group-justified">    <div class="btn-group">        <button class="btn btn-primary">测试1</button>    </div>    <div class="btn-group">        <button class="btn btn-primary">测试2</button>    </div>    <div class="btn-group">        <button class="btn btn-primary">测试3</button>    </div>    <div class="btn-group">        <button class="btn btn-primary">测试4</button>    </div> </div>

按钮下拉菜单-分离式菜单

<div class="btn-group">    <button class="btn btn-primary">点击我</button>    <button class="btn btn-primary" data-toggle="dropdown">        <span class="caret"></span>    </button>    <ul class="dropdown-menu">        <li>测试1</li>        <li>测试2</li>        <li>测试3</li>        <li>测试4</li>    </ul></div>

导航

<ul class="nav nav-tabs">    <li><a href="#">首页</a></li>    <li><a href="#">个人</a></li>    <li><a href="#">图书</a></li></ul>

<ul class="nav nav-pills">    <li><a href="#">首页</a></li>    <li><a href="#">个人</a></li>    <li><a href="#">图书</a></li></ul>

<ul class="nav nav-stacked">    <li><a href="#">首页</a></li>    <li><a href="#">个人</a></li>    <li><a href="#">图书</a></li></ul>

<ul class="nav nav-tabs">    <li><a href="#">首页</a></li>    <li

class="active"><

a href="#">个人</a></li>    <li><a href="#">图书</a></li></ul>

<ul class="nav nav-pills">    <li><a href="#">首页</a></li>

<a href="#">个人</a></li>    <li><a href="#">图书</a></li></ul>

<ul class="nav

nav-pills

 nav-stacked">    <li><a href="#">首页</a></li>    <li

class="active

"><a href="#">个人</a></li>    <li><a href="#">图书</a></li></ul>

自适应

<ul class="nav nav-pills nav-justified">    <li><a href="#">首页</a></li>    <li class="active"><a href="#">个人</a></li>    <li><a href="#">图书</a></li></ul>

二级导航

<ul class="nav nav-tabs">    <li><a href="#">首页</a></li>    <li class="active"><a href="#">个人</a></li>    <li><a href="#">图书</a></li>    <li class="dropdown">        <a href="#" class="dropdown-toggle" data-toggle="dropdown">其他        <span class="caret"></span>        </a>        <ul class="dropdown-menu">            <li>测试1</li>        </ul>    </li></ul>

原文地址：https://www.cnblogs.com/pere/p/11615685.html

时间： 2024-11-19 10:31:12

bootstrap的css组件的相关文章

【学习笔记】bootstrap之CSS组件

小图标新版Bootstrap提供了 200个小图标(相应地,提供了200个CSS样式),这200个样式均可以在内联元素上应用,并显示出对应的图标. 1)基本用法:在任何内联元素上应用所对应的样式即可. 所有的icon样式都以glyphicon-开头,这是因为这些小图标都是http: /glyphicons.com/ 网站提供,使用的时候必须同时使用两个样式,即.glyphicon和以.glyphicon-*开头的样式. 2)实现方式:新版icon利用@font-

[Bootstrap]7天深入Bootstrap(4)CSS组件

Bootstrap框架的三大核心之二:组件. 组件也是最核心的地方,因为绝大部分的网页都必须利用组件才能构建出绚丽的页面. 组件包括:Icon图标(Glyphicon). 下拉菜单(Dropdown).按钮组(Button group).按钮下拉菜单(Button dropdown).输入框组(Input group).导航 (Nav).导航条(Navbar).面包屑导航(Breadcrumb).分页导航(Pagination).标签(Label).徽章(Badge).大屏幕展播(Jumbo

bootstrap学习总结-css组件(三)

今天我们来看看css组件效果以及其中比较重要的类,这些类都不难,关键要熟练掌握,搭配使用,灵活运用.关于前两篇中,css样式和布局的文章,大家可以在首页进行阅读.http://www.cnblogs.com/jtjds/ 一:导航组件自己做了个导航,目前只有一级菜单,下一篇文章中,将给出二级菜单,涉及到js的插件,所以这里不在描述. <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charse

bootstrap 全局 CSS 样式

http://v3.bootcss.com/css/#less-mixins-utility 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践. HTML5 文档类型 Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型.在你项目中的每个页面都要参照下面的格式进行设置. 复制 <!DOCTYPE html> <html lang="zh-CN"> ...

bootstrap 之列表组件使用

列表是几乎所有网站都会用到的一个组件,正好bootstrap也给我们提供了这个组件的样式,下面我给大家简单介绍一下bootstrap中的列表组件的用法! 首先,重提一下引用bootstrap的核心文件的问题,以免有些刚入手的朋友忘了这个. 在页面的开头,先引用bootstrap的核心文件(css,js)等.  <link rel='stylesheet' href='css/bootstrap.min.css' /> &l

bootstrap之常见组件应用1

bootstrap中,常见的组件有很多,比如按钮,输入框,导航条,巨幕,面板等.这次根据对bootstrap的一系列学习进行总结. 按钮:button <button type="button" class="btn btn-default">button</button> 在这里面还可以加上字体图标等. 输入框:input <input type="text" class="form-control&qu

bootstrap导航条组件

一.导航条模板(官方文档) <nav class="navbar navbar-default"> <div class="container-fluid">  <div class="navbar-header"> <button type="button&

Android studio 3.4.1 使用 bootstrap 中的组件实例

电脑环境: ubuntu18.04 + Android studio 3.4.1 + bootsrtap4 Android studio中板式设计主要使用的 XML 布局文件,而在bootstrap中,基本的布局是通过书写 HTML 而设计的. 因此, 若既想要使用android studio方便烧录手机的功能, 又想使用 bootstrap 简单的页面布局, 那么问题的关键就是要学会在 XML 文件中调用 HTML 格式的文件. 以设计一个按钮, 并且点击会跳转到下一个界面为例说明如何在and

bootstrap轮播组件,大屏幕图片居中效果

在慕课网学习bootstrap轮播组件的时候,了解到轮播的图片都放在了类名为item下的img中视频中老师对图片自适应采用给图片img设置width=100%完成,然而这样自适应处理图片在不同屏幕中效果不同,大屏效果非常糟糕.比如这样一张图片, 为了图片自适应设置width=100%,在宽1920px下显示效果是这样的显然,因为图片设置了100%的宽度,其大部分内容被截去,显示非常糟糕. 后来想了想.有没有办法可以让图片真正的自适应呢并且居中呢,于是想到了css3背景图片属性backgro